第1章:层叠、优先级和继承 |
您所在的位置:网站首页 › css默认样式的优先级是多少位数的 › 第1章:层叠、优先级和继承 |
层叠、优先级和继承
1 层叠1.1 意义1.2冲突1.2.1样式表的来源1.2.2理解优先级
1.2 小结1.3 源码顺序1.3.1 含义1.3.2 链接样式和源码顺序
1.4 提醒
2 继承2.1 含义2.1.1 特定属性会被继承2.1.2 使用开发者工具
3 特殊值3.1 使用inherit关键字3.2 使用initial关键字
4 简写属性4.1 简写属性会默默覆盖其他样式4.2 理解简写值的顺序4.2.1 上、右、下、左4.2.2 水平、垂直
5 总结
1 层叠
1.1 意义
层叠指的就是这一系列规则。它决定了如何解决冲突,是CSS语言的基础 1.2冲突当声明冲突时,层叠会依据三种条件解决冲突。 样式表的来源:样式是从哪里来的,包括你的样式和浏览器默认样式等。选择器优先级:哪些选择器比另一些选择器更重要。样式在样式表里的声明顺序。 1.2.1样式表的来源 1. 用户代理样式表 2. 作者样式表 3. 用户样式表作者样式覆盖用户代理样式,因为作者样式的优先级更高,些浏览器允许用户定义一个用户样式表。这是第三种来源,它的优先级介于用户代理样式表和作者样式表之间 1.2.2理解优先级如果无法用来源解决冲突声明,浏览器会尝试检查它们的优先级。理解优先级很重要。 浏览器将优先级分为两部分:HTML的行内样式和选择器的样式。 行内样式 如果用HTML的style属性写样式,这个声明只会作用于当前元素。实际上行内元素属于“带作用域的”声明,它会覆盖任何来自样式表或者标签的样式。行内样式没有选择器,因为它们直接作用于所在的元素选择器优先级 有两个类名的选择器比只有一个类名的选择器优先级更高, ID选择器比类选择器优先级更高, ID选择器的优先级比拥有任意多个类的选择器都高, 类选择器的优先级比标签选择器(也称类型选择器)更高优先级的准确规则如下 如果选择器的ID数量更多,则它会胜出(即它更明确)如果ID数量一致,那么拥有最多类的选择器胜出如果以上两次比较都一致,那么拥有最多标签名的选择器胜出 1.2 小结优先级容易发展为一种“军备竞赛”。在大型项目中这一点尤为突出。通常最好让优先级尽可能低,这样当需要覆盖一些样式时,才能有选择空间 1.3 源码顺序 1.3.1 含义层叠的第三步,也是最后一步,是源码顺序。如果两个声明的来源和优先级相同,其中一个声明在样式表中出现较晚,或者位于页面较晚引入的样式表中,则该声明胜出。 1.3.2 链接样式和源码顺序你刚开始学习CSS时,或许就知道给链接加样式要按照一定的顺序书写选择器。这是因为源码顺序影响了层叠。代码清单1-12展示了如何以“正确”的顺序书写链接样式` a:link { color: blue; text-decoration: none; } a:visited { color: purple; } a:hover { text-decoration: underline; } a:active { color: red; } 1.4 提醒 在选择器中不要使用ID。就算只用一个ID,也会大幅提升优先级。当需要覆盖这个选择器时,通常找不到另一个有意义的ID,于是就会复制原来的选择器,然后加上另一个类,让它区别于想要覆盖的选择器不要使用!important。它比ID更难覆盖,一旦用了它,想要覆盖原先的声明,就需要再加上一个!important,而且依然要处理优先级的问题这两条规则是很好的建议,但不必固守它们,因为也有例外。不要为了赢得优先级竞赛而习惯性地使用这两个方法 关于重要性的一个重要提醒 当创建一个用于分发的JavaScript模块(比如NPM包)时,强烈建议尽量不要在JavaScript里使用行内样式。如果这样做了,就是在强迫使用该包的开发人员要么全盘接受包里的样式,要么给每个想修改的属性加上!important。 2 继承 2.1 含义如果一个元素的某个属性没有层叠值,则可能会继承某个祖先元素的值。比如通常会给元素加上font-family,里面的所有祖先元素都会继承这个字体,就不必给页面的每个元素明确指定字体了 例如 2.1.1 特定属性会被继承它们主要是跟文本相关的属性: color、font、font-family、font-sizefont-weight、font-variant、font-style、line-heightletter-spacing、 text-align、text-indent、text-transformwhite-space以及word-spacing。 2.1.2 使用开发者工具样式检查器显示了所检查元素的每个选择器,它们根据优先级排列。在选择器下方是继承属性。元素所有的层叠和继承一目了然。 3 特殊值有两个特殊值可以赋给任意属性,用于控制层叠:inherit和initial 3.1 使用inherit关键字有时,我们想用继承代替一个层叠值。这时候可以用inherit关键字。可以用它来覆盖另一个值,这样该元素就会继承其父元素的值。 a:link { (以下3行)全局的网页链接颜色 color: blue; } ... .footer { color: #666; ←---- 页脚的文本设置为灰色 background-color: #ccc; padding: 15px 0; text-align: center; font-size: 14px; } .footer a { color: inherit; ←---- 从页脚继承文本颜色 text-decoration: underline; }第三个规则集覆盖了蓝色的链接色,让页脚链接的层叠值为inherit。因此,它继承了父元素的颜色。 3.2 使用initial关键字有时,你需要撤销作用于某个元素的样式。这可以用initial关键字来实现,每一个CSS属性都有初始(默认)值。如果将initial值赋给某个属性,那么就会有效地将其重置为默认值,这种操作相当于硬复位了该值。 4 简写属性简写属性是用于同时给多个属性赋值的属性 例如 border是border-width、border-style以及border-color的简写属性,而这几个属性也都是简写属性。简写属性可以让代码简洁明了,但是也隐藏了一些怪异行为 4.1 简写属性会默默覆盖其他样式大多数简写属性可以省略一些值,只指定我们关注的值。但是要知道,这样做仍然会设置省略的值,即它们会被隐式地设置为初始值。这会默默覆盖在其他地方定义的样式。比如,如果给网页标题使用简写属性font时,省略font-weight,那么字体粗细就会被设置为normal(如图1-12所示)。 h1 { font-weight: bold; } .title { font: 32px Helvetica, Arial, sans-serif; }乍一看可能会觉得 会将标题加粗,但结果不是 。等价于 h1 { font-weight: bold; } .title { font-style: normal; (以下5行)这些属性的初始值 font-variant: normal; font-weight: normal; font-stretch: normal; line-height: normal; font-size: 32px; font-family: Helvetica, Arial, sans-serif; } 4.2 理解简写值的顺序简写属性会尽量包容指定的属性值的顺序。可以设置border: 1px solid black或者border: black 1px solid,两者都会生效。这是因为浏览器知道宽度、颜色、边框样式分别对应什么类型的值。但是有很多属性的值很模糊。在这种情况下,值的顺序很关键。理解这些简写属性的顺序很重要 4.2.1 上、右、下、左当遇到像margin、padding这样的属性,还有为元素的四条边分别指定值的边框属性时,开发者容易弄错这些简写属性的顺序。这些属性的值是按顺时针方向,从上边开始的,记住顺序能少犯错误。它的记忆口诀是TRouBLe:top(上)、right(右)、bottom(下)、left(左)。 这种模式下的属性值还可以缩写。如果声明结束时四个属性值还剩一个没指定,没有指定的一边会取其对边的值。指定三个值时,左边和右边都会使用第二个值。指定两个值时,上边和下边会使用第一个值。如果只指定一个值,那么四个方向都会使用这个值。因此下面的声明都是等价的。 padding: 1em 2em; padding: 1em 2em 1em; padding: 1em 2em 1em 2em;下面的声明也是等价的。 padding: 1em; padding: 1em 1em; padding: 1em 1em 1em; padding: 1em 1em 1em 1em;对很多开发人员而言,比较难的是指定三个值时。记住,这种情况指定了上、右、下的值。因为没有指定左边的值,所以它会取与右边相等的值。第二个值就会作用到左边和右边。因此padding: 10px 15px 0是设置左右内边距为15px,上内边距为10px,下内边距为0。 不过,大多数情况只需要指定两个值。尤其对于较小的元素,左右的内边距最好大于上下内边距。这种样式很适合网页的按钮或者导航链接(如图1-14所示)。 图1-14 很多元素在水平方向的内边距较大会更好看些 4.2.2 水平、垂直“TRouBLe”口诀只适用于分别给盒子设置四个方向的值的属性,还有一些属性只支持最多指定两个值,这些属性包括background-position、box-shadow、text-shadow(虽然严格来讲它们并不是简写属性)这些属性值的顺序跟padding这种四值属性的顺序刚好相反。比如,padding: 1em 2em先指定了垂直方向的上/下属性值,然后才是水平方向的右/左属性值,而background-position: 25% 75%则先指定水平方向的右/左属性值,然后才是垂直方向的上/下属性值。虽然看起来顺序相反的定义违背了直觉,原因却很简单:这两个值代表了一个笛卡儿网格。笛卡儿网格的测量值一般是按照x,y(水平,垂直)的顺序来的。比如,如图1-15所示,要给元素加上一个阴影,就要先指定x(水平)值。 图1-15 盒阴影的位置为10px 2px 这个元素的样式如代码清单1-21所示。 .nav .featured { background-color: orange; box-shadow: 10px 2px #6f9090; ←---- 阴影向右偏移10px,向下偏移2px }代码清单1-21 box-shadow先指定x值再指定y值 5 总结 控制选择器的优先级。不要混淆层叠和继承。某些属性会被继承,包括文本、列表、表格边框相关的属性。不要混淆initial和auto值。简写属性要注意TRouBLe的顺序,避免踩坑。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |