更新時(shí)間:2021-04-20 來(lái)源:黑馬程序員 瀏覽量:
在開(kāi)發(fā)中,為了確保不同瀏覽器的默認(rèn)樣式統(tǒng)一,通常會(huì)對(duì)樣式進(jìn)行初始化,也就是在頁(yè)面中定義一些初始樣式,用來(lái)覆蓋瀏覽器的默認(rèn)樣式。在移動(dòng)端Web開(kāi)發(fā)中,初始化默認(rèn)樣式推薦使用Normalize.css樣式庫(kù),因?yàn)樗哂腥缦绿攸c(diǎn)。
在熟悉了Normalize.css的特點(diǎn)之后,下面為大家講解如何下載和使用Normalize.css。
1. 下載Normalize.css
在Normalize.css官方網(wǎng)站可以獲取文件的下載,如圖1所示。
圖1 Normalize.css官網(wǎng)
在圖1中,頁(yè)面使用英文展示了Normalize.css的一些信息。我們單擊“Download v8.0.1”按鈕,即可獲取Normalize.css源代碼,如圖2所示。
圖2 Normalize.css源代碼
在圖2所示的頁(yè)面中,單擊鼠標(biāo)右鍵,然后在彈出的菜單中選擇“另存為”,即可將Normalize.css保存到本地。
2. 使用Normalize.css
將Normalize.css文件下載完成之后,就可以使用Normalize.css初始化頁(yè)面的默認(rèn)樣式。為了讓大家更好地學(xué)習(xí)Normalize.css的使用,下面通過(guò)例2-3進(jìn)行演示。
【例2-3】
(1)創(chuàng)建C:\web\chapter02\demo03.html文件,具體代碼如下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>引入Normalize.css</title> <link rel="stylesheet" href="normalize.css"> </head> <body> <div>成功引入Normalize.css</div> </body> </html>
上述代碼中,第7行代碼通過(guò)<link>標(biāo)簽引入normalize.css文件,其中,href屬性的值為normalize.css文件的路徑地址,讀者需要將下載后的normalize.css放在demo03.html的相同目錄下,即C:\web\chapter02。第10行代碼用來(lái)通過(guò)<div>標(biāo)簽在頁(yè)面中顯示“成功引入Normalize.css”的提示信息。
(2)在瀏覽器中打開(kāi)demo03.html文件,運(yùn)行結(jié)果如圖3所示。
圖3 設(shè)置body元素的margin值為0
從圖3可以看出,在引入Normalize.css后,body元素的margin被修改為0,說(shuō)明Normalize.css已經(jīng)引入成功并生效了。
猜你喜歡:
書(shū)寫CSS需要遵循哪些規(guī)則?它的結(jié)構(gòu)有什么特點(diǎn)?