1，CSS文件和樣式命名
首先我會給妳看壹些CSS文件和樣式的命名例子，因為這些名字可以讓妳立刻理解定義的文件，如下圖:
(1)，CSS文件命名規範
全局樣式:global.css
框架布局:layout.css
字體樣式:font.css
鏈接樣式:link.css
打印樣式:print.css
Main: master.css
列:columns.css
主題:themes.css
(2)、CSS樣式命名規範
CSS樣式的命名規則，建議使用字母、_符號、-符號和數字，必須以字母開頭，不能是純數字。為了方便開發後的風格名稱管理，請用有意義的詞或縮寫來命名，讓同事們壹眼就能明白這個風格是關於哪壹件的，從而節省尋找風格的時間。
比如表頭樣式可以用header，表頭左側可以用header_left或者header_l，如果是列結構可以這樣——box _ 1of 3(三列第壹列)，box_2of3(三列第二列)，box_3of3(三列第三列)，其他的我就不舉例了。
下面是壹些常用的命名詞，方便妳使用(以後妳會慢慢享受妳在工作中積累的所有詞，這樣大家的生活會更統壹，不會超過壹個詞):
容器:容器/盒子
標題:標題
主導航:主導航
子導航:subNav
頂部導航:頂部導航
側面導航:側欄
左側導航:左側邊欄
右側導航:右側邊欄
網站徽標:徽標
大廣告:橫幅
頁面中間:主體
整頁:內容
底部:頁腳
菜單:菜單
菜單內容:菜單內容
子菜單:子菜單
子菜單內容:子菜單內容
搜索:搜索
搜索關鍵字:關鍵字
搜索範圍:範圍
標簽文本:標簽標題
標簽內容:標簽內容
當前標簽:標簽當前/當前標簽
標題:標題
內容:內容
列表:列表
當前位置:當前路徑
側欄:側欄
圖標:圖標
註意:註意
登錄:登錄
註冊:註冊
BreadCrumb: breadcrumb(即頁面位置的導航提示)
列定義:column_1of3(三列中的第壹列)、column_2of3(三列中的第二列)和column_3of3(三列中的第三列)。
2.CSS的優先級
內嵌樣式)> ID選擇器>；樣式(類)，偽類和屬性選擇器>:類型，偽元素。
博客備註:
* inline style:元素的樣式屬性，例如
*id選擇器:元素的id屬性，例如
偽類:最常見的是anchor (a)偽類，比如a:link，a:visited。
*屬性選擇器:如div[class=demo]，包含壹個div元素，帶有類demo。
*類型選擇器):HTML標簽選擇，比如div。demo，其中div元素下有壹個demo類的元素。
*偽元素選擇器:比如div: first-letter，div元素下的第壹個單詞。
3.缺省值
通常填充和邊距的默認值為0，背景色的默認值為透明，但不同瀏覽器的默認值可能不同。
如果擔心沖突，可以在樣式表的開頭將所有元素的邊距和填充值定義為0，例如:
* {
填充:0；
邊距:0
}
或者為壹個元素定義:
ul，li，div，span {
填充:0；
邊距:0
}
4.不要重復定義可繼承的值。
在CSS中，子元素自動繼承父元素的屬性值，如顏色、字體等，這些屬性已經在父元素中定義好了，可以直接在子元素中繼承，不需要重復定義。
除非您不使用父元素的屬性值來更改當前元素樣式，否則請註意瀏覽器可能會用壹些默認值覆蓋您的定義。
5、CSS代碼的編寫風格
寫CSS代碼的時候，每個人對於縮進、換行符、空格都有自己的書寫習慣。經過不斷的練習，我決定采用以下的寫作風格:
。類名{
寬度:100 px；
}
當使用聯合定義時，我通常為每個選擇器單獨寫壹行，這樣便於在CSS文件中找到它們。在最後壹個選擇器和大括號之間添加壹個空格，並為每個定義單獨寫壹行。分號直接在屬性值後面，沒有空格。
我習慣在每個屬性值後面加壹個加號。雖然規則允許最後壹個屬性值不用分號寫，但是如果要添加新的樣式，很容易忘記加分號而出錯，所以還是都加比較好。最後用閉括號單獨寫壹行。這樣的空格和換行符對閱讀有幫助。
6.使用css縮寫
使用縮寫有助於減小css文件的大小，使其更易於閱讀。常用CSS縮寫的主要規則是:
(1)，顏色
如果每兩個數字的值相同，16系統的顏色值可以減半，例如:
#000000可以縮寫為# 000；#336699可以縮寫為# 369；
(2)、盒子尺寸
通常有以下四種寫法:
屬性:value 1；指示所有邊的值都是1。
屬性:value 1 value 2；top和bottom的值是value1，right和left的值是value2。
屬性:value 1 value 2 value 3；top的值是value1，right和left的值是value2，bottom的值是value3。
屬性:value 1 value 2 value 3 value 4；四個值依次代表上、右、下、左。
方便的記憶法是順時針，右上，左下。邊距和填充的具體應用示例如下:
保證金:1em 0 2em 0.5 em；
(3)邊界
邊框的屬性如下:
邊框寬度:1px；
邊框樣式:純色；
邊框顏色:# 000；
可以縮寫成壹句話:border:1px solid # 000；
語法是:邊框:寬度樣式顏色；
⑷背景
背景的屬性如下:
背景色:# f00
背景-圖片:URL(background . gif)；
背景-重復:不重復；
背景-附件:固定；
背景-位置:0 0；
可以縮寫成壹句話:background:# f 00 URL(background . gif)no-repeat fixed 00；
語法是:背景:彩色圖像重復附著位置；
您可以省略壹個或多個屬性值。如果省略，屬性值將使用瀏覽器默認值，即:
顏色:透明
圖片:無
重復:重復
附件:卷軸
位置:0% 0%
(5)字體
字體的屬性如下:
字體樣式:斜體；
字體變體:小型大寫字母；
字體粗細:粗體；
字體大小:1em；
行高:140%；
字體系列:“Lucida Grande”，無襯線；
可以縮寫成壹句話:字體:斜體小楷粗體1em/140%“lucida grande”，無襯線；
提示:如果縮寫字體定義，必須至少定義兩個值:字體大小和字體系列。
(6)列表
通過編寫list-style:none取消默認的點和序列號；
該列表的屬性如下:
列表-樣式-類型:方形；
列表-樣式-位置:內部；
list-style-image:URL(image . gif)；
可以縮寫成壹句話:list-style:URL裏面的正方形(image . gif)；
7.定義了多個CSS樣式，並在屬性中加入了重復最後壹個優先級的原則。
壹個標記可以同時定義多個類，也可以在同壹個類中重復定義，例如:
讓我們先定義兩種風格:
。壹個{寬度:200px背景:url(/1.jpg)不重復左上；}
。兩個{ border:10px solid # 000；背景:url(/2.jpg)不重復左上；}
在頁面代碼中，我們可以這樣稱呼它:
& ltdiv class = " one " two & gt& lt/div & gt；
所以最後的顯示效果就是這個div風格是什麽？哪個是重復的？
& ltdiv class = " one " two & gt& lt/div & gt；應用於的樣式如下:
寬度:200px
邊框:10px實心# 000；
背景:url(/2.jpg)不重復左上；
因為，當應用兩種或兩種以上的樣式時，瀏覽器應用的樣式是基於屬性添加和重復最後優先的原則。
也就是說定義了兩個或兩個以上或者重復的樣式名，瀏覽器應用的樣式是有順序的。如果定義了重復的屬性值，則以最後壹個屬性值為準。如果應用了兩個或兩個以上的樣式名，則追加不重復的屬性值，以重復的屬性值為準。
這裏需要註意的是，樣式的順序不是基於頁面上應用的名稱的順序，而是基於樣式表中樣式的順序。
8.導入和隱藏CSS。
因為舊的瀏覽器不支持CSS，所以通常的做法是使用@import技術來隱藏CSS，例如:
@導入URL(main . CSS)；
不過這個方法對IE4沒用，讓我頭疼了壹段時間。後來，我是這樣寫的:
@ import main.css
所以妳也可以在IE裏面隱藏CSS，呵呵，省5個字節！
9、CSS黑客
有時候，妳需要為IE瀏覽器中的bug定義壹些特殊的規則。這裏有太多的CSS技巧，我只使用其中的兩個。無論微軟在即將發布的IE版本中是否更好地支持CSS，這兩種方法都是最安全的。
(1)，標註方法
壹、在IE中隱藏壹個CSS定義，可以使用子選擇器:
html & gt正文p {
}
b、以下寫法只有IE瀏覽器看得懂(對其他瀏覽器隱藏)
* html p {
}
C.有時候，妳希望IE/Win有效，IE/Mac隱藏。您可以使用反斜杠技術:
* html p {
聲明
}
d、下面的寫法只有IE7瀏覽器看得懂(其他瀏覽器看不懂)。
*+ html p {
}
(2)條件註釋法。
另壹種方法，我認為比CSS Hacks更易測試，就是采用微軟的私有屬性條件註釋。這樣就可以在不影響主樣式表定義的情況下，獨立為IE定義壹些樣式，就像這樣:
& lt！-[if IE]& gt；
& ltlink rel = style sheet/CSS href = "/style/ie . CSS "/& gt；
& lt！[endif]-& gt；
您可以在網上找到更多CSS黑客，但是許多黑客並不符合w3c標準。基於上面的hacks，寫了壹個可以區分IE6，IE7，FF的風格，而且可以符合w3c標準。代碼如下:
。classname {width:90px！重要；寬度:100 px；}
*+html。classname {width:95px！重要；}
這樣寫完之後，寬度在IE6下是100px，IE7下是95px，Firefox下是90px。
10，明確定義單位，除非值為0。
忘記定義大小的單位是初學CSS的人常犯的錯誤。在HTML中，可以只寫width=100，但是在CSS中，必須給出壹個準確的單位，比如:width:100 px width:100 em。
只有兩種例外情況不能定義單位:行高和值為0。此外，所有其他值必須由單位跟隨。註意不要在數值和單位之間加空格。
11，區分大小寫
當在XHTML中使用CSS時，CSS中定義的元素名稱是區分大小寫的。為了避免這個錯誤，建議所有的定義名都小寫。
在HTML和XHTML中，class和id的值也區分大小寫。如果您必須混合大小寫，請確保您在CSS中的定義與XHTML中的標記壹致。
12，id和class的使用和區別
我們知道，當樣式表定義壹個樣式時，它可以定義壹個id或壹個類，例如:
ID方法:#test{color:#333333}，調用
類方法:。測試{color:#333333}，致電
壹般來說，id是壹個只能使用壹次的頁面，class可以多次引用。
但是我在頁面中使用了多個相同的id，在IE中顯示是正常的。ID和階級好像沒什麽區別。使用多個相同的id會有什麽影響？
頁面上有多個相同的id，但是無法通過W3驗證。在頁面顯示上，現在的瀏覽器還是允許妳犯這個錯誤的，用多個相同的id也能正常顯示。但是，當妳需要使用JavaScript通過ID來控制這個div時，就會出現錯誤。
Id是用來區分不同結構和內容的標簽，就像妳的名字壹樣。如果壹個房間裏有兩個同名同姓的人，就會產生混淆。
類是壹種風格，可以穿在任何結構和內容上，就像壹件衣服。
從概念上講:id是先找到結構/內容，再為其定義風格；類首先定義壹個樣式，然後將其設置為多個結構/內容。
對此，我建議在編寫XHTML+CSS時，如果是維度壹的結構化定位，就用id，否則就用class(這樣非結構化定位的div塊的id就可以由程序員自己定義和使用了)！
13.取消類和id前的元素限定。
當您為元素編寫class或id的定義時，可以省略前面的元素定義，因為ID在壹個頁面中是唯壹的，而class可以在壹個頁面中多次使用。在妳看來，定義壹個元素是沒有意義的，比如:
Div#id1{}可以寫成#id1{}
這樣可以節省壹些字節。
14，使用後代選擇器。
使用子選擇器是影響其效率的原因之壹。子選擇器可以幫助妳保存大量的類定義。讓我們看看下面的代碼:
& ltdiv & gt
& ltul & gt
& lt李class="subnavitem " >& lta href = "/SEO/# " class = " subnavitem " & gt。SEO & lt/a & gt；& lt/李& gt& gt
& ltli class="subnavitemselected " >& lta href = "/SEO/# " class = " subnavitemselected " & gt。SEO & lt/a & gt；& lt/李& gt
& lt李class="subnavitem " >& lta href = "/SEO/# " class = " subnavitem " & gt。SEO & lt/a & gt；& lt/李& gt
& lt/ul & gt；
& lt/div & gt；
這段代碼的CSS定義是:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div # subnav ul Li . subnavitem a . subnavitem { }
div # subnav ul Li . subnavitem selected { }
div # subnav ul Li . subnavitem selected a . subnavitem selected { }
您可以用以下方法替換上述代碼:
& ltul id = " subnav " & gt
& lt李& gt& lta href = "/SEO/# " & gt；SEO & lt/a & gt；& lt/李& gt
& lt李class="sel " >& lta href = "/SEO/# " & gt；SEO & lt/a & gt；& lt/李& gt
& lt李& gt& lta href = "/SEO/# " & gt；SEO & lt/a & gt；& lt/李& gt
& lt/ul & gt；
風格定義是:
#subnav { }
#subnav li { }
#subnav a { }
#subnav。選擇{ }
#subnav。出售{ }
使用子選擇器可以讓妳的代碼和CSS更加簡潔易讀。
如果壹個容器中有多個相同的元素，並且這些元素的樣式都不同，請避免使用這種方法，這樣每個人都可以采用不同的類，例如:
& ltul class="one " >& lt李& gt& lt/李& gt& lt/ul & gt；
& ltul class="tow " >& lt李& gt& lt/李& gt& lt/ul & gt；
15.不需要引用背景圖像路徑。
為了節省字節，建議不要引用背景圖像路徑，因為引號不是必須的，例如:
背景-圖像:url(圖像
邊距:0自動；
}
但是IE5/Win無法正確顯示這個定義。我們使用壹個非常有用的技術來解決這個問題:使用text-align屬性，就像這樣:
正文{
文本對齊:居中；
}
#換行{
寬度:760px
邊距:0自動；
文本對齊:左對齊；
}
Text-align:第壹個正文的中心；規則定義IE5/Win中body所有元素居中(其他瀏覽器只是文本居中)，第二個text-align:left；是將#warp中的文本留在左邊。
16，層所占的空間
當調試CSS出錯時，妳必須像排版工人壹樣逐行分析CSS代碼。我壹般會在故障圖層上定義壹個背景色，這樣就可以清楚的看到圖層占了多少空間。
有人建議用border，壹般可以接受，但問題是有時候border會增加元素的大小，border-top和boeder-bottom會破壞垂直邊距的值，所以用background更安全(更多介紹，