HTMLCSS掌握css的继承以及代码

上边文章我们说了使用css的三种不同的选择器,本篇文章我们主要介绍css的继承规则以及css代码的权重优先级问题。

(1)css的继承规则

CSS的某些样式代码是具有继承性的,那么究竟什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:我们设置p标签的字体颜色为红色并添加1像素的红色边框。

在网页中的显示效果就如下图所示:

从上边的图片你可以看出字体颜色为红色不仅使p标签中的文字变成了红色,还应用于p标签中的所有子元素文本,这里子元素为span标签。但是边框属性并没有应用到子元素中去。

经过我们总结测试,可以得出以下结论:

关于文字样式的属性,都具有继承性。这些属性包括:color、text-开头的、line-开头的、font-开头的。关于盒子、定位、布局的属性,都不能继承。(2)css代码的权重优先级

css就像工程师一样是很严谨的,有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:

上边的代码中,p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?#0f0是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

下面是权值的规则:

标签(div、p、span等)的权值为1,类选择符(.xxx)的权值为10,ID选择符(#xxx)的权值为,内联样式(style=color:#f00;)的权值为0。

我们来做一个权重的拔高练习,观察以下代码看一下p标签以及span标签内的文字显示颜色应该是什么?

由上边我们可以看出来,p标签的样式中#second的权值最高为,那么p的文字颜色为yellow,而span标签样式中内联样式权值最高为0,那么span的文字颜色就为#。我们的结果就会如下图所示:

对于css的继承以及代码优先级的问题我们今天就先介绍到这里,大家在平时可以自己多加练习练习,自己多写几个权重的例子尝试尝试。

每日金句:人若有志,就不会在半坡停止。喜欢我的文章的小伙伴记得


转载请注明:http://www.aierlanlan.com/grrz/3504.html

  • 上一篇文章:
  •   
  • 下一篇文章: