CSS基础——继承

    xiaoxiao2021-03-26  57

    1、CSS指层叠样式表 CSS样式表极大地提高了工作效率 2、

    selector{ property:value }

    selector表示属性选择器,property为属性,value为属性值 例如:

    h1{ color:red;font-size:15px; }

    属性大于1个之后,属性之间用分号 隔开;如果指大于1个单词,则要加上引号;

    p{font-family:"sans serif";}

    3、选择器分组 h1,h2,h3,h4,h5,h6{color:red;} 4、继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> <body> <h1> 应用了样式表 </h1> <a>这是一个a标签样式</a> <h2>h2标签</h2> <h3>h3标签</h3> hello css </body> </html>

    MyCss.css文件

    h1,a,h2{ color:blue;font-size:50px; } body{ color:blueviolet; }

    body定义了所有的内容,但是生效的前提是——这个属性没有自己的样式,如图中的“应用了样式表”“这是一个a标签样式”、“h2标签”则是自己定义的样式,他们定义时用逗号隔开;而“h3标签”、“hello css”,都是body中定义的样式。这就是CSS的继承性。 5、派生选择器

    <body> <p><strong>p标签Hello Css</strong></p> <ul> <li><strong>li标签Hello Css</strong></li> </ul> </body>

    如果需要在li标签中加入样式,在p标签中不加样式,就可以用派生选择器的方法实现。先找到外部标签,再写上内部标签,用空格隔开就可以了

    li strong{ color:red; }

    如果定义strong标签

    li strong{ color:red; } strong{ color:rebeccapurple; }

    效果是这样的

    在li标签中已经定义的没有被更改,在p标签中没被定义的样式更改了。这是派生选择器的另一种使用方法。

    转载请注明原文地址: https://ju.6miu.com/read-350048.html

    最新回复(0)