CSS层叠样式表（CSS）的引入方式及优先级排序

翻滚的胖子
2023-06-21 10:04:32
HTML CSS JavaScript

本文将详细介绍CSS层叠样式表（CSS）的引入方式及优先级排序，旨在帮助小白快速入门学习。

1. CSS引入方式

CSS有三种引入方式，分别是内部样式表、外部样式表和内联样式表。

1.1 内部样式表

内部样式表是指在HTML文档中使用<style>标签定义CSS样式。这种方式适用于只有一个HTML文档需要样式的情况。

以下是一个内部样式表的示例：

<head>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: white;
            text-align: center;
        }
    </style>
</head>

1.2 外部样式表

外部样式表是指将CSS样式定义在一个单独的CSS文件中，然后在HTML文档中通过<link>标签将其引入。这种方式适用于多个HTML文档需要样式的情况，可以避免重复定义样式。

以下是一个外部样式表的示例：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

styles.css文件中的内容如下：

body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}

1.3 内联样式表

内联样式表是指将CSS样式直接定义在HTML标签的style属性中，这种方式适用于只有一个HTML标签需要样式的情况。

以下是一个内联样式表的示例：

<h1 style="color: blue; text-align: center;">This is a heading</h2>

2. CSS优先级排序

当多个CSS样式作用于同一个元素时，会根据CSS选择器的优先级对样式进行排序。

CSS选择器优先级的规则如下：

内联样式表的优先级最高，为1000。
ID选择器的优先级为100。
类选择器、属性选择器和伪类选择器的优先级相同，为10。
元素选择器的优先级最低，为1。

以下是一个CSS优先级排序的示例：

<head>
    <style>
        #header {
            background-color: blue;
        }
        .menu {
            background-color: red;
        }
        p {
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="header" class="menu">
        <p>This is a paragraph.</p>
    </div>
</body>

其中，id选择器的优先级为100，类选择器的优先级为10，元素选择器的优先级为1。因此，上述代码中的p标签会应用类选择器.menu定义的样式，背景颜色为红色。

本文介绍了CSS层叠样式表（CSS）的引入方式及优先级排序。通过本文的讲解，相信读者已经对CSS有了更深入的理解。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com