css三种书写方法（优先级），css选择器（权重值）

憨憨404

已于 2023-12-12 18:14:49 修改

阅读量168

点赞数

分类专栏： HTML + CSS + CSS3（页面布局）文章标签： css html 前端

于 2022-11-14 19:47:09 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/127853211

版权

HTML + CSS + CSS3（页面布局）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

css三种书写方法：

内部样式表，外部样式表，行内样式表

</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">
        <link rel="stylesheet" href="../css/two.css">
        <title>Document</title>


        <!-- css 层叠样式表，美化网页 -->
        <!-- 
            就近原则 ：优先级：
                即：行内>内部和外部，内部和外部看书写顺序，靠近下边与否。即：自上而下运行
                eg：h5标签中已经验证过了
        -->
        
        1.内部样式表 style
        2.外部样式表 link 到 css
        3.行内样式表 style=""
    
        纵向排列的标签可以设置宽高，横向标签不可以设置宽高eg：span标签，
        但是可以解决，元素类型
    
        <style>
            /*  */
            p{
                color: red;
                font-size: 50px;
            }
            div{
                color: green;
                font-size: 50px;
            }
            h1{
                color: blue;
                font-size: 50px;
            }
            h5{
                color: red;
                background-color:rebeccapurple;
                font-size: 50px;
            }
    
        </style>
</head>
<body>
    <p>我是red</p>
    <h3>我是green</h3>
    <h1>我是blue</h1>

    <div>我是外部样式表，给我个颜色</div>

    <!-- 了解行内样式表 -->
    <h5 style="color: yellow;background-color: azure; font-size: 40px;" >
        我是行内样式表，请给我个黄色吧，我顺便也测试了下代码的优先级
    </h5>

</body>

效果图：

优先级：就近原则。代码自上而下运行

行内样式表优先级最高
内部样式表和外部样式表的优先级和书写顺序有关，后写的优先级高（顺序是代码的从上到下的顺序）
注意：如果同时使用了多个样式表，被覆盖的只是相同属性的样式。

css选择器：

1.标签选择器

2.id选择器

id名字具有唯一性。不能用多个，反观class可以多次重复使用

3.class 类选择器

一个类名可以多次使用

注意：一个标签上 class 只能用一次

4.包含选择器

.cc i p {

color: red;

}

后代: 空格常用

子代： > 不能越级查找

5.群组选择器

p1,.p2,.p3,.p4{

color: red;

font-size: 50px;

}

6.通配符选择器：全部的意思

清边距

margin: 0;

padding: 0;

}

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #pp {
            color: aquamarine;
            font-size: 50px;
        }
        .cc {
            color: aquamarine;
            font-size: 50px;
        }
        .bb {
            background-color: blue;
        }
        /* 也可以如此：太过严谨，不建议
            .cc>i>p{

            } 
        */
        .cc i p {
            color: red;

        }
        .p1,.p2,.p3,.p4{
            color: red;
            font-size: 50px;
        }
        *{
            margin: 0;
            padding: 0;

            width: 1000px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <p id="pp">
        id选择器
    </p>
    <h4 class="cc bb">
        class选择器
        儿子：
        <i>
            <p>孙子</p>
        </i>
    </h4>
    <!-- 群组 -->
    <p class="p1">
        秦时明月汉时关，
    </p>
    <p class="p2">
        万里长征人未还。
    </p>
    <p class="p3">
        但使龙城飞将在，
    </p>
    <p class="p4">
        不教胡马度阴山。
    </p>
</body>

效果图: