HTML實戰一:初始化css代碼,為什么以及怎樣做?

  • 時間:2018-12-27 23:06 作者:恒創信息 來源:恒創信息 閱讀:271
  • 掃一掃,手機訪問
摘要:之前的文章我們詳情了很多關于html以及css的基礎內容,從本篇文章開始我們要進行實戰訓練,我們實戰第一篇文章要詳情的就是初始化我們的css代碼;1)為什么要初始化css代碼首先是由于瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,假如沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。其次
HTML實戰一:初始化css代碼,為什么以及怎樣做?

之前的文章我們詳情了很多關于html以及css的基礎內容,從本篇文章開始我們要進行實戰訓練,我們實戰第一篇文章要詳情的就是初始化我們的css代碼;

1)為什么要初始化css代碼

首先是由于瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,假如沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

其次初始化CSS樣式可以提高編碼質量,保持代碼的統一性,假如不初始化整個頁面做完很糟糕,重復的CSS樣式很多。去掉標簽的默認樣式如:margin,padding,其余瀏覽器默認解析字體大小,字體設置。

我們這里寫一個ul標簽以及a標簽,來看一下默認在網頁中的顯示效果;

HTML實戰一:初始化css代碼,為什么以及怎樣做?

從上圖我們可以看出a標簽以及ul標簽都有默認的樣式效果,而且ul距離左側有一段的空隙,假如我們不定義初始化效果的話每次都要進行單獨的修改,這樣會添加代碼的重復度。

2)我們要怎樣去做?

1、最簡單的初始化css代碼的方式是使用通配符(*),重置所有的初始樣式。具體的css代碼如下所示:

HTML實戰一:初始化css代碼,為什么以及怎樣做?

但是我們不建議這么書寫:由于 *(星號)代表通配符表示了所有的標簽,編寫代碼的時候也非?,但是這樣寫有一個弊端,就是在網站比較大時,CSS樣式文件也很大,這樣寫時,它會把所有的標簽都初始化一遍,這樣會加大網站運行的負荷,會讓網站加載的時候需要很長一段時間。

2、初始化代碼盡管個人習慣各有差異,但是大同小異,我們可以借鑒大公司的代碼來直接使用就可。下面給大家列舉下騰訊和淘寶的初始化代碼僅供參考,后期可以根據個人習慣進行刪減就可。

淘寶的初始化代碼如下所示:

HTML實戰一:初始化css代碼,為什么以及怎樣做?

騰訊的初始化代碼如下所示:

HTML實戰一:初始化css代碼,為什么以及怎樣做?

好了,本篇文章就給大家說到這里,大家自己下來可以自己模擬一下,找到適合自己使用的初始化代碼。

每日金句:你20歲時偷過的“懶”,就是你30歲時會掉進去的“坑”。喜歡我的文章的小伙伴記得關注一下哦,每天將為你升級最新知識。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|服務器應用】Discuz隱藏后臺admin.php網址修改路徑(2019-12-15 14:52)
【系統環境|服務器應用】Discuz發布帖子時默認顯示第一個主題分類的修改方法(2019-12-09 00:13)
【系統環境|軟件環境】Android | App內存優化 之 內存泄漏 要點概述 以及 處理實戰(2019-12-04 14:27)
【系統環境|軟件環境】MySQL InnoDB 事務(2019-12-04 14:26)
【系統環境|軟件環境】vue-router(單頁面應用控制中心)常見用法(2019-12-04 14:26)
【系統環境|軟件環境】Linux中的Kill命令(2019-12-04 14:26)
【系統環境|軟件環境】Linux 入門時必學60個文件解決命令(2019-12-04 14:26)
【系統環境|軟件環境】更新版ThreeJS 3D粒子波浪動畫(2019-12-04 14:26)
【系統環境|軟件環境】前臺開發WebStorm常用快捷鍵,火速收藏!(2019-12-04 14:25)
【系統環境|軟件環境】微博H5登錄和發微博組件(2019-12-04 14:25)
手機二維碼手機訪問領取大禮包
返回頂部
3d开机号查询