您当前的位置: 首页 » DIV+CSS编程 » 10个最常用的CSS className
10个最常用的CSS className
论坛链接
很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。
1.class=”fixed”
fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素的容器元素清除浮动，样式如下
.fixed:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.fixed{
display:block;
}
/* \*/
.fixed{
min-height:1%;
}
* html .fixed{
height:1%;
}
这个样式就可以用在下面的情形，每个li都是浮动的：
<ul class="fixed">
<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”（交替）的简称，这个class用在有一组样式一样的元素，需要为其中的某几个设定特别的样式，比如一组向左浮动的图片中需要有一张是向右浮动,可以这样：
#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”
这个最经常用的，用来处理mouseover或选中元素的效果。
<li class="selected"><a href="/about">About Us</a></li>
4.class=”first”, class=”last”
直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前，class=”first”, class=”last”用的地方还是很多的。
5.class=”image”
平常选择图片元素一般用类似(#container img)这样的标签选择器，但是我这里的class=”image”是用在包含图片的容器元素，假如你正在做一个新闻列表，需要在新闻标题下面加一行带图片和说明文字，并且向右浮动，可以这样做：
<img src="/images/img_me.jpg" alt="my funny face" />
This is me trying to look cool!
The rest of the content here
...
6. class=”inner”
inner也是经常使用的class，而且大部分上是用来制造视觉上的额外效果，用来给嵌套在容器里的子容器定义样式（比如制作双背景图片效果）：
7.class=”link”
link跟image类似，我用来嵌套一个A标签，最经常用来制作”Read More”链接：
<a href="#">Read more...</a>
8.class=”one”, class=”two”, class=”three”…
这些class用在需要区别每个子元素的列表项，比如用移动背景图片来制作导航菜单：
<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>
10.class=”section”
一般用在为指定内容中特定部分添加特定的样式：
以下为引用的内容：
<div class="section">
content here...</div>
1.class=”fixed”
fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素的容器元素清除浮动，样式如下
.fixed:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.fixed{
display:block;
}
/* \*/
.fixed{
min-height:1%;
}
* html .fixed{
height:1%;
}
这个样式就可以用在下面的情形，每个li都是浮动的：
<ul class="fixed">
<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”（交替）的简称，这个class用在有一组样式一样的元素，需要为其中的某几个设定特别的样式，比如一组向左浮动的图片中需要有一张是向右浮动,可以这样：
#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”
这个最经常用的，用来处理mouseover或选中元素的效果。
<li class="selected"><a href="/about">About Us</a></li>
4.class=”first”, class=”last”
直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前，class=”first”, class=”last”用的地方还是很多的。
5.class=”image”
平常选择图片元素一般用类似(#container img)这样的标签选择器，但是我这里的class=”image”是用在包含图片的容器元素，假如你正在做一个新闻列表，需要在新闻标题下面加一行带图片和说明文字，并且向右浮动，可以这样做：
<img src="/images/img_me.jpg" alt="my funny face" />
This is me trying to look cool!
The rest of the content here
...
6. class=”inner”
inner也是经常使用的class，而且大部分上是用来制造视觉上的额外效果，用来给嵌套在容器里的子容器定义样式（比如制作双背景图片效果）：
7.class=”link”
link跟image类似，我用来嵌套一个A标签，最经常用来制作”Read More”链接：
<a href="#">Read more...</a>
8.class=”one”, class=”two”, class=”three”…
这些class用在需要区别每个子元素的列表项，比如用移动背景图片来制作导航菜单：
<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>
10.class=”section”
一般用在为指定内容中特定部分添加特定的样式：
以下为引用的内容：
<div class="section">
content here...</div>