CSS基础——继承

小咪咪 2022-07-12 10:06 152阅读 0赞

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; }

![这里写图片描述][SouthEast]  
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; }

![这里写图片描述][SouthEast 1]

如果定义strong标签

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

效果是这样的  
![这里写图片描述][SouthEast 2]

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

[SouthEast]: /images/20220710/16328f46452e4b80ab001b4397e6044a.png
[SouthEast 1]: /images/20220710/3f79ce21594749dd9d7e54b7daabd4de.png
[SouthEast 2]: /images/20220710/93e871f856e4461ca28e56c63a83c0b8.png