我最常用的10个CSS类

在指定类名到元素时,许多开发人员常常感到困惑,而且他们也常常在最后才会发现使用的类竟然是错误的。

类名不应当描述元素看起来像什么或在哪里使用它。一个良好的类名应该说明它代表的是些什么内容或功能。这是我最常用的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>  

…这里这些图片是浮动的,它们彼此紧挨着,我就这样使用:

<ul class="fixed">

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,因为我需要扩展的样式(比如,双背景)。

<div id="container">  
    <div class="inner">

    </div>
</div>  

就像这个类名一样,我用这个类名来控制链接样式。:)但是我常常将这个类名用在容器上,通常是一个p标签,而不是直接用在A标签上面。它最常见的用途就是那些”read more”按钮。

<p class="link"><a href="#">Read more...</a></p>

那样我就可以用.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>  
    <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>
</table>  

class=”section”

这个类名之前一般被称为”box”。:) 在我需要一些特殊样式时,我用它来显示特定章节的内容。

<div class="section">  
    content here...
</div>  

=================低调的分割线========================

翻译自:http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names
转载请注明出处,谢谢。