更新時間:2021-04-20 來源:黑馬程序員 瀏覽量:
在開發(fā)中,為了確保不同瀏覽器的默認(rèn)樣式統(tǒng)一,通常會對樣式進(jìn)行初始化,也就是在頁面中定義一些初始樣式,用來覆蓋瀏覽器的默認(rèn)樣式。在移動端Web開發(fā)中,初始化默認(rèn)樣式推薦使用Normalize.css樣式庫,因?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中,頁面使用英文展示了Normalize.css的一些信息。我們單擊“Download v8.0.1”按鈕,即可獲取Normalize.css源代碼,如圖2所示。
圖2 Normalize.css源代碼
在圖2所示的頁面中,單擊鼠標(biāo)右鍵,然后在彈出的菜單中選擇“另存為”,即可將Normalize.css保存到本地。
2. 使用Normalize.css
將Normalize.css文件下載完成之后,就可以使用Normalize.css初始化頁面的默認(rèn)樣式。為了讓大家更好地學(xué)習(xí)Normalize.css的使用,下面通過例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行代碼通過<link>標(biāo)簽引入normalize.css文件,其中,href屬性的值為normalize.css文件的路徑地址,讀者需要將下載后的normalize.css放在demo03.html的相同目錄下,即C:\web\chapter02。第10行代碼用來通過<div>標(biāo)簽在頁面中顯示“成功引入Normalize.css”的提示信息。
(2)在瀏覽器中打開demo03.html文件,運(yùn)行結(jié)果如圖3所示。
圖3 設(shè)置body元素的margin值為0
從圖3可以看出,在引入Normalize.css后,body元素的margin被修改為0,說明Normalize.css已經(jīng)引入成功并生效了。
猜你喜歡: