深入理解CSS | 青训营笔记

01zero
166 阅读3分钟

深入理解CSS | 青训营笔记

这是我参与 ⌈\lceil第四届青训营⌋\rfloor 笔记创作活动的第3天

课程的重点内容

1. 选择器的特异度（Specificity）
2. 继承
3. CSS的初始值
4. CSS的求值过程
5. 总结

一、选择器的特异度

1、特异度计算规则： 如下图：

#nav .list li a:link 特异度值为122（ （伪）类：.list和a:link，同时标签计数也算上a）

.id ul.links a 特异度值为022 直接当作10进制数比较：122>022

所以当这两个选择器选择到同一个元素时，特异度高的效果会覆盖特异度低的效果，即图中第一个选择器。

image.png

2、下面我们来看一段代码（“拉森火山公园”的字体是什么颜色）

<article>
  <h1 class="title">拉森火山国家公园</h1>
</article>

<style>
  .title{
    color : blue;
  }

  article h1 {
    color : red;
  }
</style>

依据选择器特异度的计算规：.title为010，article h1为002，所以字体会是蓝色

image.png

3、代码复用技巧：还记得这句话吗“特异度高的效果会覆盖特异度值低的效果”，借此我们可以复用一些效果代码。看下面的例子：


<button class="btn">普通按钮 </button>
<button class="btn primary">主要按钮 </button>
 
<style>
.btn {
  display: inline-block; 
  padding: .36em .8em; 
  margin-right: .5em; 
  line-height: 1.5;
  text-align: center; 
  cursor: pointer; 
  border-radius: .3em; 
  border: none; 
  background: #e6e6e6; 
  color: #333;
}
 
.btn .primary { 
  color: #fff;
  background: #218de6;
}
 
</style>

.btn中的没被覆盖的效果，都作用在了“主要按钮”元素上

image.png

二、继承

1、概念：某些属性会自动继承其父元素的计算值，除非显示指定一个值

可以继承的属性：一般情况下，文字、字体相关属性都可以继承

不可以继承的属性：盒模型宽度、高度、边距等都不可以继承

2、例子：

<p>
  this is a
  <em>test</em>
  of
  <strong>inherit</strong>
</p>
<style>
  body{
    font-size:20px;
  }
  p{
    color:blue;
  }
  em{
    color:red;
  }
</style>

没有显示指定值得情况下，子元素会自动继承父元素的属性计算值（如：strong标签中自动继承了p的颜色属性值blue）

image.png

3、如何继承不能自动继承的属性: 显示继承

// 声明在全局（*）范围内的box-sizing是可以继承的
* {
  box-sizing: inherit;
}
 
html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}
//html的所有子代元素，除了类为some-widget的元素，都将继承html选择器中的box-sizeing：border-box

三、初始值

css中每个属性都有初始值，如：

*{
    //以下属性的值都为初始值
    background-color: transparent; 
    margin-left: 0;
  }
 
 //同时，我们可以使用initial来代表属性的初始值
 p{
    background-color: initial;
    margin-left: initial;
  }

四、CSS的求值过程

如何将选择器中的样式属性值层叠和最终计算的逻辑，点击下面链接

CSS求值计算过程图示

五、总结

本次课程内容主要介绍了CSS的特异性、元素的继承和显示继承、CSS如何计算值

依据CSS特异性可以更优雅的编写CSS，对本次课程内容进行掌握后，可以更好的理解和学习复杂的CSS设计，尤其是CSS计算值的逻辑。

知识很多，时间有限。了解了本质才能更容易找到学习的方向。

下篇笔记，页面的布局 layout

基础不牢，地动山摇

TO BE CONTINUED

avatar
文章
阅读
粉丝