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都是浮動的：
以下為引用的內容：
...
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或選中元素的效果。
以下為引用的內容：
4.class=”first”, class=”last”
直到99.9% 的瀏覽器支持:first-child和:last-child這兩個偽類之前，class=”first”, class=”last”用的地方還是很多的。
5.class=”image”
平常選擇圖片元素一般用類似這樣的標簽選擇器，但是我這里的class=”image”是用在包含圖片的容器元素，假如你正在做一個新聞列表，需要在新聞標題下面加一行帶圖片和說明文字，并且向右浮動，可以這樣做：
以下為引用的內容：
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”鏈接：
以下為引用的內容：
8.class=”one”, class=”two”, class=”three”…
這些class用在需要區別每個子元素的列表項，比如用移動背景圖片來制作導航菜單：
以下為引用的內容：
9.class=”even”, class=”odd”
用來實現隔行換樣式，一般用在表格和列表：
以下為引用的內容：
- Content
- Content
- Content
- Content
10.class=”section”
一般用在為指定內容中特定部分添加特定的樣式：
以下為引用的內容：
content here...
没有评论:
发表评论