一 CSS的基本類型

1 CSS

1.1 css指層疊樣式表（Cascading Style Sheets）

1.2 樣式定義如何顯示HTML元素

1.3 樣式通常存儲在樣式表中

1.4 把樣式添加到HTML 4.0中，是為了解決內容與表現分離的問題

1.5 外部樣式表可以極大提高工作效率

1.6 外部樣式表通常存儲在CSS文件中

1.7 多個樣式定義可層疊為一個

2 Main Topic

2.1 重新定義HTML樣式

重新定義HTML樣式為設計師重新定義已有的HTML標簽樣式，影響全部的被設定標簽樣式，用於統一網頁中某一標簽的樣式定義

樣式名"HTML標簽" 例:hr {border:1px dotted #333333}

2.2 鏈接狀態樣式

鏈接狀態樣式為設計師對鏈接不同狀態設定特殊樣式，影響被使用本樣式區域中的鏈接

a.nav:link（中間無空格）、.nav a:link第一種只能修飾<a>標簽中

第二種可以修飾所有包含有<a>標簽的其它標簽

2.3 自定義樣式

樣式為設計師自定義的新CSS樣式，影響被使用的區域，用於完成網頁中局部的樣式設定

樣式名"."+"相應樣式效果描述的單詞或縮寫" 例:".shadow"

文字樣式樣式名".no"+"字號"+"行距"+"顏色縮寫" 例:".no12"、".no12_24"

二 Class與ID的使用規範

1 區別

ID在一個頁面中有且只能有一個，所以使用ID表示的CSS樣式只能表示一個元素的樣式

Class在一個頁面中可以有多個，也就是說定義一個CSS樣式後，可以有多個元素引用這個Class

2 書寫方式

ID的書寫樣式: #title{font-size:18px; color:#333;}

Class書寫方式: .title{font-size:18px; color:#333;}

3 命名註意

3.1 註意

大的框架命名如：header/footer/wrapper/left/right之類的由設計框架之人統一命名，其他樣式名稱由小寫英文&數字&來組合命名，避免使用中文拼音，盡量使用簡易的單詞組合，總之命名要語義化、簡明化

3.2 避免命名重復

註意1

通過從屬寫法規避<div id="mainnav"><div class="firstnav">...</div></div>,

樣式寫法：#mainnav.firstnav{......}

註意2

規避class與id重名，不建議使用id選擇器

註意3

重復使用率高的命名，可加代號加下劃線起始，比如title_news;

註意4

取父級元素id/class命名部分命名，例如：<div id="mainnav"><div class="main firstnav">...</div></div>

Web前端2