一、css样式的继承性:

作用:给父元素设置一些属性,子元素也可以使用

应用场景:

一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量

前端开发基础篇之css样式编写(前端小白必看css样式的特性)(1)

注意点:

1.并不是所有的属性都可以继承,、

只有color/font-/text-/ line开头的属性才能继承;

2.在css的继承中,不仅仅是儿子可以继承,只要是后代

都能继承

3.继承性中的特殊性

前端开发基础篇之css样式编写(前端小白必看css样式的特性)(2)

3.1 a标签的文字和颜色 和下划线是不能继承父元素的——举例:

复制代码

<style type="text/css">

div{

color:red

font-size:24px;

text-decoration: none;

}

</style>

<body>

< div>

<h1>我是大标题</h1>

<a heref="#">我是超链接</a>

<p>我是段落</p>

</div>

(上面的代码,只有p继承了div设置的属性,而a标签是不能继承父元素的属性,颜色不会变红,下划线也不会被去掉)

复制代码

前端开发基础篇之css样式编写(前端小白必看css样式的特性)(3)

3.2 h标签的文字大小也是不能继承父元素的(见上面代码,<h1>标签中我是大标题不会继承<div>的 font-size:24px;属性,所以需要给<h1>单独写个css样式:h1{font-size:24px;}

应用场景:

一般用于设置网页上的一些共性信息,例如网页的文字颜色,

字体,文字大小灯内容

格式:

body{属性:值;}

二、层叠性

前端开发基础篇之css样式编写(前端小白必看css样式的特性)(4)

比如p标签,给p标签设置id和class类名,选择器上选择p 和p的id或者class类名,设置相同的属性,就是层叠性

三、优先级:(三一)

作用:当多个选择器(比如选择p标签和p标签里设置的id或者class昵称),选中同一个标签,并且给同一个标签设置相同的属性时,

如何层叠就优先级来确定。

2.优先级判断的三种方式

2.1 是否直接选中,直接选中指的是直接选中要设置css样式的标签,和标签的id或者class类名。(间接选中就是指的是继承性,比如选择<ul>那里面的li继承ul的属性,就称为继承属性)

如果是间接选中,谁离目标标签比较近就听谁的。

2.2是否是相同的选择器。

前端开发基础篇之css样式编写(前端小白必看css样式的特性)(5)

如果是相同选择器,那么就是谁写在后面就听谁的。(比如给两个p标签设置css样式

p{color:blue}

p{color:red}

那么就会以第二个p为标准,文字变成红色

2.3不同的选择器

如果都是直接选中,并且不是相同类型的选择器,那么就会按照

选择器的优先级来层叠

id>类>标签>通配符>继承>浏览器默认

权重计算

如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器,也会优先实行直接选中的效果。

前端开发基础篇之css样式编写(前端小白必看css样式的特性)(6)

我是一名前端开发程序员,自己整理了一份2019最全面前端学习资料,从最基础的HTML CSS JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴

前端资料获取方式:

1.在你手机的右上角有【关注】选项,点击关注!

2.关注后,手机客户端点击我的主页面,右上角有私信,请私信回复:【学习】

电脑已经设置好了关键词自动回复,所以回复的时候请注意关键词哟~

,