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

時間 2021-01-27

標籤 css html web chrome 瀏覽器服務器 dom google spa .net 欄目 CSS 简体版

原文原文鏈接

樣式來源

CSS樣式共有5個來源，它們分別是\(\color{#FF3030}{瀏覽器默認樣式}\)、\(\color{#FF3030}{用戶樣式}\)、\(\color{#FF3030}{連接樣式}\)(位於單獨的css文件中，經過link元素的src屬性連接到html文檔中)、\(\color{#FF3030}{嵌入樣式}\)(位於style元素中)、\(\color{#FF3030}{行內樣式}\)(位於要做用元素^[1]的style屬性中)。css

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

瀏覽器默認樣式

正常狀況下，就算咱們不給HTML文檔添加任何樣式,瀏覽器也能成功渲染出font-style爲italic(斜體)的em元素和font-weight爲bold(粗體)的strong元素，這即是瀏覽器默認樣式的效果。web

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

em元素和strong元素顯示效果

em元素樣式

strong元素樣式

這裏有兩篇瀏覽器默認樣式彙總的文章瀏覽器默認樣式彙總、User Agent Style Sheets: Basics and Samples。chrome

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

user agent stylesheet中em元素樣式

user agent stylesheet中strong元素樣式

用戶樣式

這個多是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插件進行修改的方法。dom

注意，User CSS插件並不會對file協議文件起做用，能夠先使用npx http-server開啓一個本地服務器，再使用http協議進行訪問。google

如圖：spa

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

FireFox中用戶樣式的修改

關於FireFox修改用戶樣式:
第一步：在地址框輸入about:support;
第二步：找到配置文件夾，點擊右側的打開文件夾;
第三步：新建chrome^[2]文件夾，在其中建立userChrome.css和userContent.css文件並加入須要的樣式;
(若是Firefox的版本在69+以前，跳過第四和第五步)
第四步：在地址框輸入about:config,回車,選擇接受風險並繼續;
第五步：搜索toolkit.legacyUserProfileCustomizations.stylesheets並置爲true;
第六步：重啓Firefox;

圖1：

圖2：

圖3：

補充說明

關於兩種用戶樣式的修改存在一個差別點，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樹中節點的位置決定,越日後的優先級越高,再往下是用戶樣式，最低的是瀏覽器默認樣式。

如圖：

參考

可能有這種狀況,好比div的style屬性添加了font-size,可是font-size並不會做用於div(不考慮 :before :after content等屬性的組合),而是做用於div中的p元素,但div中的p元素也屬於div的一部分，因此稱之爲做用於div。 ↩︎
Chrome 這一單詞代指瀏覽器的用戶界面，也是 Google Chrome 瀏覽器名稱的由來。所以，這裏的 chrome 與 Google Chrome 瀏覽器徹底沒有關係。來源：https://zhuanlan.zhihu.com/p/104901539。 ↩︎
來源：https://blog.csdn.net/u010281174/article/details/52145291。 ↩︎