597 选择器扩展_选择器 and 598 属性1

扩展选择器：
            1. 选择所有元素：
                 语法： *{}
            2. 并集选择器：
                 选择器1,选择器2{}
            
            3. 子选择器：筛选选择器1元素下的选择器2元素
                 语法：  选择器1 选择器2{}
            4. 父选择器：筛选选择器2的父元素选择器1
                 语法：  选择器1 > 选择器2{}
            5. 属性选择器：选择元素名称，属性名=属性值的元素
                 语法：  元素名称[属性名="属性值"]{}

　　　6.伪类选择器：选择一些元素具有的状态
                 语法： 元素:状态{}
                 如： <a>
                     状态：
                         link：初始化的状态
                         visited：被访问过的状态
                         active：正在访问状态
                         hover：鼠标悬浮状态

6种选择器案例演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            /*基本选择器*/
            color: red;
        }
        div{
            color: blue;
        }
        .class01{
            color: chartreuse;
        }
    </style>

    <style>
        div p{
            /*元素选择器*/
            color: gray;
        }
        div > p {
            /*累选择器*/
            border: 1px solid;
        }
    </style>
    <style>
        div p{
            /*子选择器*/
            color: gray;
        }
        div > p {
            /*父选择器*/
            border: 1px solid;
        }

        input[type='text']{
            /*属性选择器*/
            border: 5px solid;
        }
        /*伪类选择器*/
        a:link{
            /*初始化的状态*/
            color: red;
        }
        a:hover{
            /*鼠标悬浮状态*/
            color: yellow;
        }
        a:active{
            /*正在访问状态*/
            color:blue;
        }
        a:visited{
            /*被访问过的状态*/
            color: green;
        }

    </style>
</head>
<body>  <!--用于基本选择器-->
        <div id ="div1">哈嗨</div>
        <div>哈嗨</div>
        <p class="class01"></p>

        <!--用于扩展选择器-->
        <div>
            <p>你好你好</p>
        </div>
        <!--用于元素选择器-->
        <p>我很好你你好嘛</p>
        <!--用于类选择器-->
        <p>我很好，你好嘛</p>

        <!--用于子选择器-->
        <div>
            <p>你好你好</p>
        </div>
        <!--用于父选择器-->
        <p>我很好，你好嘛</p>
        <!--用属性选择器-->
        <input type="text">
        <input type="password">
        
        <br><br><br><br><br>
        <!--用于伪类选择器-->
        <a href="#">你好吗</a>
        </body>
</body>
</html>

CSS的属性

　　常见属性：

　　　　1.字体、文本

　　　　　　font-sizr:字体大小

　　　　　　color:文本颜色

　　　　　　text-aling:对其方式

　　　　　　line-height:行高

　　　　2.背景

　　　　　　background  

　　　　3.边框

　　　　4.尺寸

　　　　　　width:宽度

　　　　　　height:高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*文本颜色  */
            color: red;
            /*字体大小*/
            font-size: 30px;
            /*对齐方式*/
            text-align: center;
            /*行高*/
            line-height: 100px;
            }
        div{
            /*边框线1px 颜色为红色*/
            border: 1px solid red;
            /*尺寸*/
            height: 450px;
            width: 450px;
            /* 背景导入图片 不重复显示 居中 */
            background:url("img/login_bg.png") no-repeat center;
        }
    </style>
</head>
<body>
    <p>我丢脑瓜子嗡嗡的哦</p>

    <div>
        vwl4ufhdsfgb
    </div>

</body>
</html>

posted @ 2022-10-22 16:04  ja不会va  阅读(106)  评论(0)    收藏  举报