CSS 层叠样式表_css层叠样式表怎么做-CSDN博客

本文链接：https://blog.csdn.net/m0_52555753/article/details/127261152

主要作用：修饰各种各样的标签

行内样式表（inline style）

<img width="300" src="/static/images/background.jpg">
<img src="/static/images/background.jpg" style="width: 300px;">

两种等价的写法，由于定义在标签上，我们只能改变一个标签的样式

style里面最好添加单位，因为有多种单位 vh,vm,px,图片的属性在html5里面默认是px，所以可以不用写

如果有不理解的地方，可以上MDN官网进行搜索

我们如果想要把所有的图片换成统一的格式，就需要使用内部样式表

我们需要在head里面，写一个 style

<!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 type="text/css">
        img {
            width: 300px;
            height: 200px;
            border-radius: 10%;
        }
    </style>
</head>
<img src="/static/images/background.jpg">
<img src="/static/images/background.jpg">
</body>

</html>

内部样式表配合选择器的一个使用

<!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 type="text/css">
        img {
            width: 300px;
            height: 200px;
            border-radius: 10%;
        }

        p {
            width: 50px;
            height: 50px;
            background-color: lightgreen;
        }

        .blue-p {
            background-color: lightblue;
        }

        .big {
            width: 70px;
        }
    </style>
</head>
<img src="/static/images/background.jpg">
<img src="/static/images/background.jpg">

<p class="blue-p">1</p>
<p class="big">2</p>
<p class="blue-p big">3</p>
<p>4</p>
</body>

</html>

额外补充

div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
}

margin-bottom 表示下面预留的距离

并且内部样式表可以分开定义，不一定非要写到一个style里面

好处是定义一个，可以应用到多个标签上

如果想要让样式应用到多个页面就需要使用外部样式表

我们将原先的css样式放入一个css文件，然后动态链接

<!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>
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">

</head>
<img src="/static/images/background.jpg">
<img src="/static/images/background.jpg">

<p class="blue-p">1</p>
<p class="big">2</p>
<p class="blue-p big">3</p>
<p>4</p>
</body>

</html>

选择器

标签选择器（元素选择器）

额外补充

P标签与div标签的区别，一个自带行间距，一个没有行间距

id选择器

id的好处，同一个页面内的id是不重复的

div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
}

p {
    width: 50px;
    height: 70px;
    background-color: lightgreen;
}

#mydiv {
    background-color: lightcoral;
}

类选择器

用的最多的选择器，每个标签都可以定义一个class属性

我们用空格隔开若干个class 属于很多类，这个是与id根本的区别（一般都只能具有唯一的ID）

div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
}

p {
    width: 50px;
    height: 70px;
    background-color: lightgreen;
}

#mydiv {
    background-color: lightcoral;
}

.red-tag {
    background-color: lightcoral;
}

.big-tag {
    width: 150px;
    height: 120px;
}

<!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>
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
</head>

<body>
    <div class="red-tag big-tag">div 1</div>
    <div id="mydiv">div 2</div>
    <div class="red-tag">div 3</div>
    <div>div 4</div>

    <p>p 1</p>
    <p id="myp">p 2</p>
    <p>p 3</p>
    <p>p 4</p>
</body>


</html>

伪类选择器

用于定义特殊状态


.effect:hover {
    transform: scale(1.1);
    transition: 200ms;
}

#mydiv:hover {
    background-color: lightcoral;
    transition: 200ms;
}

/* 表示链接没有点击之前的状态 */
a:link {
    color: red;
}

/* 点击之后的状态 */
a:visited {
    color: green;
}

/* 鼠标悬浮状态 */
a:hover {
    color: orange;
}

/* 鼠标点击的状态 */
a:active {
    color: purple;
}

聚焦光标所在的元素

位置类的状态选择器

/* 看成一个函数返回一个bool值 ,判断每一个p是不是父节点的第二个儿子 把冒号后面的看作一个状态，遍历每一个p标签，看一下是否满足*/
p:nth-child(3n) {
    background-color: lightblue;
}

目标选择器

    自动定位到第六个标签
    <a href="#myp">我的标签</a>
    <p>p 1</p>
    <p>p 2</p>
    <p>p 3</p>
    <p>p 4</p>

    <p>p 5</p>
    <p id="myp">p 6</p>
    <p>p 7</p>
    <p>p 8</p>

p:target {
    transform: scale(1.2);
    color: orange;
    transition: 2s;
}

当我们的某个标签被链接到之后，链接后面跟一个#id，如果存在当前id的话，我们就会触发这个状态，也就是说只要这个元素被指向，就会出发这个状态

同级别首先看顺序，一般越具体，权重越高，权重高者优先，权重最高的是行内样式表

也可以用！important 覆盖所有（尚方宝剑）