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

本文轉載自查看原文 2021-01-27 22:27 481 鏈接樣式/ 樣式來源/ 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元素樣式進行修改,使其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樹中節點的位置決定,越往后的優先級越高,再往下是用戶樣式，最低的是瀏覽器默認樣式。

如圖：
樣式來源總結圖

參考

可能有這種情況,比如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。 ↩︎

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 聊一聊 React 中的 CSS 樣式方案 css知多少（3）——樣式來源與層疊規則知識點干貨--聊一聊Android中Service與Thread的區別今天聊一聊nuxt.js（上）不吹不黑，今天我們來聊一聊 Kubernetes 落地的三種方式【騰訊Bugly干貨分享】聊一聊微信“小程序” IDEA導入css樣式和js效果的易錯點【干貨分享】前端面試知識點錦集02（CSS篇）——附答案聊一聊，React開發中應該規避的點【聊一聊】css中的經典布局——雙飛翼布局