CSS三大特性之继承性
2016-08-25 23:50
459 查看
CSS有三大特性,分别是继承性,层叠性,优先级,这里讲解继承性
继承性是指指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性,例如下面的代码,div中包含2个p标签,1个span标签,当给div设置字体颜色为红色时,他的子标签会继承父元素的属性,因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。
显示结果如下:
但是继承也会有其特殊性主要有以下三种:
1> a 标签的字体颜色不能被继承,例如将上面代码的div标签中代码改为如下的代码后,a标签的字体颜色是不会改变的,通过页面的F12可以查看得到,a标签是有一个默认的
color: -webkit-link;字体颜色属性,所以给父元素设置颜色是不能改变a标签字体的颜色
2> h标签字体的大下也是不能被继承的,如下代码给父元素在设置一个字体属性20px,在div中添加一个h2标签,在浏览器中可以发现h2标签中的字体大小不会改变,因为h2标签中也有一个默认的默认的font-size: 1.5em;字体大小属性,
3> div 标签的高度如果不设置由内容来决定(没有内容高度为0),宽度默认由父元素继承过来,下面的代码就很好的演示了div的宽高,在每个div标签后面添加了一个br标签来强制换行,因为如果不使用br标签来强制换行的话,div就会紧紧挨着一起,看不不出来div的高度,第一个div因为没有内容,所以在浏览器上不显示出来,而第二div里面添加了一句话,但是高度是由里面的内容撑出来的,第三个div里面也是一句话,并且在内容当中使用了一个br标签来强制换行,这样就会发现该div的高度会比第二div的高度要高,如果继续向div标签里面添加内容,高度也会随之相应的变高。
继承性是指指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性,例如下面的代码,div中包含2个p标签,1个span标签,当给div设置字体颜色为红色时,他的子标签会继承父元素的属性,因而会显示红色。 在CSS中以text-、font-、line- 开头的属性都是可以继承的。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { color: red; } </style> </head> <body> <div> <p>苹果</p> <p>香蕉</p> <span>葡萄</span> </div> </body> </html>
显示结果如下:
但是继承也会有其特殊性主要有以下三种:
1> a 标签的字体颜色不能被继承,例如将上面代码的div标签中代码改为如下的代码后,a标签的字体颜色是不会改变的,通过页面的F12可以查看得到,a标签是有一个默认的
color: -webkit-link;字体颜色属性,所以给父元素设置颜色是不能改变a标签字体的颜色
<div> <p>苹果</p> <p>香蕉</p> <span>葡萄</span> <a href="#">这是a标签</a> </div>
2> h标签字体的大下也是不能被继承的,如下代码给父元素在设置一个字体属性20px,在div中添加一个h2标签,在浏览器中可以发现h2标签中的字体大小不会改变,因为h2标签中也有一个默认的默认的font-size: 1.5em;字体大小属性,
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { color: red; font-size: 20px; } </style> </head> <body> <div> <p>苹果</p> <p>香蕉</p> <span>葡萄</span> <a href="#">这是a标签</a> <h2>这是h2标签</h2> </div> </body> </html>
3> div 标签的高度如果不设置由内容来决定(没有内容高度为0),宽度默认由父元素继承过来,下面的代码就很好的演示了div的宽高,在每个div标签后面添加了一个br标签来强制换行,因为如果不使用br标签来强制换行的话,div就会紧紧挨着一起,看不不出来div的高度,第一个div因为没有内容,所以在浏览器上不显示出来,而第二div里面添加了一句话,但是高度是由里面的内容撑出来的,第三个div里面也是一句话,并且在内容当中使用了一个br标签来强制换行,这样就会发现该div的高度会比第二div的高度要高,如果继续向div标签里面添加内容,高度也会随之相应的变高。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { background-color: red; } </style> </head> <body> <div></div> <br/> <div>这是div标签</div> <br/> <div>这也是<br/>div标签</div> </body> </html>
相关文章推荐
- 0426-CSS三大特性之继承性
- CSS三大特性---层叠性,继承性,优先级
- CSS 三大特性: 继承性、层叠性、优先级
- CSS三大特性继承性,层叠性,优先级
- H5 24-CSS三大特性之继承性
- Javascript基于对象三大特性(封装性、继承性、多态性)
- CSS的三大特性
- CSS三大特性
- css特性之继承性
- php学习笔记------[php中面向对象三大特性之一[继承性]的应用]
- CSS三大特性之优先级
- 对象的三大特性(封装、继承、多态)之------继承性 + 覆写
- oop三大特性--继承性
- CSS的三大特性——继承,层叠、优先级
- css的三大特性
- css三大特性
- JAVA快速入门-面向对象三大特性-继承性
- 随堂笔记- 面向对象的三大特性之继承性
- Javascript基于对象三大特性(封装性、继承性、多态性)
- CSS的两大特性之继承性和层叠性