如何下載和使用Normalize.css？【移動web頁面開發(fā)】

更新時間:2021-04-20 來源:黑馬程序員瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

在開發(fā)中，為了確保不同瀏覽器的默認樣式統(tǒng)一，通常會對樣式進行初始化，也就是在頁面中定義一些初始樣式，用來覆蓋瀏覽器的默認樣式。在移動端Web開發(fā)中，初始化默認樣式推薦使用Normalize.css樣式庫，因為它具有如下特點。

保留有用的瀏覽器默認樣式，而不是完全去掉它們。保證各瀏覽器樣式的一致性。采用模塊化開發(fā)，方便后期維護。擁有詳細的文檔。

在熟悉了Normalize.css的特點之后，下面為大家講解如何下載和使用Normalize.css。

1. 下載Normalize.css

在Normalize.css官方網(wǎng)站可以獲取文件的下載，如圖1所示。

Normalize.css初始化

圖1 Normalize.css官網(wǎng)

在圖1中，頁面使用英文展示了Normalize.css的一些信息。我們單擊“Download v8.0.1”按鈕，即可獲取Normalize.css源代碼，如圖2所示。

Normalize.css初始化

圖2 Normalize.css源代碼

在圖2所示的頁面中，單擊鼠標右鍵，然后在彈出的菜單中選擇“另存為”，即可將Normalize.css保存到本地。

2. 使用Normalize.css

將Normalize.css文件下載完成之后，就可以使用Normalize.css初始化頁面的默認樣式。為了讓大家更好地學習Normalize.css的使用，下面通過例2-3進行演示。

【例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>標簽引入normalize.css文件，其中，href屬性的值為normalize.css文件的路徑地址，讀者需要將下載后的normalize.css放在demo03.html的相同目錄下，即C:\web\chapter02。第10行代碼用來通過<div>標簽在頁面中顯示“成功引入Normalize.css”的提示信息。

（2）在瀏覽器中打開demo03.html文件，運行結果如圖3所示。

Normalize.css初始化