样式表+选择器

css(层叠样式表）:

　　作用：1.渲染页面

　　　　　2.提供工作效率，将html和样式分离

　　和html的整合：

　　　　方式1：内联样式表

　　　　　　　　通过标签的style属性   

　　　　　　　　　　<xxx style="..."/>

 

　　　　方式2：内部样式表

　　　　　　　　通过head的子标签style子标签

　　　　　　　　　　<style type="text/css">
　　　　　　　　　　　　选择器{
　　　　　　　　　　　　　　属性：值；
　　　　　　　　　　　　　　属性1：值1；
　　　　　　　　　　　　　　　}
　　　　　　　　　　</style>

　　　　方式3：外部样式表

　　　　　　　　有一个独立css文件， 后缀名：.css

　　　　　　　　在html中通过link标签导入

　　选择器：

　　　　id选择器：

　　　　　　html元素有id属性且有值,例：

　　　　　　<xx id="d1">

　　　　　　css中通过  #  导入，例：#d1{...}

　　　　

　　　　class选择器：

　　　　　　html元素有class属性且有值，例：

　　　　　　<xx class="c1"

　　　　　　css中通过 . 导入，例：.cl{...}

 

　　　　元素选择器：

　　　　　　css通过标签名（元素名）即可，例xx{...}

 

　　　　属性选择器：

　　　　　　html元素有一个属性且有值,例：

　　　　　<xx nihao="dajiahao">

　　　　　　css中通过元素名[属性=“值”]使用    xx[nihao="dajiahao"]{...}

 

　　　　后代选择器：

　　　　　　在满足第一个选择器的条件下找后代选择器，给满足条件的元素添加样式

　　　　　　选择器   后代选择器{...}  

　　选择器使用小结：

　　　　id选择器：一个元素（标签）

　　　　class选择器：一类元素

　　　　元素选择器：一种元素

　　　　属性选择器：元素选择器的特殊用法

　　　使用注意事项：

　　　　若多个样式作用于一个元素时

　　　　　　不同样式会叠加

　　　　　　相同样式，就近原则　

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            #divid2{
                background-color: red;
            }
        </style>
        <style>
            #divid2{
                background-color: green;
                width: 50%;
            }
        </style>
    </head>
    <body>
        <div id="divid2">样式优先级</div>
    </body>
</html>
样式优先级

　　　　若多个选择器作用于一个元素时

　　　　　　越特殊优先级越高

　　　　　　id选择器>类选择器>元素选择器

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #id1{
                background-color: blue;
            }
            .class1{
                background-color: red;
            }
            span{
                background-color: green;
            }
            span[alt="shuxing"]{
                background-color: yellow;
            }
            #spanid{
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="id1">id选择器</div>
        <div class="class1">class选择器</div>
        <span>元素选择器</span>
        <span>元素选择器</span>
        <span alt="shuxing">元素选择器+属性选择器</span>
        <span class="class1">元素与类-类选择器优先</span>
        <span alt="shuxing" id="spanid">元素与id-id选择器优先</span>
    </body>
</html>
选择器优先级

 

　　　　

　　　　　　

 

posted @ 2020-07-02 14:39  Yisennnn丶  阅读(143)  评论(0)    收藏  举报