CSS_002_v1

2021-12-07 21:32:16 阅读：128 来源： 互联网

标签：v1 color 100px 002 background div Document 选择器 CSS

/*
时间：2021/12/07
功能：CSS
目录: 
    一: 引入
    二: 选择器
        1 标签
        2 类
        3 层级
        4 id
        5 组
        6 伪类
*/

一: 引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 内嵌式 -->
    <style>
        a{
            color: green;
        }

        div{
            width: 100px;
            width: 100px;
            background: orange;
        }
    </style>

    <!-- 外链式 -->
    <link rel="stylesheet" href="css/main.css">
    
</head>
<body>
    <!-- 行内式 -->
    <p style="color: red;"> 段落标签</p>
    <div>
        123
    </div>

    <!-- 内嵌式 -->
    <a href="http://www.bing.com">bing</a>
    <h1> 一级标题 </h1>

    <!-- 外链式 -->
    <h2> 二级标题 </h2>

</body>
</html>

h2{
    color: skyblue;
}

1 : 说明文件 main.css

二: 选择器
　　1 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 标签选择器 */
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p> hi </p>
    <p> hello </p>
</body>
</html>

　　2 类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 类选择器 */
        .myp{
            color: red;
        }
        .myby{
            background: blue;
        }
    </style>
</head>
<body>
    <p> xxx </p>
    <p class="myp"> 段落标签 1</p>
    <p class="myp myby"> 段落标签 2</p>
</body>
</html>

　　3 层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 层级选择器 -->
    <style>
        div div {
            color: green;
        }

        div .box{
            color: blue;
        }

        /* div div p{
            color: red;
        } */

        div p{
            color: aqua;
        }


    </style>

</head>
<body>
    <div>
        哈哈
    </div>

    <div>
        <div> 嘻嘻</div>
        <div class="box"> 哈哈</div>
        <div>
            <p> hi</p>
        </div>
    </div>
</body>
</html>

　　4 id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #myid1{
            color:blue;
        }
    </style>
</head>
<body>
    <p id="myid1"> 哈哈 </p>
    <p id="myid1"> 嘻嘻 </p>
</body>
</html>

　　5 组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 组选择器 */
        .box1, .box2, .box3{
            width: 100px;
            height: 100px;
        }

        /* 追加样式 */
        .box1{
            background: red;
        }
        .box2{
            background: gray;
        }
        .box3{
            background: blue;
        }
    
    </style>
</head>
<body>
    <div class="box1"> </div>
    <div class="box2"> </div>
    <div class="box3"> </div>
</body>
</html>

　　6 伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: green;
        }
        /* 伪类选择器: 给其他选择器添加效果 */
        div:hover{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>

</body>
    <div> 哈哈 </div>
</html>

标签：v1,color,100px,002,background,div,Document,选择器,CSS
来源： https://www.cnblogs.com/huafan/p/15658915.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS_002_v1