我最常用的10个CSS类
九月 6, 2009 by zeze · Leave a Comment
在指定类名到元素时，许多开发人员常常感到困惑，而且他们也常常在最后才会发现使用的类竟然是错误的。
类名不应当描述元素看起来像什么或在哪里使用它。一个良好的类名应该说明它代表的是些什么内容或功能。这是我最常用的10个类名及其解释，希望能给你一个明确的应该使用什么样的类名的概念。
class=”fixed”
我在每个样式表中都使用这个类名。我将这个类指定在包含浮动子元素的容器上。我要用它来清除该容器内的浮动，使用这些代码：
.fixed:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .fixed{ display:block; } /* */ .fixed{ min-height:1%; } * html .fixed{ height:1%; }
那么如果我遇到类似这样的情况：
<ul> <li><img src="images/img_01.jpg" alt="First Thumb" /></li> <li><img src="images/img_02.jpg" alt="Second Thumb" /></li> ...</ul>
…这里这些图片是浮动的，它们彼此紧挨着，我就这样使用：
class=”alt”
Alt是”alternative” (或是”alternate”)的缩写。我在当我有一组以某种方式布局的元素，但是其中的一些有些小变动的地方使用这个类名。比如，图片左浮动或右浮动。
#content img{ float:left; display:inline; margin-right:10px; border:1px solid #ccc; padding:1em 0; background:#fff; } #content img.alt{ float:right; margin-right:0; margin-left:10px; }
class=”selected”
这个类名我常常用在导航菜单上，当某个菜单被选中时：
<li class="selected"><a href="/about">About Us</a></li>
同时我在用JS实现的标签效果时使用它来现在选中的标签：
<dl> <dt class="selected">Tag Cloud</dt> ... ... ... </dl>
class=”first”, class=”last”
在:first-child和:last-child伪类被所有浏览器完全支持之前，我将坚持使用这两个样式。我用这些类来选择某个元素的第一个和最后一个子元素。我发现这是减少不必要标签的非常棒的方法。
class=”image”
我通常在选择图片时使用标签选择器（例如 #content img），而根据实际需要将这个类名用于图片的容器（p class=”image”）。比方说，你有个新闻列表，你需要图片，而且图片下面有靠左浮动的摘要，然后是余下的新闻内容。我这样做:
<p class="image"> <img src="/images/img_me.jpg" alt="my funny face" /> This is me trying to look cool!</p> <p> The rest of the content here ...</p>
class=”inner”
我常常使用这个样式，必须要说的是，它最常用于表面的用途。我将这个类名指定到某个额外嵌套的div，因为我需要扩展的样式（比如，双背景）。
class=”link”
就像这个类名一样，我用这个类名来控制链接样式。:)但是我常常将这个类名用在容器上，通常是一个p标签，而不是直接用在A标签上面。它最常见的用途就是那些”read more”按钮。
<p class="link"><a href="#">Read more...</a></link>
那样我就可以用.link控制P内部的链接样式，而且也可以同时用该样式控制这个段落的样式。
class=”one”, class=”two”, class=”three”…
当我需要单独的指出每个元素的时候，我使用这几个样式。最常见的案例就是在导航菜单中使用图片替换技术的时候。
<ul> <li class="one"><a href="#">Home</a></li> <li class="two"><a href="#">About</a></li> ...</ul>
class=”even”, class=”odd”
这两个类名用来交替显示表格和列表中的相邻的两行。
<ul> <li class="even">Content</li> <li class="odd">Content</li> <li class="even">Content</li> <li class="odd">Content</li> </ul>
或是：
<table border="0"> <tbody> <tr class="even"> <td>Content</td> <td>Content</td> </tr> <tr class="odd"> <td>Content</td> <td>Content</td> </tr> <tr class="even"> <td>Content</td> <td>Content</td> </tr> <tr class="odd"> <td>Content</td> <td>Content</td> </tr> </tbody> </table>
class=”section”
这个类名之前一般被称为”box”。:) 在我需要一些特殊样式时，我用它来显示特定章节的内容。
<div class="section"> content here...</div>
===================低调的分割线==========================
翻译自：http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names
转载请注明出处，谢谢。
相关文章
