样式来源

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爬虫采集反爬策略

    一.爬虫与反爬简介 爬虫就是我们利用某种程序代替人工批量读取.获取网站上的资料信息.而反爬则是跟爬虫的对立面,是竭尽全力阻止非人为的采集网站信息,二者相生相克,水火不容,到目前为止大部分的网站都还是可 ...

  2. NET 5 收发邮件之 MailKit

    大家都用过SmtpClient来处理发送邮件的操作,不过这个类以及被标记已过时,所以介绍一个微软推荐的库MailKit来处理. MailKit开源地址:https://github.com/jsted ...

  3. Linux 时间同步 04 ntp时间同步

    Linux 时间同步 04 ntp时间同步 目录 Linux 时间同步 04 ntp时间同步 安装ntp 配置与外部时间服务器进行时间同步的客户端主机 配置其他客户端与以上客户端主机时间同步 验证查看 ...

  4. 第十八章节 BJROBOT 安卓手机 APP 建地图【ROS全开源阿克曼转向智能网联无人驾驶车】

    1.把小车平放在地板上,用资料里的虚拟机,打开一个终端 ssh 过去主控端启动roslaunch znjrobotbringup.launch 2.在虚拟机端再打开一个终端,ssh 过去主控端启动ro ...

  5. jQuery 日常笔记

    1.$(document).read(function(){$('p').click(function(){ $('p').hide();})})2.jquery是客户端脚本3.$("p&q ...

  6. 10分钟搞定让你困惑的 Jenkins 环境变量

    前言 Jenkins, DevOps 技术栈的核心之一,CI/CD 离不开编写 Pipeline 脚本,上手 Jenkins ,简单查一下文档,你就应该不会被 agent,stages,step 这类 ...

  7. Nexus3.X在linux系统搭建maven私服

    准备工作: 1.linux服务器上需安装jdk(非yum下来的open_jdk!!!,版本1.8以上) 2.linux服务器上需安装maven(如不会,请点击链接,maven版本自己喜欢就好) 准备工 ...

  8. r5 5600H 怎么样 相当于什么水平

    Ryzen 5 5600H是基于Zen 3架构的6核12线程处理器.它具有3.30 GHz的默认频率和4.25GHz的加速频率,带有16MB的L3缓存和3 MB的L2缓存,显卡部分,AMD搭配的Veg ...

  9. Tensorflow创建已知分布的张量

    一.随机数 tf.random(num) 随机产生返回0----num-1的数 二.图变量 tf.Variable.init(initial_value, trainable=True, collec ...

  10. Thread线程控制之sleep、join、setDaemon方法的用处

    Thread线程控制之sleep.join.setDaemon方法的用处 1. sleep方法 public static void sleep(long millis) throws Interru ...