1、選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)是對該對象設(shè)置的具體樣式。
創(chuàng)新互聯(lián)專注于霍林郭勒網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供霍林郭勒營銷型網(wǎng)站建設(shè)，霍林郭勒網(wǎng)站制作、霍林郭勒網(wǎng)頁設(shè)計、霍林郭勒網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù)，打造霍林郭勒網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供霍林郭勒網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
2、屬性和屬性值以“鍵值對“?的形式出現(xiàn)。
3、屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等。
4、屬性和屬性值之間用英文“:“連接。
5、多個“鍵值對”之間用英文“;”進行區(qū)分?？梢杂枚温浜捅砀竦膶R的演示。
CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
擴展資料：
CSS作為一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，被用于描述網(wǎng)頁上的信息格式化和顯示的方式。CSS樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件。
無論哪一種方式，樣式單包含將樣式應(yīng)用到指定類型的元素的規(guī)則。外部使用時，樣式單規(guī)則被放置在一個帶有文件擴展名_css的外部樣式單文檔中。
樣式規(guī)則是可應(yīng)用于網(wǎng)頁中元素，如文本段落或鏈接的格式化指令。樣式規(guī)則由一個或多個樣式屬性及其值組成。內(nèi)部樣式單直接放在網(wǎng)頁中，外部樣式單保存在獨立的文檔中，網(wǎng)頁通過一個特殊標簽鏈接外部樣式單。
一、Css書寫順序：
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等)
二、Css語法：
命名一般為小寫英文字母。
為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
每條聲明語句的?:?后應(yīng)該插入一個空格。
所有聲明語句都應(yīng)當(dāng)以分號結(jié)尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
對于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5?代替?0.5；-.5px?代替?-0.5px）。
十六進制值應(yīng)該全部小寫，例如，#fff。
盡量使用簡寫形式的十六進制值，例如，用?#fff?代替?#ffffff。
避免為 0 值指定單位，例如，用?margin: 0;?代替?margin: 0px;。
Css常用的一些命名：
可參考：CSS 常用命名 - 彼岸時光 - 博客園。
三、Css的引入：
Css的引入一般有兩種，link和@import,一般建議使用link引入。這樣可以避免考慮@import的語法規(guī)則和注意事項，避免產(chǎn)生資源文件下載順序混亂和http請求過多的煩惱。
四、Css的命名規(guī)范(BEM,OOCSS)：
什么是BEM：BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發(fā)者來說更加透明而且更有意義。
命名約定如下：
.block{} // 塊即是通常所說的 Web 應(yīng)用開發(fā)中的組件或模塊。每個塊在邏輯上和功能上都是相互獨立的。
.block__element{} // 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。
.block--modifier{} // 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后，會有不同的外觀。
優(yōu)點：
BEM 的優(yōu)點在于所產(chǎn)生的 CSS 類名都只使用一個類別選擇器，可以避免傳統(tǒng)做法中由于多個類別選擇器嵌套帶來的復(fù)雜的屬性級聯(lián)問題。在 BEM 命名規(guī)則中，所有的 CSS 樣式規(guī)則都只用一個類別選擇器。因此所有樣式規(guī)則的特異性（specificity）都是相同的，也就不存在復(fù)雜的優(yōu)先級問題。這可以簡化屬性值的層疊規(guī)則。代碼清單中的命名規(guī)則的好處在于每個 CSS 類名都很簡單明了，而且類名的層次關(guān)系可以與 DOM 節(jié)點的樹型結(jié)構(gòu)相對應(yīng)。
缺點：
這樣類名過于長，且復(fù)雜。
什么是OOCSS（面向?qū)ο驝SS）：
OOCSS 表示的是面向?qū)ο?CSS（Object Oriented CSS），是一種把面向?qū)ο蠓椒▽W(xué)應(yīng)用到 CSS 代碼組織和管理中的實踐。 OOCSS最關(guān)鍵的一點就是：提高他的靈活性和可重用性。這個也是OOCSS最重要的一點。OOCSS主張是通過在基礎(chǔ)組件中添加更多的類，從而擴展基礎(chǔ)組件的CSS規(guī)則，從而使CSS有更好的擴展性。
OOCSS的優(yōu)點：
減少CSS代碼。
具有清潔的HTML標記，有語義的類名，邏輯性強的層次關(guān)系。
語義標記，有助于SEO。
更好的頁面優(yōu)化，更快的加載時間（因為有很多組件重用）。
可擴展的標記和CSS樣式，有更多的組件可以放到庫中，而不影響其他的組件。
能輕松構(gòu)造新的頁面布局，或制作新的頁面風(fēng)格。
OOCSS的缺點：
OOCSS適合真正的大型網(wǎng)站開發(fā)，因為大型網(wǎng)站用到的可重用性組件特別的多，如果運用在小型項目中可能見不到什么成效。所以用不用OOCSS應(yīng)該根據(jù)你的項目來決定。如果沒用巧妙的使用，創(chuàng)建組件可能對于你來說是一堆沒用的東西，成為一爛攤子，給你的維護帶來意想不到的杯具，說不定還是個維護的噩夢。
歡迎到優(yōu)就業(yè)來了解
堅持使用統(tǒng)一的CSS命名規(guī)則并養(yǎng)成習(xí)慣，可以讓你更容易維護、修改以前編寫過的CSS代碼，進而提高自己的工作效率，而且還能加強搜索引擎的SEO優(yōu)化，方便記憶，那么，我們?nèi)绾尾拍軐SS的命名做得井井有條呢？
1、CSS文件及樣式命名
首先，先為大家展示一些CSS文件及樣式的命名樣例，因為這些名稱能使大家立馬明白定義的文件，具體如下所示：
（1）、CSS文件命名規(guī)范
全局樣式：global.css
框架布局：layout.css
字體樣式：font.css
鏈接樣式：link.css
打印樣式：print.css
主要的：master.css
專欄：columns.css
主題：themes.css
（2）、CSS樣式命名規(guī)范
對于CSS樣式的命名規(guī)則，建議用字母、_號工、-號、數(shù)字組成，必須以字母開頭，不能為純數(shù)字，為了開發(fā)后樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事一看就明白這樣式大概是哪一塊的，這樣就節(jié)省了查找樣式的時間。
例如：頭部樣式用header，頭部左邊，可以用header_left或header_l，還有如果是列結(jié)構(gòu)的可以這樣——box_1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box_3of3 (三列中的第三列)，其它的我就不一一舉例了，大家按以上規(guī)律去命名就好。
下面列出一些常用的命名單詞方便大家使用（以后大家工作過程中慢慢把自己積累的單詞都共享出來，那大家的命就會更加統(tǒng)一了，就不會有一義多詞的情況了）：
容器：container/box
頭部：header
主導(dǎo)航：mainNav
子導(dǎo)航：subNav
頂導(dǎo)航：topNav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsideBar
右導(dǎo)航:rightsideBar
網(wǎng)站標志：logo
大廣告：banner
頁面中部：mainBody
整個頁面：content
底部：footer
菜單：menu
菜單內(nèi)容：menuContent
子菜單：subMenu
子菜單內(nèi)容：subMenuContent
搜索：search
搜索關(guān)鍵字：keyword
搜索范圍：range
標簽文字：tagTitle
標簽內(nèi)容：tagContent
當(dāng)前標簽：tagCurrent/currentTag
標題：title
內(nèi)容：content
列表：list
當(dāng)前位置：currentPath
側(cè)邊欄：sidebar
圖標：icon
注釋：note
登錄：login
注冊：register
面包屑：breadCrumb(即頁面所處位置導(dǎo)航提示)
列定義：column_1of3 (三列中的第一列)、column_2of3 (三列中的第二列)、column_3of3 (三列中的第三列)
2、CSS的優(yōu)先級
行內(nèi)樣式(inline style) ID選擇符 樣式(class)、偽類(pseudo-class)和屬性(attribute)選擇符 類別(type)，偽對象(pseudo-element)。
博客注解：
*內(nèi)聯(lián)樣式(inline style)：元素的style屬性，比如 div style="color:red;"/div，其中的color:red;就是行內(nèi)樣式。
*ID選擇符：元素的id屬性，比如div/div可以用ID選擇符#content
*偽類(pseudo-class)：最常見的是錨(a)偽類，比如a:link,a:visited.
*屬性選擇符(attribute selectors)：比如div[class=demo],含有class為demo的div元素。
*類別選擇器(type selector)：HTML標簽選擇，比如div .demo,div元素下含有class為demo的元素。
*偽對象選擇器(pseudo-element selector)：比如div:first-letter,div元素下的第一個單詞。
3、默認值
通常padding和margin的默認值為0，background-color的默認值是transparent，但是在不同的瀏覽器默認值可能不同。
如果怕有沖突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，例如：
* {
padding:0;
margin:0
}
或者是針對某元素來定義：
ul,li,div,span {
padding:0;
margin:0
}
4、不要重復(fù)定義可繼承的值
CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經(jīng)在父元素中定義過的，在子元素中可以直接繼承，不需要重復(fù)定義。
除非是為了更變當(dāng)前元素樣式不使用父元素的屬性值，但是要注意，瀏覽器可能用一些默認值覆蓋你的定義。
5、CSS代碼書寫樣式
在寫CSS代碼的時候，對于縮進、斷行、空格，每個人有每個人的書寫習(xí)慣，在經(jīng)過不斷實踐后，我決定采用下面這樣的書寫樣式：
.classname {
width:100px;
}
當(dāng)使用聯(lián)合定義時，我通常將每個選擇器單獨寫一行，這樣方便在CSS文件中找到它們，在最后一個選擇器和大括號之間加一個空格，每個定義也單獨寫一行，分號直接在屬性值后，不要加空格。
我習(xí)慣在每個屬性值后面都加分號，雖然規(guī)則上允許最后一個屬性值后面可以不寫分號，但是如果你要加新樣式時容易忘記補上分號而產(chǎn)生錯誤，所以還是都加比較好，最后，關(guān)閉的大括號單獨寫一行，這樣的空格和換行有助與閱讀
6、使用css縮寫
使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀，常用的css縮寫的主要規(guī)則有：
（1）、顏色
16進制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：
#000000可以縮寫為#000;#336699可以縮寫為#369;
（2）、盒尺寸
通常有下面四種書寫方法:
property:value1; 表示所有邊都是一個值value1
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left
方便的記憶方法是順時針，上右下左，具體應(yīng)用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
（3）、邊框(border)
邊框的屬性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以縮寫為一句：border:1px solid #000;
語法是：border:width style color;
（4）、背景(Backgrounds)
背景的屬性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以縮寫為一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是：background:color image repeat attachment position;
你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
（5）、字體(fonts)
字體的屬性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以縮寫為一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
提示：如果你縮寫字體定義，至少要定義font-size和font-family兩個值。
（6）、列表(lists)
取消默認的圓點和序號可以這樣寫list-style:none;
list的屬性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以縮寫為一句：list-style:square inside url(image.gif);
7、多重CSS樣式定義，屬性追加重復(fù)最后優(yōu)先原則
一個標簽可以同時定義多個class，也可以是同一個class中重復(fù)定義屬性，例如：
我們先定義兩個樣式：
.one{width:200px;background:url() no-repeat left top;}
.two{border:10px solid #000; background:url() no-repeat left top;}
在頁面代碼中，我們可以這樣調(diào)用:
div class="one" two/div
這樣最終的顯示效果是這個div樣式是什么呢？重復(fù)的是以哪一個為準呢？
div class="one" two/div應(yīng)用到的樣式如下：
width:200px;
border:10px solid #000;
background:url() no-repeat left top;
因為，當(dāng)應(yīng)用兩個或多個樣式時，瀏覽器所應(yīng)用的樣式根據(jù)是屬性追加重復(fù)最后優(yōu)先原則。
就是說兩個或多個或重復(fù)的樣式名定義，瀏覽器所應(yīng)用的樣式是按先后順序的，如果定義了重復(fù)的屬性值，以最后定義的為準，如果應(yīng)用了兩個或多個樣式名，里面不重復(fù)定義的屬性值就追加上去，重復(fù)的屬性值就以最后一個為準。
這里要注意的是，樣式的先后不是根據(jù)頁面上應(yīng)用的名字順序，而是樣式表里的樣式順序。
8、導(dǎo)入(Import)和隱藏CSS
因為老版本瀏覽器不支持CSS，一個通常的做法是使用@import技巧來把CSS隱藏起來，例如：
@import url(main.css);
然而，這個方法對IE4不起作用，這讓我很是頭疼了一陣子，后來我用這樣的寫法：
@import main.css;
這樣就可以在IE中也隱藏CSS了，呵呵，還節(jié)省了5個字節(jié)呢！
9、CSS hack
有些時候，你需要對IE瀏覽器的bug定義一些特別的規(guī)則，這里有太多的CSS技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發(fā)布的IE版里是否更好的支持CSS，這兩種方法都是最安全的。
（1）、注釋的方法
a、在IE中隱藏一個CSS定義，你可以使用子選擇器(child selector):
htmlbody p {
}
b、下面這個寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)
* html p {
}
c、還有些時候，你希望IE/Win有效而IE/Mac隱藏，你可以使用反斜線技巧：
* html p {
declarations
}
d、下面這個寫法只有IE7瀏覽器可以理解(對其他瀏覽器都隱藏)
*+ html p {
}
（2）、條件注釋(conditional comments)的方法
另外一種方法，我認為比CSS Hacks更加經(jīng)得起考驗就是采用微軟的私有屬性條件注釋，用這個方法你可以給IE單獨定義一些樣式，而不影響主樣式表的定義，就像這樣：
!--[if IE]
link rel=stylesheet/css href="" /
![endif]--
還有更多的CSS hack大家可以通過網(wǎng)上找找，但是有很多hack都是不符合w3c標準的，根據(jù)以上的hack寫了一個能區(qū)分IE6、IE7、FF的樣式，而且可以符合w3c標準，代碼如下：
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
這樣寫后在IE6下寬是100px，IE7下是95px，火狐下是90px。
10、明確定義單位，除非值為0
忘記定義尺寸的單位是CSS新手普遍的錯誤，在HTML中你可以只寫width=100，但是在CSS中，你必須給一個準確的單位，比如：width:100px width:100em。
只有兩個例外情況可以不定義單位：行高和0值，除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。
11、區(qū)分大小寫
當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱是區(qū)分大小寫的，為了避免這種錯誤，建議大家將所有的定義名稱都采用小寫。
class和id的值在HTML和XHTML中也是區(qū)分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在CSS的定義和XHTML里的標簽是一致的。
12、id和class的使用及區(qū)別
我們知道在樣式表定義一個樣式的時候，可以定義id，也可以定義class，例如：
ID方法：#test{color:#333333}，在頁面中調(diào)用div內(nèi)容div
CLASS方法：.test{color:#333333}，在頁面中調(diào)用div class="test"內(nèi)容div
一般來說，id是一個頁面只可以使用一次，class是可以多次引用的。
可我在頁面中用了多個相同id在IE中顯示也正常，id和class好象沒什么區(qū)別，用多個相同id有什么影響嗎？
頁面存在多個相同的ID影響就是不能通過W3的校驗，在頁面顯示上，目前的瀏覽器還都允許你犯這個錯誤，用多個相同ID“一般情況下”也能正常顯示，但是當(dāng)你需要用JavaScript通過id來控制這個div，那就會出現(xiàn)錯誤。
id是一個標簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字，如果一個屋子有2個人同名，就會出現(xiàn)混淆。
class是一個樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服。
從概念上來說：id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個結(jié)構(gòu)/內(nèi)容。
對此，建議大家在寫XHML+CSS時如果是維一的結(jié)構(gòu)定位的就用id，否則就用class吧（這樣讓出非結(jié)構(gòu)定位的div塊的id讓程序員自己定義使用）！
13、取消class和id前的元素限定
當(dāng)你寫給一個元素定義class或者id，你可以省略前面的元素限定，因為ID在一個頁面里是唯一的，class可以在頁面中多次使用，在看來，你限定某個元素是毫無意義的，例如：
div#id1{}可以寫成#id1{}
這樣可以節(jié)省一些字節(jié)。
14、使用子選擇器(descendant selectors)
使用子選擇器是影響他們效率的原因之一，子選擇器可以幫助你節(jié)約大量的class定義，我們來看下面這段代碼：
div
ul
li class="subnavitem" a href="" class="subnavitem"SEO/a/li
li class="subnavitemselected" a href="" class="subnavitemselected"SEO/a /li
li class="subnavitem" a href="" class="subnavitem"SEO/a /li
/ul
/div
這段代碼的CSS定義是：
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的方法替代上面的代碼：
ul id=”subnav”
li a href=""SEO/a /li
li class="sel" a href=""SEO/a /li
li a href=""SEO/a /li
/ul
樣式定義是：
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。
如果一個容器里有多個同樣的元素，而且這些元素樣式都不一樣，請避免用這個方式，建以大家可以采用不同的class如：
ul class=”one”li/li/ul
ul class=”tow”li/li/ul
15、不需要給背景圖片路徑加引號
為了節(jié)省字節(jié)，建議不要給背景圖片路徑加引號，因為引號不是必須的，例如：
background-image:url(images
margin:0 auto;
}
但是IE5/Win不能正確顯示這個定義，我們采用一個非常有用的技巧來解決：用text-align屬性，就像這樣：
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一個body的text-align:center;規(guī)則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。
16、層占據(jù)的空間
當(dāng)調(diào)試CSS發(fā)生錯誤，你就要像排版工人，逐行分析CSS代碼，我通常在出問題的層上定義一個背景顏色，這樣就能很明顯看到層占據(jù)多大空間？
有些人建議用border，一般情況也是可以的，但問題是，有時候border會增加元素的尺寸，border-top和boeder-bottom破壞縱向margin的值，所以使用background更加安全些（更多的介紹，
把id留給后臺開發(fā)和JS使用，除此之外頁面的page id(如首頁的外層需要一個ID id="pageIndex")，頁面結(jié)構(gòu)（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中，一律使用class命名。
在編碼思想上，我們可以將頁面拆分成不同的層級（布局、模塊、元件）。
什么是CSS命名空間？
通過統(tǒng)一的命名規(guī)范定義命名的范圍，成為CSS class id命名空間。
布局: 以語義化的單詞layout作為命名空間，例如主欄布局命名 layout-main，只改變layout-命名空間后面的命名，layout始終保留。布局的命名空間為layout-xxx。
模塊：頁面是由一個或多個模塊組成，模塊的英文單詞是module，規(guī)范簡寫成mod，如新聞模塊mod-news，照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx 。
元件：元件是屬于模塊內(nèi)部的，也可以說模塊是由元件和它內(nèi)部的自有元素組成。如用戶照片信息元件cell-user-photo。元件的命名空間為cell-xxx 。
文字顏色(命名空間text-xxx)
text-c1, text-c2,text-c3……
背景顏色(命名空間bg -xxx)
bg-c1,bg-c2,bg-c3……
邊框顏色(命名空間border-xxx)
border-c1,border-c2,border-c3……
參考自文章 CSS命名規(guī)則
CSS書寫順序
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等)
CSS書寫規(guī)范使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
去掉小數(shù)點前的“0”
簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦!
16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
連字符CSS選擇器命名規(guī)范
1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢?
輸入的時候少按一個shift鍵;
瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的)
能良好區(qū)分JavaScript變量命名(JS變量命名是用“_”)
不要隨意使用Id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用?！?/p>
為選擇器添加狀態(tài)前綴
有時候可以給選擇器添加一個表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。
CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權(quán)：copyright
滾動：scroll
內(nèi)容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務(wù)：service
注冊：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner
注釋的寫法:
/* Header */
內(nèi)容區(qū)
/* End Header */
Id的命名:
1)頁面結(jié)構(gòu)
容器: container
頁頭：header
內(nèi)容：content/container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
(2)導(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
標題: title
摘要: summary
(3)功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區(qū)：shop
標題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動：scroll
標簽頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務(wù)：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
注意事項::
1.一律小寫;
2.盡量用英文;
3.不加中槓和下劃線;
4.盡量不縮寫，除非一看就明白的單詞。
CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
重慶分公司
重慶分公司
