Web前端2
一 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