CSS扩展选择器和CSS_属性1

CSS扩展选择器

1.选择所有元素：

　　语法：{}

2.并集选择器：

　　选择器1，选择器2{}

3.子选择器：筛选选择器1元素下的选择器2元素

　　语法：选择器1 选择器2{}

4.父选择器：筛选选择器2的父元素选择器1

　　语法：选择器1 > 选择器2{}

5.属性选择器：选择元素名称，属性名=属性值的元素

　　语法：元素名称[属性名="属性值"]{}

6.伪类选择器：选择一些元素具有的状态

　　语法：元素：状态{}

　　如：<a>

　　　　状态：

　　　　　　link：初始化的状态

　　　　　　visited：被访问过的状态

　　　　　　active：正在访问的状态

　　　　　　hover：鼠标悬浮的状态

<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color: red;
        }

        div > p{
            border: 1px solid;
        }

        input[type='text']{
            border: 5px solid;
        }

        a:link{
            color: pink;
        }

        a:hover{
            color: green;
        }

        a:active{
            color: yellow;
        }

        a:visited{
            color: red;
        }
    </style>
</head>
<body>

    <div>
        <p>张三</p>
    </div>

    <p>李四</p>

    <div>王五</div>

    <input type="text">
    <input type="password">

    <br>
    <a href="#">赵六</a>


</body>

 

 

 

 

 

 

 

 

 

CSS_属性1

1.字体、文本

　　font-size：字体大小

　　color：文本颜色

　　text-align：对其方式

　　line-height：行高

2.背景

　　background：

3.边框

　　border：设置边框，符合属性

4.尺寸

　　width：宽度

　　height：高度

<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <style>
        p{
            color: red;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            /*
                border边框
             */
            border: 1px solid red;
        }
        div{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            /*
                 背景
             */
            background: url("img/login_logo.png") no-repeat center;
        }
    </style>
</head>
<body>
    <p>张三</p>
    <div>王五</div>
</body>

 

 

posted @ 2022-08-01 15:34  魔光领域  阅读(24)  评论(0)  编辑  收藏  举报