【CSS】为什么写的css样式不能如愿实现？因为css三种样式表的优先级不同_内部样式表的优先级总是高于外部样式表-CSDN博客

本文链接：https://blog.csdn.net/m0_50947589/article/details/124208116

css样式表有三种类型，分别是外部样式表、内部样式表和内联样式表。

外部样式表

在设计HTML网页时，首先要对整个外观定义一个CSS文件（扩展名为.css），然后通过链接来使用，一个外部的样式表可以在HTML网页头部通过link元素（<link rel="stylesheet" type="text/css" href="相对路径">）连接到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>
    <link rel="stylesheet" type="text/css" href="css/wbysb.css">
</head>
<body>
    <div></div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
div{
    width: 100px;
    height: 100px;
    background-color: tomato;
    margin: 50px;
}

效果如图：

内部样式表

内部样式表是通过<style></style>写在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>
    <link rel="stylesheet" type="text/css" href="css/wbysb.css">
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果如图：

可以看到外部样式表依然连接在该网页中，但是显示的样式确是由内部样式表设置的。所以我们能够得出结论：内部样式表的优先级高于外部样式表。

内联样式表

内联样式表直接在元素开始标签中定义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>
    <link rel="stylesheet" type="text/css" href="css/wbysb.css">
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div style="width: 50px;height: 50px;background-color: darkgreen;margin: 10px;"></div>
</body>
</html>

效果如图：