山地人

课13.CSS进阶

山地人
山地人
2021-05-13

项目下载地址:前往GitHub

课13.CSS进阶——大纲

默认样式

对于CSS,你现在是不是已经比较熟悉了,你有没有想过一个问题,为什么你在浏览器中输入的哪些HTML标签,并没有书写任何CSS样式,比如你输入<h1><h6>标签,然后你就得到了不同样式的标签。

<h1>
是谁给了我这样的容貌?
</h1>

对于每一款浏览器,都会给所有的HTML标签,定义一套默认的样式。比如上面的这个h1标签,你可以按照视频里的样式,去查看下,浏览器给h1定义的默认样式。

真假h1

下面我们做个试验,把这个h1的浏览器定义的默认样式,定义到div标签上,看看,你还能区分出哪个是真正的h1标签,哪个是div标签吗?

完全不同的标签,但显示出来的效果却非常相似,让我们分析下原理。

<style>
div {
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
</style>

上面的div标签样式,我是从Chrome浏览器中获得到的,所以如果你把上面的代码保存下来,在Chrome浏览器中测试,应该会看到h1div显示的样式效果是一样的。

下面我们回过头来,讲讲这个CSS的默认样式。每一个标签,在浏览器渲染的时候,即便你不做任何样式的定义,它也能获得一套浏览器的默认样式,这是浏览器给的。然后如果你对某个标签或者写了一个类样式,浏览器会把符合你的规则的那些元素的样式引用你写的样式规则。这有点像我们孩子一出生,就从父母那边获得了一定的外貌特征,这个是天生的,就像浏览器默认提供的一套样式。然后孩子长大后,自己会打扮了,女孩子会化妆,来修饰自己的外貌,这个就好比我们这里的自定义了一些CSS样式规则。

样式属性的继承

我在上面给p定义了一个文字颜色blueviolet,但是我们并没有给p标签中的em定义文字颜色,为什么em也显示成了紫色了?

这就是样式属性的继承,em虽然自己没有定义文字颜色,但是它的color是可以继承父级元素的color的,所以,让父元素p定义了文字颜色后,em也就通过继承获得了blueviolet紫色。

但并不是所有的属性都默认开启继承的。

这里大致有些了解就可以了。

样式的优先级

在CSS的世界里,我们可以对同一个元素应用很多样式规则,同一个属性,可能你既定义了类样式来指定,有定义了标签样式,可能还有行内样式,文件内样式,外部样式。这多样式,如果同时都指定了,文字的color属性。这个时候,就有麻烦了。浏览器究竟应该选择使用哪一个规则呢?

这时候,就需要一套标准,来帮助我们的浏览器,遇到冲突的时候,怎么来解决样式冲突问题。这套标准,就是样式的优先级。

下面我做了一张表,来讲这个样式的优先级

样式类型权重
默认样式1
标签样式10
类样式100
ID样式1000
1<style>
2 p { color: red; }
3 .title { color: green; }
4 #my-title { color: blue; }
5</style>
6
7<p>我是一个段落标签p</p>
8<p class="title">我是一个段落标签p</p>
9<p id="my-title" class="title">我是一个段落标签p</p>

上面我们定义了 三个样式规则:

  • 行7:这一行的规则很简单,只有p标签样式影响,所有显示红色。
  • 行8:这一行,同时有p标签样式和类样式titel,根据样式优先级类样式的权重比标签样式高,所有这一样显示绿色。
  • 行9:最后这行,三种样式规则同时应用,最高优先级的是ID样式,所以最后显示蓝色。

放在不同地方的样式优先级

我们的样式可以定义在三个地方,分别是

  • 行内样式
  • 内部样式
  • 外部样式

他们的优先级是:行内样式>内部样式>外部样式

发生冲突的时候,我们就按照他们的样式类型来判断,究竟应用那个规则。

突破优先级的!important

有的时候,光有这些优先级还不能满足开发的需求,有些情况下,开发者就需要某个样式的属性要被强制应用。这种情况虽然不多见,但也有需要的时候,所以就有了一种可以突破优先级的写法,在样式属性定义结尾处加上

!important

<style>
p { color: red!important; }
.title { color: green; }
#my-title { color: blue; }
</style>
<p>我是一个段落标签p</p>
<p class="title">我是一个段落标签p</p>
<p id="my-title" class="title">我是一个段落标签p</p>

还是上面的例子,但是这次我们在p标签样式的color属性上,加入!important,注意这个!important要放在;分号前面。然后,你再去观察这个例子。

你会发现不管是下面的哪种情况,所有之前将的样式优先级都被!important突破了。

所以!important是一个非常危险的操作,如果不是万不得已,你不应该使用它。如果真要使用,也要做好充分的考虑。因为你一旦应用了这个规则,可能会给你今后维护样式带来很多麻烦。威力越强的武器,后果也越严重。

本课小结

本节课,我们进一步深入学习了CSS样式的相关知识:

  • 首先了解了默认样式的概念。
  • 然后,我们知道了样式的属性是有继承和不继承一说的。
  • 之后,重点看了不同样式选择器和不同样式定义位置上的优先级。
  • 最后我们学习了能够突破样式优先级的!important

课后练习

本节课的内容,概念比较多,要理解好本节课的内容,建议大家多做一些实验:

  • 像教程里那样,不不同的选择器定义出不同优先级的样式
  • 然后把这些样式,单独或者组合起来,加到元素上,观察不同组合方式的影响
  • 根据优先级的规则,思考和理解这些组合最终结果的中间过程,是否能够进行正确解释分析
  • 尝试把!important加入到不同的选择器中,观察元素变化。

今天这节课,对于今后工作中,遇到样式优先级冲突问题时,能够解决这些冲突或者避免出现优先级带来的问题,还是非常重要的一课,所以希望同学们,多做实验,加深理解。

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。