如何下載和使用Normalize.css?
在開發中,為了確保不同瀏覽器的預設樣式統一,通常會對樣式進行初始化,也就是在頁面中定義一些初始樣式,用來覆蓋瀏覽器的預設樣式。在移動端Web開發中,初始化預設樣式推薦使用Normalize.css樣式庫,因為它具有如下特點。
保留有用的瀏覽器預設樣式,而不是完全去掉它們。
保證各瀏覽器樣式的一致性。
採用模組化開發,方便後期維護。
擁有詳細的文件。
在熟悉了Normalize.css的特點之後,下面為大家講解如何下載和使用Normalize.css。
1. 下載Normalize.css
在Normalize.css官方網站可以獲取檔案的下載,如圖1所示。
Normalize.css官網
在圖1中,頁面使用英文展示了Normalize.css的一些資訊。我們單擊“Download v8.0.1”按鈕,即可獲取Normalize.css原始碼,如圖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所示。
設定body元素的margin值為0
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2771499/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 如何評價Normalize.cssORMCSS
- 如何下載和安裝opatch
- 使用OkHttp和Java來下載HTTPJava
- ftp下載工具,ftp下載工具哪個好用,如何使用?FTP
- 如何使用curl命令下載檔案
- 使用 Requests 庫和 PHP 的下載PHP
- 如何在命令列下使用 BitTorrent 下載 ISO 映象命令列
- 如何在命令列中使用 ftp 命令上傳和下載檔案命令列FTP
- 如何使用post請求下載檔案
- 使用RoboBrowser和Python下載音訊Python音訊
- Spring 的下載、安裝和使用Spring
- 1:(C#下使用GDAL庫)下載和引用方法C#
- 如何下載安裝jdk和配置環境JDK
- 如何下載Eclipse和編寫Hallow worldEclipse
- 如何使用ScrapySharp下載網頁內容網頁
- mac使用者如何下載YouTube視訊?Mac
- postgresql如何下載SQL
- 效能測試工具Lmbench的使用和下載
- 使用osscsdk自定義上傳和下載callback
- cacti使用官方下載的指令碼和模板指令碼
- mac下iterm2使用rz和sz上傳下載Mac
- SiteSucker pro如何使用服務選單和本地HTML檔案下載站點?HTML
- Yarn 的Application 的依賴檔案和包是如何上傳下載和使用的YarnAPP
- 如何使用git下載別人在github的程式碼?Github
- (連載)Android 8.0 : 如何下載和閱讀Android原始碼Android原始碼
- C#如何使用HttpClient對大檔案進行斷點上傳和下載C#HTTPclient斷點
- 菜鳥自學之——SRA Toolkit 的下載和使用
- 小Q書桌的下載、安裝和使用
- Linux下載jdk ,Linux如何下載jdkLinuxJDK
- 在 Ubuntu 裡如何下載、安裝和配置 Plank DockUbuntu
- Linux中如何使用Aria2下載檔案Linux
- AWS RDS上如何使用mysqlbinlog命令下載binlogMySql
- rdo軟體下載,rdo軟體下載方式,如何使用伺服器管理工具伺服器
- 使用treq庫下載
- 使用docker和nginx搭建一個下載伺服器DockerNginx伺服器
- 使用crul庫和R語言的下載器程式R語言
- Bert下載和使用(以bert-base-uncased為例)
- Ubuntu下如何檢視GPU版本和使用資訊?UbuntuGPU