CSS样式继承性
2019-11-27 22:10
916 查看
CSS样式继承介绍
- 外层元素身上的样式会被内层元素所继承。
- 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式。
- 并不是所有的样式都能够继承,只有文本与字体样式属性才能够被继承,其余的样式属性不可以被继承。
CSS样式继承实践
外层元素身上的样式会被内层元素所继承,这句话的实践。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>继承性</title> <style> body{ color: red; } </style> </head> <body> <div> <h2>微笑是最初的信仰</h2> <p>微笑是最初的信仰</p> </div> </body> </html>
结果图
当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式,这句话的实践。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>继承性</title> <style> body{ color: red; font-size: 18px; } div{ color: springgreen; } </style> </head> <body> <div> <h2>微笑是最初的信仰</h2> <p>微笑是最初的信仰</p> </div> </body> </html>
结果图
并不是所有的样式都能够继承,只有文本与字体样式属性才能够被继承,其余的样式属性不可以被继承,这句话的实践。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>继承性</title> <style> body{ color: red; font-size: 18px; } div{ color: springgreen; border: 1px solid red; } </style> </head> <body> <div> <h2>微笑是最初的信仰</h2> <p>微笑是最初的信仰</p> </div> </body> </html>
结果图
相关文章推荐
- 好程序员HTML5培训教程-css样式的继承性、层叠性 、优先级
- css样式中的"继承性"是什么意思?
- CSS样式----CSS的继承性和层叠性(图文详解)
- CSS样式----CSS样式表的继承性和层叠性(图文详解)
- CSS样式基本知识
- css样式float造成的浮动“塌陷”问题的解决办法
- CSS样式
- CSS样式
- 如何根据屏幕大小改变class的css样式
- jQuery源码解析(4)—— css样式、定位属性
- Java实验2 类的继承性
- CSS样式四--布局模型
- CSS样式层叠的问题
- CSS样式中的重要性。
- css样式学习记录
- CSS样式属性分类
- 利用脚本脚本实现修改CSS样式
- javascript之DOM编程改变CSS样式(简易验证码显示)
- CSS样式中的层叠问题
- bootstrap学习总结-css样式设计(二)