样式来源

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元素显示效果

em元素样式

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中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插件进行修改的方法。

注意，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：



图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树中节点的位置决定,越往后的优先级越高,再往下是用户样式，最低的是浏览器默认样式。

如图：

参考

  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。 ︎

今天聊点干货—关于CSS样式来源的更多相关文章

  1. 浏览器如何加载和解析CSS——CSS样式来源与层叠规则

    关于CSS样式首先得理解浏览器如何加载它们,最终的页面样式是如何呈现的? CSS层叠样式表的关键在于"层叠",会根据选择符的使用而将样式相互叠加或者覆盖. CSS样式表之所有有&q ...

  2. css知多少（3）——样式来源与层叠规则

    上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...

  3. css知多少（3）——样式来源与层叠规则（转）

    css知多少(3)——样式来源与层叠规则   上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看 ...

  4. CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源

    CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...

  5. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  6. Bootstrap3 CSS样式基本用法总结

    按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#&qu ...

  7. CSS样式表（三）

    前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...

  8. Csstyle - 创建简洁、可维护强的 CSS 样式

    Csstyle 是一种现代的方式,用于制作精美的可维护样式表.这个 Csstyle 方法使用 SASS 混入,使你的 CSS 更具可读性和语义,并为你生成选择器,自动处理嵌套等事情. Csstyle ...

  9. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

随机推荐

  1. 说说在 Python 中如何快速复制序列

    1 基本用法 把序列乘以一个整数,就会产生一个新序列.这个新序列是原始序列复制了整数份,然后再拼接起来的结果. l=[1,2,3] l2=l * 3 logging.info('l2 -> %s ...

  2. Python炫技操作：五种Python 转义表示法

    1. 为什么要有转义? ASCII 表中一共有 128 个字符.这里面有我们非常熟悉的字母.数字.标点符号,这些都可以从我们的键盘中输出.除此之外,还有一些非常特殊的字符,这些字符,我通常很难用键盘上 ...

  3. Python基础入门：注释、变量、运算符与数据类型

    一.为什么要学习python? python的特点 python作为一门脚本语言,在越来越多的行业和领域发挥着重大作用,比如机器学习.网站开发.数据分析.爬虫.自动化测试. 同时,python具备以下 ...

  4. k8s重器之Service

    Service是k8s的核心,通过创建Service,可以为一组具有相同功能的容器应用提供一个统一的入口地址,并将请求进行负载分发到各个容器应用上. 目录: Service定义详解 Service基本 ...

  5. Hello Python!用 Python 写一个抓取 CSDN 博客文章的简单爬虫

    网络上一提到 Python,总会有一些不知道是黑还是粉的人大喊着:Python 是世界上最好的语言.最近利用业余时间体验了下 Python 语言,并写了个爬虫爬取我 csdn 上关注的几个大神的博客, ...

  6. Net/NetCore/.NET5 ORM 六大查询体系 - SqlSugar 高级篇

    框架介绍 SqlSugar ORM是一款老牌国产ORM框架,生命力也比较顽强,从早期ORM不成熟阶段,一直存活到现在,我为什么要一直坚持,那是因为还有很多用户在使用,本来我能够较早推出新开源框架 ,可 ...

  7. python实现域名注册查询

    author:摘繁华-蓝白社区 联合出品 域名生成与查询 文件说明: [x] .py源文件 [x] .exe可执行文件 [x] .config.json配置文件 ps: .exe和config.jso ...

  8. JS内存

    内存是用来存什么的 通俗的来说呢,就是用来存 var let function const 声明的变量. 内存的大小 与操作系统有关,64位1.4G 32位0.7G. 为啥内存大小要这么设计,为啥不是 ...

  9. 4.5万字手把手教你实现MySQL TB级数据存储！！

    写在前面 业界对系统的高可用有着基本的要求,简单的说,这些要求可以总结为如下所示. 系统架构中不存在单点问题. 可以最大限度的保障服务的可用性. 一般情况下系统的高可用可以用几个9来评估.所谓的几个9 ...

  10. 音视频入门-19-使用giflib处理GIF图片

    * 音视频入门文章目录 * GIFLIB The GIFLIB project 上一篇 [手动生成一张GIF图片], 自己生成了一张 GIF 动态图 rainbow.gif. 下面,使用 GIFLIB ...