常用的CSS命名規(guī)則
書寫順序
1.位置屬性(position, top, right, z-index,display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing,color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
屬性
顯示屬性：display/list-style/position/float/clear...
自身屬性（盒模型）：width/height/margin/padding/border
背景：background
行高：line-height
文本屬性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
其他：cursor/z-index/zoom/overflow
CSS3屬性：transform/transition/animation/box-shadow/border-radius
鏈接樣式嚴(yán)格按照順順序：a:link->a:visited->a:hover->a:active
常用的命名
<頁面>page <包>wrap latout <頁頭>header(head)
<頁尾>footer(foot ft) <內(nèi)容>content(cont) <菜單>menu <導(dǎo)航>nav
<主體>main <子主體>submain <側(cè)欄>sidebar(side) <標(biāo)志>logo
<廣告>banner <標(biāo)題>title(tit) popo(pop) <圖標(biāo)>icon <注釋>note
<按鈕>btn <文本>txti <塊>block <窗口>window(win) <頂端>tips
頁面結(jié)構(gòu)：
- <容器>--container <頭>--header <內(nèi)容>--content、container
<頁面主體>--main <頁尾>--footer <導(dǎo)航>--nav <側(cè)欄>--sidebar
<欄目>--column <頁面外圍控制整體布局寬度>--wrapper
<左右中>--left right center
功能
- <標(biāo)志>--logo <廣告>--banner <登陸>--login <登陸條>--loginbar
<注冊>--regsiter <搜索>--search <功能區(qū)>--shpo <標(biāo)題>--title
<加入>--joinus <狀態(tài)>--status <按鈕>--btn <滾動>--scroll
<標(biāo)簽頁>--tab <文章列表>--list <提示信息>--msg <當(dāng)前的>--current
<小技巧>-- tips <圖標(biāo)>--icon <注釋>--note <指南>--guild
<服務(wù)>--service <熱點>--hot <新聞>--news <下載>--download
<投票>--vote <友情鏈接>--link <版權(quán)>--copyright
導(dǎo)航
- <導(dǎo)航>nav <主導(dǎo)航>mainnav <子導(dǎo)航>subnav <頂導(dǎo)航>topnav
< 邊導(dǎo)航>sidebar <左導(dǎo)航>leftsidebar <右導(dǎo)航>rightsidebar
<菜單>menu <子菜單>submenu <標(biāo)題>title <摘要>summary
字體規(guī)則
- 為了防止文件合并及編碼轉(zhuǎn)換時造成問題，字體使用英文名字：黑體（SimHei）、宋體（SimSun）微軟雅黑（Microsoft Yahei。幾個單詞中間有空格組成的必需加引號）
- 字體粗細(xì)采用具體數(shù)值，粗體bold寫為700，正常normal寫為400.
- font-size必須以px或者pt為單位，推薦用px（pt為打印字體大小設(shè)置）。
class的命名：
- 顏色：使用顏色的名稱或者16進制代碼，如：
.red{color:red;}
.f60{color:#f60;}
.ff6600{color:#ff6600;}
- 字體大小，直接使用font+字體大小作為名稱，如：
.font2px{font-size:12px;}
.font9pt{font-size:9pt}
- 對齊樣式，使用對齊目標(biāo)的英文名稱，如：
.left{float:left}
.bottom{float:bottom}
標(biāo)題欄樣式，使用“類別+功能”的方式命名。
注意事項：
主要的：master.css
模塊 ：module.css
基本公用：base.css
布局，版面：layout.css
主題：themes.css
專欄：columns.css
文字：font.css
表單：forms.css
補丁：mend.css
打?。簆rint.css
10個常用的CSS class
class="fixed"
用在包含浮動子元素的容器元素清除浮動： .fixed:after{ content:"..."; display:block; height:0; clear:both; visibility:hidden; }class="alt"交替的簡稱
這個class用在一組樣式一樣的元素，需要為其中的某幾個設(shè)定單獨的樣式，比如一組向左浮動的圖片中有一張需要向右浮動，就可以使用這個class。
#content img{ float:left; display:inline; margin-rigth:10px; border:1px solid #ccc; padding:1em 0; background:#fff; }
#content img.alt{ float:right; margin-right:0; margin-left:10px; }class="selected" 經(jīng)常用的，用于處理mouseover活選中元素的效果。
<li class="selected"> <a href="/about">About Us</a> <li>class="first",class="last" 瀏覽器支持first-child和last-child這兩個偽類之前，用class="first",class="last" 用的地方很多。
class="image"用于包含圖片的容器元素。
class="inner" 大部分用來制造視覺上的額外效果。用來嵌套在容器里的子容器定義樣式，（比如制作雙背景圖片效果）
class="link" 用來嵌套一個a標(biāo)簽，和image類似。
class=“one”,class="two",class="three"...
用于需要區(qū)別每個元素的列表項，比如用移動背景圖片來制作導(dǎo)航的菜單。class=“even”,class="odd" 用來實現(xiàn)隔行換樣式，一般用在表格和列表·
<ul> <li class="even">Content</li> <li class="odd">Content</li> <li class="even">Content</li> <li class="odd">Content</li> </ul>class="section" 一般用在為指定內(nèi)容中特定部分添加特定的樣式
