今天聊点干货—关于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。 ↩︎