在 HTML 中使用多个样式表可以通过使用多个 <link>
元素来实现。每个 <link>
元素都可以链接一个外部样式表文件或者内部样式表。例如:
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
</head>
以上代码中,<head>
元素中包含了两个 <link>
元素,分别链接了 style1.css
和 style2.css
两个外部样式表文件。
此外,还可以使用内部样式表来定义多个样式表。内部样式表可以通过在 <head>
元素中使用 <style>
元素来实现。例如:
<head>
<style>
/* 第一个样式表 */
h1 {
color: red;
}
/* 第二个样式表 */
p {
font-size: 16px;
}
</style>
</head>
以上代码中,<head>
元素中包含了一个 <style>
元素,内部定义了两个样式表,分别针对 <h1>
和 <p>
元素。
需要注意的是,当多个样式表定义了相同的样式规则时,后面的样式表会覆盖前面的样式表。因此,在定义多个样式表时,需要注意样式规则的顺序。