在HTML中引入CSS样式表的方法主要有四种：内联样式、内部样式表、外部样式表和导入样式表，下面将详细介绍每种方法的特点和使用场景。
内联样式
内联样式是将CSS代码直接写在HTML元素中的style属性里，这种方式适用于样式较少且仅针对单个元素的情况。
<p style="color: red; font-size: 16px;">这是一段红色文字。</p>
内联样式的优点是简单快捷，可以直接在HTML元素中定义样式，但是缺点也很明显，就是不利于样式的复用和维护。
内部样式表
内部样式表是将CSS代码写在HTML文档的<head>标签内的<style>标签中，这种方式适用于样式较少且仅针对当前页面的情况。
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一段红色文字。</p>
</body>
</html>
内部样式表的优点是可以在HTML文档中集中管理样式，但是仍然不利于样式的复用。
外部样式表
外部样式表是将CSS代码写在一个单独的.css文件中，然后在HTML文档中通过<link>标签引入，这种方式适用于样式较多且需要在多个页面中复用的情况。
首先创建一个名为style.css的文件，内容如下：
p {
color: red;
font-size: 16px;
}
然后在HTML文档中引入该样式表：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <p>这是一段红色文字。</p> </body> </html>
外部样式表的优点是可以实现样式的复用和维护，是实际开发中最常用的方式。
导入样式表
导入样式表是通过@import语句在CSS中引入其他CSS文件，这种方式适用于需要在不同CSS文件中共享样式的情况，需要注意的是，@import语句必须放在<style>标签内的CSS规则之前。
首先创建一个名为common.css的文件，内容如下：
p {
color: red;
font-size: 16px;
}
然后在另一个CSS文件中导入common.css：
@import "common.css";
最后在HTML文档中引入这个CSS文件：
<!DOCTYPE html>
<html>
<head>
<style>
@import "style.css";
</style>
</head>
<body>
<p>这是一段红色文字。</p>
</body>
</html>
导入样式表的优点是可以实现CSS样式的模块化和复用，但是在实际开发中使用较少，因为浏览器对@import语句的支持不如<link>标签好。
相关问题与解答
Q1: 使用外部样式表时，为什么推荐将<link>标签放在<head>标签内？
A1: 将<link>标签放在<head>标签内可以让浏览器尽快加载并解析CSS样式，从而提高页面的渲染速度，如果将<link>标签放在<body>标签内，可能会导致页面内容先于样式加载，出现短暂的无样式状态。
Q2: 如何在HTML中引入多个CSS样式表？
A2: 在HTML中引入多个CSS样式表可以通过多个<link>标签或多个<style>标签实现。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style1.css"> <link rel="stylesheet" href="style2.css"> </head> <body> ... </body> </html>
或者：
<!DOCTYPE html>
<html>
<head>
<style>
@import "style1.css";
@import "style2.css";
</style>
</head>
<body>
...
</body>
</html>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/284718.html
微信扫一扫 