CSS_选择器_扩展选择器和CSS_属性1

CSS_选择器_扩展选择器：

1．扩展选择器︰

选择所有元素︰

语法:{}

并集选择器∶

选择器1,选择器2{}

子选择器∶筛选选择器1元素下的选择器2元素

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

父选择器∶筛选选择器2的父元秦选择器1

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

属性选择器:选择元秦名称，属性名=属性值的元秦

语法∶元秦名称[属性名="属性值"]{}

伪类选择器︰选择一些元秦具有的状态

语法:元秦:状态{}

如: <a>

状态∶

link :初始化的状态

visited :被访问过的状态

active :正在访问状态

hover:鼠标悬浮状态

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style type="text/css">
        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>aaaaa</div>

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

    <br> <br> <br>
    <a href="#">黑马程序员</a>
</body>
</html>

 

 

 

 

CSS_属性1：

1．属性

字体、文本

font-size :字体大小

color :文本颜色

text-align :对其方式

line-height :行高，

背景

background：

边框

border:设置边框，符台属性

尺寸

width :宽度

height :高度

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style type="text/css">
        p{
            color: red;
            font-size: 25px;
            text-align: center;
            /*
                border 边框
             */
            border: 1px solid red;
            line-height: 200px;
        }
        div{
            border: 1px solid red;
            /*
                尺寸
             */
            width: 200px;
            height: 200px;
            /*
                背景图片
             */
            background: url("../img/logo.jpg") no-repeat center;
        }
    </style>
</head>
<body>

    <p>传智播客</p>
    <div></div>
</body>
</html>

 

posted @ 2022-11-17 11:31  冰灵IT  阅读(22)  评论(0)    收藏  举报