2.三種應(yīng)用css方式:
1)創(chuàng)建外部樣式表:
外部樣式表即創(chuàng)建后綴為css的文件,然后在想要使用的網(wǎng)頁中引入該文件即可。
具體的示例如下:
第一步:創(chuàng)建名為test.css的文件,并寫入以下內(nèi)容:
div {
width: 500px;
height: 500px;
background-color: red;
}
第二步:在html文件中引入該css文件,具體靠link標(biāo)簽實現(xiàn),該標(biāo)簽寫在head標(biāo)簽內(nèi),如下:
第三步:打開html文件,結(jié)果如下:
圖片
link標(biāo)簽:
link標(biāo)簽除去引入css文件外,還有其它的作用,但是文中沒有具體給出。然后,link標(biāo)簽的兩個屬性:
rel="stylesheet" 指明文件格式(stylesheet指的就是css文件)
href = “url” 指明引入css文件的地址
2)創(chuàng)建嵌入式樣式表:
嵌入式樣式表,通過html中的style標(biāo)簽實現(xiàn),里面直接寫入css代碼即可。如下代碼所示:
div{
width:500px;
height:500px;
background-color:red;
}
結(jié)果如下:
圖片
3)創(chuàng)建內(nèi)聯(lián)式樣式:
這個靠的是HTML標(biāo)簽內(nèi)共有的一個屬性style中,如下:
結(jié)果如下:
圖片
可以看出的是,style屬性值中不同的樣式用分號隔開。
4)三者的比較:
首先最為推薦的是外部樣式表,其次是嵌入式樣式。最后才是內(nèi)聯(lián)式的。因為我們一般寫代碼的一個目標(biāo)是實現(xiàn)代碼分離,即HTML代碼和CSS代碼分離,這樣寫的代碼干凈易懂。
5)重要性:
前一個章節(jié)提及了對于某個標(biāo)簽來說,會有多個css樣式,發(fā)生沖突是很常見的。而在其它條件相同的情況下,內(nèi)聯(lián)式是最重要的,因為它最晚出現(xiàn),其它的都出現(xiàn)在head標(biāo)簽內(nèi),而內(nèi)聯(lián)式出現(xiàn)在body標(biāo)簽內(nèi)。
3.使用與媒體相關(guān)的樣式表:
可以指定一個只用于特定輸出的樣式表,如只用于打印,或只用于用瀏覽器在屏幕上查看。
其中,指定方法如下:
使用標(biāo)簽:link標(biāo)簽
使用屬性:media
media屬性的值:print(打印)、screen(屏幕顯示)、all(默認聲明)(當(dāng)然還有其它值,但是這三者是最為常用的)
示例如下:
這段代碼的意思是:當(dāng)我們使用瀏覽器查看網(wǎng)頁的時候,screen.css里面的代碼會發(fā)揮作用,當(dāng)我們打印網(wǎng)頁時候,print.css里面的代碼會發(fā)生作用。
除去上面的使用方法外,還有一種方法,就是在css代碼中使用,如下:
@media print {
div {
width: 100px;
height: 100px;
background-color: pink;
}
}
div {
width: 100px;
height: 200px;
background-color: red;
}
這樣,第一行代碼代表當(dāng)打印的時候起作用的樣式。
4.提供替代的樣式表:
規(guī)范允許設(shè)置一組基本的持久性樣式,一組默認樣式和多組可替代樣式表。你可以這樣理解,你有一個網(wǎng)頁,基本的持久性的樣式就是網(wǎng)頁框架的基本樣式,而一組默認樣式就是我們個人主頁的基本樣式,我們想要調(diào)整樣式,就是使用了可替代的樣式表。
如下代碼所示:
其中,rel="alternate"代表著這個樣式就是可替代的樣式表。
老實說,我覺得這不就是多寫幾個css文件嘛,只是用處不同而已^_^。