今天聊點乾貨—關於CSS樣式來源

_Fatman發表於2021-01-27
CSS

樣式來源

CSS樣式共有5個來源，它們分別是\(\color{#FF3030}{瀏覽器預設樣式}\)、\(\color{#FF3030}{使用者樣式}\)、\(\color{#FF3030}{連結樣式}\)(位於單獨的css檔案中，通過link元素的src屬性連結到html文件中)、\(\color{#FF3030}{嵌入樣式}\)(位於style元素中)、\(\color{#FF3030}{行內樣式}\)(位於要作用元素[1]的style屬性中)。

注意：嵌入樣式是位於style元素中,行內樣式是位於要作用元素的style屬性中。

瀏覽器預設樣式

正常情況下，就算我們不給HTML文件新增任何樣式,瀏覽器也能成功渲染出font-style為italic(斜體)的em元素和font-weight為bold(粗體)的strong元素，這便是瀏覽器預設樣式的效果。

<em>em</em>
<strong>strong</strong>

em元素和strong元素顯示效果

不給HTML文件新增任何樣式的em元素和strong元素的圖片

em元素樣式

font-style為italic(斜體)的em元素的圖片

strong元素樣式

font-weight為bold(粗體)的strong元素
這裡有兩篇瀏覽器預設樣式彙總的文章 瀏覽器預設樣式彙總 、User Agent Style Sheets: Basics and Samples。

這是我從User Agent Style Sheets: Basics and Samples > Chrome (latest) 中找出的關於em元素和strong元素的 user agent stylesheet :

user agent stylesheet中em元素樣式

user agent stylesheet中em元素樣式的圖片

user agent stylesheet中strong元素樣式

user agent stylesheet中em元素樣式的圖片

使用者樣式

這個可能是5種樣式來源種接觸最少的一個了,由於篇幅有限，這裡只舉兩個例子。

Chrome中使用者樣式的修改

關於Chrome修改使用者樣式，我用百度和google都搜尋過很久，其中討論的最多的便是關於C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css的修改方案，但是這個修改方案在我的win10和win7的Chrome(85.0.4183.83（正式版本） （64 位）)上都沒有生效，於是我在此使用User CSS外掛進行修改的方法。

注意，User CSS外掛並不會對file協議檔案起作用，可以先使用npx http-server開啟一個本地伺服器，再使用http協議進行訪問。

如圖：

使用User CSS外掛對em元素樣式進行修改
使用User CSS外掛對em元素樣式進行修改,使其font-weight屬性與strong元素達成一致。

FireFox中使用者樣式的修改

關於FireFox修改使用者樣式:
第一步：在地址框輸入about:support;
第二步：找到配置資料夾，點選右側的開啟資料夾;
第三步：新建chrome[2]資料夾，在其中建立userChrome.css和userContent.css檔案並加入需要的樣式;
(如果Firefox的版本在69+之前，跳過第四和第五步)
第四步：在地址框輸入about:config,回車,選擇接受風險並繼續;
第五步：搜尋toolkit.legacyUserProfileCustomizations.stylesheets並置為true;
第六步：重啟Firefox;

圖1：

尋找配置路徑的指示圖片
圖2：
新建chrome資料夾，在其中建立userChrome.css和userContent.css檔案的指示圖片
圖3：
搜尋toolkit.legacyUserProfileCustomizations.stylesheets並置為true的指示圖片

補充說明

關於兩種使用者樣式的修改存在一個差異點，Firefox的修改是不會對嵌入樣式進行覆蓋的，但是在Chrome中使用User CSS外掛會覆蓋嵌入樣式。

在userChrome.css和userContent.css檔案加入下面樣式：

em {
 font-weight: bold;
}

使用npx http-server開啟本地伺服器開啟test.html檔案，檔案內容如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>test</title>        
        <style type="text/css">
            em {
                font-weight: normal;
            }
        </style>
    </head>
    <body>
        <em>em</em>
        <br>
        <strong>strong</strong>
    </body>
</html>

效果如圖：

效果圖

從圖中我們可以明顯的看出嵌入樣式覆蓋了userContent.css檔案中的樣式。

而當我們使用同一個test.html檔案時，用User CSS外掛對em元素的樣式進行修改：

em {
 font-weight: bold;
}

最終我們可以發現User CSS外掛中的樣式覆蓋了test.html中的嵌入樣式。

效果如圖：

效果圖

這不符合使用者樣式的優先順序低於嵌入樣式的規則，由此可以得出User CSS外掛修改的不是使用者樣式。

注：經查詢發現ChromeV33版本後不允許對使用者樣式表進行修改。[3]

連結樣式

新建test.css檔案，內容如下：

em {
    color: red;
    font-weight: normal;
}

在test.css檔案同級目錄下建立test.html檔案，內容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>test</title>
        <link rel="stylesheet" href="./test.css" type="text/css"/>
    </head>
    <body>
        <em>em</em>
        <br>
        <strong>strong</strong>
    </body>
</html>

效果如圖：

效果圖
由此可得知連結樣式可以覆蓋使用者樣式。

嵌入樣式

在連結樣式的基礎上改動test.html，改動後內容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>test</title>
        <link rel="stylesheet" href="./test.css" type="text/css"/>
        <style type="text/css">
            em {
                color : red;
            }
        </style>
    </head>
    <body>
        <em>em</em>
        <br>
        <strong>strong</strong>
    </body>
</html>

效果如圖：
效果圖
從中可以得知嵌入樣式 > 連結樣式(test.css) > 使用者樣式 > 瀏覽器預設樣式。

再修改一下test.html，修改過後內容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>test</title>
        <style type="text/css">
            em {
                color : red;
            }
        </style>
        <link rel="stylesheet" href="./test.css" type="text/css"/>
    </head>
    <body>
        <em>em</em>
        <br>
        <strong>strong</strong>
    </body>
</html>

效果如圖：
效果圖
我們又得到了連結樣式(test.css) > 嵌入樣式 > 使用者樣式 > 瀏覽器預設樣式的效果，由此可得知：連結樣式和嵌入樣式的優先順序由它們在dom樹中節點的位置決定,越往後的優先順序越高。

行內樣式

在連結樣式的基礎上改動test.html，改動後內容如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <title>test</title>
        <style type="text/css">
            em {
                color : red;
            }
        </style>
        <link rel="stylesheet" href="./test.css" type="text/css"/>
    </head>
    <body>
        <em style="color: green;">em</em>
        <br>
        <strong>strong</strong>
    </body>
</html>

效果如圖：
效果圖
我們得到了行內樣式 > 連結樣式(test.css) > 嵌入樣式 > 使用者樣式 > 瀏覽器預設樣式的效果。

樣式來源總結

行內樣式、嵌入樣式、連結樣式、使用者樣式、瀏覽器預設樣式這5種樣式來源中,行內樣式優先順序最高，連結樣式和嵌入樣式的優先順序由它們在dom樹中節點的位置決定,越往後的優先順序越高,再往下是使用者樣式，最低的是瀏覽器預設樣式。

如圖：
樣式來源總結圖

參考

  1. 可能有這種情況,比如div的style屬性新增了font-size,但是font-size並不會作用於div(不考慮 :before :after content等屬性的組合),而是作用於div中的p元素,但div中的p元素也屬於div的一部分，所以稱之為作用於div。 ↩︎

  2. Chrome 這一單詞代指瀏覽器的使用者介面，也是 Google Chrome 瀏覽器名稱的由來。因此，這裡的 chrome 與 Google Chrome 瀏覽器完全沒有關係。來源：https://zhuanlan.zhihu.com/p/104901539。 ↩︎

  3. 來源：https://blog.csdn.net/u010281174/article/details/52145291。 ↩︎

相關文章