深入解析CSS读书笔记-第一章-层叠、优先级和继承

1.1层叠

层叠(cascade)决定了如何解决冲突,是css语言的基础。

声明发生冲突时,层叠会根据三种条件去解决冲突。

  • 样式表的来源:自己定义的样式或是浏览器默认样式。
  • 选择器的优先级:哪些选择器的优先级更高。
  • 源码的顺序:样式在样式表声明的顺序。

下图展示了规则的用法:

深入解析CSS读书笔记-第一章-层叠、优先级和继承_第1张图片

术语解释:

  1. “color:black” 前面是css的一行。它被称作一个声明。该声明由一个属性(color)和一个值(black)构成。
  2. 不要将CSS属性(property)跟HTML属性(attribute)混淆。
  3. 包含在大括号内的一组声明被称作一个声明块。声明块前面有一个选择器(如下面的body)
body {
    color:black;
    font-family:Helvet;
}
  1. 选择器和声明块一起组合成了规则集。一个规则集也简称一个规则.
  2. 最后**@规则(at-rules)**是指用“@”符号开头的语法。如@import规则或者@media查询。

1.1.1 样式表来源

样式表分为作者样式表(你自己定义的样式表)和用户代理样式表(浏览器默认样式)。有的浏览器也允许用户定义一个用户样式表,他的优先级介于两者之间。

样式表来源规则有一个例外:标记为**重要(important)**的声明,他的优先级比用户代理样式和作者样式表都要高。(谨慎使用,增加复杂性)

1.1.2 理解优先级

如果无法用来源解决冲突声明,浏览器会尝试检查他们的优先级

  1. 行内样式

只作用于当前元素。Hello world!

  1. 选择器优先级

ID选择器的优先级高于类选择器,类选择器优先级高于标签选择器。

优先级的准确规则如下:

- 如果选择器的ID数量更多,则它会胜出。
- 如果ID一致,那么拥有更多类的选择器胜出。
- 如果以上两者都一致,那么拥有最多标签的选择器胜出。

说明 伪类选择器和属性选择器与一个类选择器的优先级相同。通用选择器和组合器对优先级没有影响。

  1. 优先级标记

一个常用的优先级标记的方式是用数值标记,通常用逗号隔开。如“1,2,4”表示一个ID、2个类和4个标签。用于判断声明块的优先级。

1.1.3 源码顺序

如果声明来源和优先级相同,那么在样式表中出现较晚的声明胜出。

层叠值——作为层叠结果,应用到一个元素上的特定属性的值。浏览器遵循三个步骤,即来源、优先级、源码顺序,来解析网页上每个元素的属性。如果一个声明胜出,它就称作一个层叠值,元素每个属性只能有一个层叠值。

1.1.4 两条经验法则

  1. 在选择器中不要使用ID。优先级会大幅度提升,但是通常找不到另一个有意义的ID,于是还得加多一个类。
  2. 不要使用!important。它比ID更难覆盖,且依然要处理优先级问题。

1.2 继承

还有一种可以给元素添加样式的方式:继承。如果一个属性没有层叠值,则可能会继承某个祖先元素的值。例如,通常给body指定字体,这样里边所有元素都会继承这个字体。继承是沿着DOM树往下传递的,如下图。

深入解析CSS读书笔记-第一章-层叠、优先级和继承_第2张图片

在浏览器可以按F12打开开发者模式,在Elements窗口模式下,在右方选择器样式的底部可以看到继承(Inherited)的属性值。


1.3 特殊值

有两个值可以赋给任意属性,用于控制层叠:inheritinitial

1.3.1 使用inherit关键字

有时,我们想用继承代替一个层叠值。这时候可以用inherit关键字。可以用来覆盖另一个值,这样该元素会继承其父亲的值。


<head>
  <style>
body {
  font-family: sans-serif;
}
...
a:link {
  color: blue;
  text-decoration: none;
}
.footer {
   /*页脚文本颜色设置为灰色 */
  color: #666;
  background-color: #ccc;
  padding: 15px 0;
  text-align: center;
  font-size: 14px;
}
.footer a {
  /*从页脚的文本继承文本颜色*/
  color: inherit;
  text-decoration: underline;
}
  style>
head>
<body>
  
  <footer class="footer">
    © 2016 Wombat Coffee Roasters 
    <a href="/terms-of-use">Terms of usea>
  footer>
body>

1.3.2 使用initial关键字

有时候需要撤销作用于某个元素的样式,这样可以用initial来实现。

每一个CSS样式都有初始值。如果将initial属性赋给某个值,那么就会有效地将其重置为默认值,这个操作相当于复位了该值。

.footer a {
    /* 浏览器默认样式是黑色,相当于color:black;*/
    color:initial;
    text-decoration:underline;
}

1.4 简写属性

简写属性是用于同时给多个熟悉感赋值的属性。

font: italic bold 18px/1.2 "Helvetica","Arial",sans-serif;

还有以下属性诸如background、border 。

}


# 1.4 简写属性

简写属性是用于同时给多个熟悉感赋值的属性。

```css
font: italic bold 18px/1.2 "Helvetica","Arial",sans-serif;

还有以下属性诸如background、border 。

简写属性会覆盖其他样式。

你可能感兴趣的:(读书笔记,css,css3,html,chrome,html5)