CSS 在同一个HTML页面中使用多个CSS样式表

在本文中，我们将介绍如何在同一个HTML页面中使用多个CSS样式表。使用多个样式表可以使页面更加灵活，可以根据不同的需求加载不同的样式表。

阅读更多：CSS 教程

使用`<link>`标签引入样式表

在HTML中，我们可以使用<link>标签来引入外部的样式表文件。要使用多个样式表，只需要在页面的<head>标签中添加多个<link>标签即可。

示例：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>

在上述示例中，我们使用了两个<link>标签分别引入了style1.css和style2.css两个样式表文件。页面会依次加载这两个样式表，并应用它们中定义的样式规则。

样式表的加载顺序

当页面加载时，浏览器会按照<link>标签的顺序依次加载样式表。如果多个样式表具有相同的选择器和样式规则，则最后一个样式表中的规则会覆盖前面的规则。

示例：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style1.css">
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <h1 class="title">这是一个标题</h1>
    <h1 class="title">这是另一个标题</h1>
</body>
</html>

在上述示例中，我们使用了两个具有相同选择器.title的样式表。假设style1.css中定义了将标题颜色设置为红色的规则，而style2.css中定义了将标题颜色设置为蓝色的规则。由于style2.css在后面引入，所以最终页面上的标题会显示为蓝色。

使用`<style>`标签定义内嵌样式表

除了可以引入外部的样式表文件，我们还可以使用<style>标签在HTML页面中定义内嵌样式表。每个<style>标签中的样式规则只对标签所在的页面起作用。

示例：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style1.css">
    <style>
        .title {
            color: green;
        }
    </style>
</head>
<body>
    <h1 class="title">这是一个标题</h1>
</body>
</html>

在上述示例中，我们在<style>标签中定义了一个将标题颜色设置为绿色的规则。由于这个规则位于style1.css后面，所以最终页面上的标题会显示为绿色。

使用`@import`引入样式表

除了使用<link>标签引入外部样式表，我们还可以使用@import规则在样式表中引入其他样式表。通过这种方式，我们可以在同一个样式表中引入多个其他样式表文件。

示例：

/* style1.css */
@import url("style2.css");

在上述示例中，我们在style1.css中使用@import规则引入了style2.css样式表文件。这样在使用<link>标签引入style1.css时，style2.css也会被加载并应用到页面上。

总结

在同一个HTML页面中使用多个CSS样式表可以使页面更加灵活。我们可以使用<link>标签引入外部样式表文件，使用<style>标签定义内嵌样式表，以及使用@import规则引入其他样式表。同时，我们还需要注意多个样式表的加载顺序以及规则的覆盖关系。通过合理的使用多个样式表，我们可以轻松地控制页面的样式，并根据不同的需求加载不同的样式表。