1、继承性
层叠式的第一个特性:继承性
继承性:给祖先设置属性,后代会继承祖先里的某些属性(并不是全部属性都继承过来)
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 300px; height: 300px; background: skyblue; border: 1px solid red; color: green; font-size: 30px; font-weight: bold; } </style> </head> <body> <div class="box"> <h2>这是标题</h2> <p>这是段落</p> <p>这是段落</p> </div> </body> </html>
←给名为box的div设置属性,它的后代,也就是图里的h2和p标签就会继承box的一些属性。
css继承性:后代元素能继承来自祖先元素的文字样式,不能继承盒子样式。
通过控制台看样式来源↓
效果图↓
可以从效果图里看出来,文字继承了祖先的文字属性。
继承性这个特性很好,可以将整体的文字样式写在最祖先body,后面的标签自动去继承,如果有特殊属性,只要把这个标签单独写就可以。