今天聊点干货—关于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元素显示效果
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] 从好看到好用，定制属于自己的 Firefox 浏览器
- [2] 添加浏览器的用户样式表
- [3] User CSS
- [4] 浏览器默认样式汇总
- [5] User Agent Style Sheets: Basics and Samples
可能有这种情况,比如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。 ︎
今天聊点干货—关于CSS样式来源的更多相关文章
- 浏览器如何加载和解析CSS——CSS样式来源与层叠规则
关于CSS样式首先得理解浏览器如何加载它们,最终的页面样式是如何呈现的? CSS层叠样式表的关键在于"层叠",会根据选择符的使用而将样式相互叠加或者覆盖. CSS样式表之所有有&q ...
- css知多少（3）——样式来源与层叠规则
上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看看上一节. 这一节就开始实践上一节的思路! 1 ...
- css知多少（3）——样式来源与层叠规则（转）
css知多少(3)——样式来源与层叠规则 上一节<css知多少(2)——学习css的思路>有几个人留言表示思路很好.继续期待,而且收到了9个赞,我还是比较欣慰的.没看过的朋友建议先去看 ...
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- Bootstrap3 CSS样式基本用法总结
按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 <a class="btn btn-default" href="#&qu ...
- CSS样式表（三）
前端人员在学习开发过程中常用的CSS样式总结: [margin] margin 检索或设置对象四边的外延边距 margin-top 检索或设置对象顶边的外延边距 margin-right 检索或设置对 ...
- Csstyle - 创建简洁、可维护强的 CSS 样式
Csstyle 是一种现代的方式,用于制作精美的可维护样式表.这个 Csstyle 方法使用 SASS 混入,使你的 CSS 更具可读性和语义,并为你生成选择器,自动处理嵌套等事情. Csstyle ...
- 四个好看的CSS样式表格
文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...
随机推荐
- 分布式事务MSDTC使用时，需要的配置
服务器最终配置 DTC服务 组件 防火墙 这里,跟下面的解决方案有点差异,在添加2个规则之后,原本就有分布式相关的规则,也给开启了. 网上的解决办法 在服务里打开 Distributed Transa ...
- 关于Git的一些常规操作
最近刚换了新的办公电脑,Git有重新安装了一遍,很多步骤久了不操作就忘了,又是好一顿折腾,于是这次就顺便记下来了. 不错的Git教程: https://www.liaoxuefeng.com/wiki ...
- 【Azure App Service】C#下制作的网站，所有网页本地测试运行无误，发布至Azure之后，包含CHART（图表）的网页打开报错，错误消息为 Runtime Error： Server Error in '/' Application
问题描述 C#下制作的网站,所有网页本地测试运行无误,发布至Azure之后,包含CHART(图表)的网页打开报错,错误消息为 Runtime Error: Server Error in '/' Ap ...
- 如何优雅的将Object转换成List
Main主函数中的 Object obj模拟了List对象.后续的代码首先判断obj是否是List类型,然后使用Class.cast做类型转换. 如果你想使用更方便的方法,可以直接调用下面的函数. p ...
- postgresql 创建分表
划分指的是将逻辑上的一个大表分成一些小的物理上的片.划分有很多益处: 1.在某些情况下查询性能能够显著提升,特别是当那些访问压力大的行在一个分区或者少数几个分区时.划分可以取代索引的主导列.减小索引尺 ...
- 【SpringBoot—注解】@requestBody 与@requestparam；@requestBody的加与不加的区别
一)首先说明xia @requestBody与@requestParam的区别 spring的RequestParam注解接收的参数是来自于requestHeader中,即请求头.都是用来获取请求路径 ...
- hive中笛卡尔积的优化
由于一个业务,必须要进行笛卡尔积,但是速度太慢了,left join时左表大概4万条数据,右表大概 3000多条数据,这样大概就是一亿多条数据, 这在大数据领域其实不算很大的数据量,但是hive中跑的 ...
- request.getContextPath()返回值问题
转自:http://blog.sina.com.cn/s/blog_6cbe0cff0101j6jl.html request.getContextPath()是在开发Web项目时,经常用到的方法,其 ...
- [leetcode]BestTimetoBuyandSellStock买卖股票系列问题
问题1: If you were only permitted to complete at most one transaction (ie, buy one and sell one share ...
- 收下这款 Vue 项目模版，它将让你的开发效率在 2021 年提高 50%
这是什么 vue-automation 是一款开箱即用的 Vue 项目模版,它基于 Vue CLI 4 众所周知,虽然 Vue CLI 提供了脚手架的功能,但由于官方的脚手架过于简单,运用在实际项目开 ...