編碼的世界 / 優質文選 / 生涯

HTML中嵌入CSS的四種方式及優先級、如何選擇內嵌式和鏈接式


2021年11月20日
-   

在HTML中嵌入CSS樣式有四種方式:
1、行內樣式
這個方式是直接在HTML的標簽中插入 style="屬性:屬性值;" 這個屬性
這是最簡單的一種插入方式,所以這個插入方式看上去很low
行內樣式的缺點主要有兩個:
一、w3c標准是:內容、樣式、行為三者分開,這個嵌入方式不符合W3C規範,並且代碼亂,不好維護
二、代碼冗餘,相同的style得寫多次,不可複用
   2、內嵌式
在html中的head中插入style標簽 在<style type="text/css"></style>中間寫CSS代碼
這個方式解決了同一頁面多個標簽需要寫多分style屬性的問題
但是內嵌式無法實現在多個html都要使用這個css樣式的功能
3、連接式
在html的head中插入<link rel="stylesheet" href="css文件路徑" type="text/css">
href中的是要插入的樣式的css文件
通過連接式解決了多個html使用一個css樣式的問題
4、導入式
head中插入style標簽
<style type="text/css">
@import url=("css路徑名");
</style>
導入式一般不用
四種插入方式的優先級
若四種方式同時使用,那麼他們都會生效果;
若碰到相同的屬性,且都修改了同樣屬性,後定義的生效;
若內嵌與導入式放到一起,始終是內嵌式起作用;
如何選擇使用內嵌式還是鏈接式
內嵌式雖然沒有解決多個html頁面服用一個css樣式的問題 但是瀏覽器在加載的時候只需要加載這一個css樣式,速度比較快
而鏈接式,若一個html頁面用多個css樣式,那麼在瀏覽器加載的時候每個css文件都得單獨下載,速度相對內嵌式比較慢
根據實際情況考慮,若追求的是速度,對代碼複用問題不較真,推薦使用內嵌式
      若追求的是代碼的可服用,那麼就得舍棄一點速度,來使用鏈接式來嵌入CSS樣式。

熱門文章