如何下載和使用Normalize.css?

千鋒武漢發表於2021-05-10

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

  保留有用的瀏覽器預設樣式,而不是完全去掉它們。

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

  採用模組化開發,方便後期維護。

  擁有詳細的文件。

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

  1. 下載Normalize.css

  在Normalize.css官方網站可以獲取檔案的下載,如圖1所示。

1

Normalize.css官網

  在圖1中,頁面使用英文展示了Normalize.css的一些資訊。我們單擊“Download v8.0.1”按鈕,即可獲取Normalize.css原始碼,如圖2所示。

2

Normalize.css原始碼

  在圖2所示的頁面中,單擊滑鼠右鍵,然後在彈出的選單中選擇“另存為”,即可將Normalize.css儲存到本地。

  2. 使用Normalize.css

  將Normalize.css檔案下載完成之後,就可以使用Normalize.css初始化頁面的預設樣式。為了讓大家更好地學習Normalize.css的使用,下面透過例2-3進行演示。

  【例2-3】

  (1)建立C:\web\chapter02\demo03.html檔案,具體程式碼如下。

  成功引入Normalize.css

  上述程式碼中,第7行程式碼透過標籤引入normalize.css檔案,其中,href屬性的值為normalize.css檔案的路徑地址,讀者需要將下載後的normalize.css放在demo03.html的相同目錄下,即C:\web\chapter02。第10行程式碼用來透過

  標籤在頁面中顯示“成功引入Normalize.css”的提示資訊。

  (2)在瀏覽器中開啟demo03.html檔案,執行結果如圖3所示。

1607566971023_3

設定body元素的margin值為0


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2771499/,如需轉載,請註明出處,否則將追究法律責任。

相關文章