我最常用的10个CSS类

(1)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>
 
（2）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;
	}
（3）class=”selected”
这个类名我常常用在导航菜单上，当某个菜单被选中时：
<li class="selected"><a href="/about">About Us</a></li>
同时我在用JS实现的标签效果时使用它来现在选中的标签：
<dl>
<dt class="selected">Tag Cloud</dt>
 
	...
	...
	...
</dl>
 
（4）class=”first”, class=”last”
在:first-child和:last-child伪类被所有浏览器完全支持之前，我将坚持使用这两个样式。
我用这些类来选择某个元素的第一个和最后一个子元素。我发现这是减少不必要标签的非常棒的方法。
 
（5）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>
 
（6）class=”inner”
我常常使用这个样式，必须要说的是，它最常用于表面的用途。
我将这个类名指定到某个额外嵌套的div，因为我需要扩展的样式（比如，双背景）。
 
（7）class=”link”
就像这个类名一样，我用这个类名来控制链接样式。:)但是我常常将这个类名用在容器上，通常是一个p标签，
而不是直接用在A标签上面。它最常见的用途就是那些”read more”按钮。
<p class="link"><a href="#">Read more...</a></link>
那样我就可以用.link控制P内部的链接样式，而且也可以同时用该样式控制这个段落的样式。
 
（8）class=”one”, class=”two”, class=”three”…
当我需要单独的指出每个元素的时候，我使用这几个样式。最常见的案例就是在导航菜单中使用图片替换技术的时候。
<ul>
	<li class="one"><a href="#">Home</a></li>
	<li class="two"><a href="#">About</a></li>
...</ul>
 
(9)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>
 
（10）class=”section”
这个类名之前一般被称为”box”。:) 在我需要一些特殊样式时，我用它来显示特定章节的内容。
<div class="section">	content here...</div>