Normalize.樣式庫的特點(diǎn)，如何下載和使用Normalize.css？

　　在開發(fā)中，為了確保不同瀏覽器的默認(rèn)樣式統(tǒng)一，通常會(huì)對樣式進(jìn)行初始化，也就是在頁面中定義一些初始樣式，用來覆蓋瀏覽器的默認(rèn)樣式。在移動(dòng)端Web開發(fā)中，初始化默認(rèn)樣式推薦使用Normalize.css樣式庫，因?yàn)樗哂腥缦绿攸c(diǎn)。

　　保留有用的瀏覽器默認(rèn)樣式，而不是完全去掉它們。

　　保證各瀏覽器樣式的一致性。

　　采用模塊化開發(fā)，方便后期維護(hù)。

　　擁有詳細(xì)的文檔。

　　在熟悉了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文件，具體代碼如下。

　　成功引入Normalize.css

　　上述代碼中，第7行代碼通過標(biāo)簽引入normalize.css文件，其中，href屬性的值為normalize.css文件的路徑地址，讀者需要將下載后的normalize.css放在demo03.html的相同目錄下，即C:\web\chapter02。第10行代碼用來通過

　　標(biāo)簽在頁面中顯示“成功引入Normalize.css”的提示信息。

　　(2)在瀏覽器中打開demo03.html文件，運(yùn)行結(jié)果如圖3所示。

　　　圖3 設(shè)置body元素的margin值為0

猜你喜歡：

Dreamweaver操作界面和常用功能介紹【web前端文章】

網(wǎng)頁設(shè)計(jì)中移動(dòng)端設(shè)備的屏幕尺寸【前端文章】

黑馬程序員web前端培訓(xùn)課程 

傳智播客web前端培訓(xùn)課程