層疊樣式表單CSS(Cascading Style Sheets),簡稱樣式表。
CSS主要的優點:
1.通過單個樣式表控制多個文檔的佈局
2.更精確的佈局控制
3.爲不同的媒體媒體類型採取不同的佈局
CSS語句的格式:
1.選擇符:通常是用戶希望定義的HTML元素或標籤或者是屬性,並且每個屬性都有一個值。屬性和值被冒號分開,並由花括號包圍。
如:b{color:blue}a是選擇符,花括號是聲明,聲明一次由2部分構成:屬性color和值green.
需要注意的問題:
a.當屬性的值遇到多個單詞時候,值必須加上引號。
b.如果需要對一個選擇符指定多個屬性時,使用分號隔開
c.用/*註釋內容0*/
d.樣式的繼承:嵌套在HTML標籤中HTML標籤,都會自動繼承外層標籤設置的樣式規則。
CSS選擇符:
1.HTML選擇符:以html標籤作爲選擇符
如:p{font-size:12;color:blue}
h1{text-align:right;color:blue}
包含選擇符是指用空格隔開的兩個或多個單一選擇符組成的字符串。
如:div p{color:blue;font-size:15}
*包含選擇符的優先權比單一選擇符優先權高
2.CLASS選擇符:使用HTML標籤的class屬性設置值的選擇符,有2種:關聯class選擇符和獨立class選擇符,以一個點號定義。
a.關聯選擇符:可以爲同一個元素定義不同的樣式
如:
p.warning{color:red}
p.normal{color:blue}
<p class="warning">這是warning</p>
<p class="normal">這是normal</p>
b.獨立選擇符:可以爲不同的元素定義相同的樣式
3.ID選擇符:定義一個特定的html標籤,一個網頁只能有一個標籤使用某一個ID屬性值,用“#”來定義
如:
<style type="text/css">
#title{text-align:right;color:blue}
</style>
<div id="title">hello</div>
IDselector只能爲單個的html標籤設置樣式,因此具有一定的侷限性,但是ID屬性在javaScript得到廣泛的應用。
優先級:id>class>html
css設置方式:
1.內聯樣式:靈活,簡單方便
2.嵌入樣式:一個樣式可以在一個頁面多次應用
3.外部樣式:需要有一個外部的樣式文件.css,可以爲多個網頁所共同引用,即減少代碼,又可以做到統一頁面風格
僞元素選擇符:是指爲一個html元素的各種狀態和部分內容定義樣式的一種方式。
如:a:hover{color:blue}鼠標點到哪里哪里就發生變化。
四種超鏈接標籤的僞元素的含義
1.a:active 表示超鏈接選中的狀態
2.a:hover 表示鼠標移動到超鏈接上的狀態
3.a:link 表示超鏈接的正常狀態
4.a:visited 訪問過的超鏈接的狀態
我們一般用CSS僞元素與CSS類配合使用。