/注释/

一、基本选择器

1. 标签选择器 span{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span{
                    font-size:20px;
                    color:red;
                }
        </style>
    </head>
    <body>
        <span>文本内容</span>
    </body>
</html>

2.ID选择器 #sp1{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #sp1{
                    font-size:20px;
                    color:red;
                }
            #sp2{
                font-size: 20px;
                color: blue;
            }
        </style>
    </head>
    <body>
        <span id="sp1">文本内容</span>
    </br>
        <span id="sp2">好好学习</span>
    </body>
</html>

3.类选择器 .sp1{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .sp1{
                    font-size:20px;
                    color:red;
                }
            .sp2{
                font-size: 20px;
                color: blue;
            }
        </style>
    </head>
    <body>
        <span class="sp1">文本内容</span>
    </br>
        <span class="sp2">好好学习</span>
    </body>
</html>

4.通配选择器

*{}

注：通配选择器<标签选择器<类选择器<ID选择器<行内式

!importan提示优先级

div：块级元素，独占一行，可以设置宽高
span：行内元素，一行可以显示多个，设置宽高无效

二、复合选择器

1.后代选择器

选择器1 选择器2

2.子代选择器

选择器1>选择器2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .div1>span{
                font-size: :20px;
                color:red;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <span>文本内容</span>
            <div class="div2">
                <span>这是嵌套内容</span>
            </div>
        </div>
    </body>
</html>

3.交集选择器选择器1.选择器2{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            span.cls1{
                font-size: :20px;
                color:red;
            }
        </style>
    </head>
    <body>
        <div >
            <span class="cls1">文本内容</span>
        </div>
        <div class="cls1">
            <span class="sp2">这是嵌套内容</span>
            <p class="cls1">ccccc</p>
        </div>

    </body>
</html>

4.并集选择器选择器1，选择器2{}

div span转化

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .sp1{
                    font-size:20px;
                    background-color: black;
                    color:red;
                    display: inline-block;
                    height: 100px;
                }
            .sp2{
                font-size: 20px;
                color: blue;
                display: inline-block;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <span class="sp1">文w本内容</span>
        <span class="sp2">好好学习</div>
    </body>
</html>

三、超链接

a:link {color:#FF0000;} /* 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 */

四、盒子

border padding会改变盒子大小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                width: 90px;
                border-bottom-color:black ;
                border-bottom-style: solid;
                height: 100px;
                background-color:red ;
                margin-bottom:5px ;
                padding-top: 10px;
                padding-left: 10px;
            }
            .div2{
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            span{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <span>内容</span>
        </div>
        <div class="div2">
            
        </div>
    </body>
</html>

overflow: hidden; - 设置边框

设置行高，水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                line-height: 250px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    </body>
</html>

css