css
css:層疊樣式表;將網頁中的樣式分離出來,完全由css來控制,增強了樣式的複用性以及可擴展性。
格式:選擇器{屬性名:屬性值;屬性名:屬性值…}
css和html代碼相結合的四種方式:
1、每一個html標籤都有一個style屬性;
2、當頁面有多個標籤有相同樣式時,可以進行復用。
<style>
css代碼
</style>
3、當有多個頁面中的標籤的樣式相同時,還可以將樣式單獨封裝成一個css文件。
通過在每個頁面中定義
<style>
@import url(“1.css”)
</style>
4、通過html中head標籤中的link標籤連接一個css文件。
<link rel=”stylesheet” href=”1.css”/>
技巧:爲了提高相同樣式的複用性以及可擴展性,可以將多個標籤樣式進行單獨定義,並封裝成css文件。
p.css,div.css…
在一個css文件中使用css的import將多個標籤樣式文件導入,然後在html頁面上,使用link標籤導入這個總的css文件即可。
1.css
@import url(“p.css”)
@import url(“div.css”)
<link rel=”stylesheet” href=”1.css”/>
選擇器:其實就是樣式要作用的標籤容器。
當樣式分離後,html作用在於用標籤封裝數據,然後將css加載到指定標籤上。
選擇器的基本分類:
1、標籤選擇器:其實就是html中的每一個標籤名。
2、類選擇器;其實就是每一個標籤中的class屬性,用.的形式表示。只用來給css所使用,可以對不同標籤進行相同樣式設定。
3、ID選擇器:其實就是每一個標籤中的ID屬性,但是要保證ID唯一性。用#來標識。ID不僅僅被css所使用,還可以被javascript所使用。
選擇器的優先級:ID>class>標籤
擴展選擇器:
1、關聯選擇器:其實就是對標籤中的標籤進行樣式定義, 選擇器 選擇器…
2、組合選擇器:對多個選擇器進行相同樣式定義,將多個選擇器通過,隔開的形式。
3、僞元素選擇器:其實就是元素的一種狀態。
a:link :超鏈接點擊前狀態;
a:visited:超鏈接點擊後狀態;
a:hover:懸停在超鏈接上的狀態;
a:active:點擊超鏈接時的狀態;
在定義這些狀態時,有一個順序:LVHA
p:first-letter
p:first-line
:focus:IE6不支持,但FF支持。
css濾鏡:其實就是一些代碼完成豐富了樣式。
當使用到css更多的屬性時,還需要查閱css的API。