在 HTML 中，CSS 可以通过不同的标签和方式引入，下面为你详细介绍相关的标签及使用方法。
<style> 标签
● 作用： <style> 标签用于在 HTML 文件内部定义 CSS 样式，也就是创建内部样式表。使用这个标签可以将样式规则直接嵌入到 HTML 文件的 <head> 部分，方便对当前页面进行样式设置。
● 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph with default styles.</p>
</body>
</html>
● 代码解释：在上述示例中， <style> 标签位于 <head> 标签内，其中定义了 body 元素的背景颜色为浅蓝色， h1 元素的文本颜色为白色且居中显示。
<link> 标签
● 作用： <link> 标签主要用于引入外部的 CSS 文件，将 HTML 文件和 CSS 文件分离，便于代码的维护和复用。通过该标签可以将一个或多个 CSS 文件关联到 HTML 文件中。
● 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>External CSS in Action</h1>
<p>Styles are loaded from an external file.</p>
</body>
</html>
假设 styles.css 文件内容如下：
body {
background-color: lightgreen;
}
h1 {
color: purple;
}
● 代码解释： <link> 标签的 rel 属性指定了链接的关系为 stylesheet ，表示这是一个样式表文件； href 属性指定了外部 CSS 文件的路径。在这个例子中， styles.css 文件中的样式会应用到 HTML 文件中的相应元素上。
<style scoped> （部分浏览器支持）
● 作用： <style scoped> 标签是一个实验性的特性，用于将样式的作用域限定在包含该 <style> 标签的父元素及其子元素内。也就是说，这些样式只会影响到该标签所在的元素及其后代元素，不会对页面的其他部分产生影响。
● 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped CSS Example</title>
</head>
<body>
<div>
<style scoped>
p {
color: red;
}
</style>
<p>This paragraph will be red.</p>
</div>
<p>This paragraph will have default color.</p>
</body>
</html>
● 代码解释：由于 <style scoped> 的存在，只有 <div> 内部的 <p> 元素文本颜色会变为红色，而外部的 <p> 元素不受影响。不过需要注意的是，该特性并非所有浏览器都支持，使用时要考虑兼容性问题。
<style> 标签结合 @import （不推荐频繁使用）
● 作用：在 <style> 标签内部可以使用 @import 规则来引入其他 CSS 文件。不过这种方式在性能上可能不如 <link> 标签，因为它会增加额外的 HTTP 请求，并且在某些情况下可能会导致样式加载延迟。
● 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@import Example</title>
<style>
@import url('imported.css');
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Using @import in CSS</h1>
<p>Styles from imported file are applied.</p>
</body>
</html>
假设 imported.css 文件内容如下：
h1 {
text-decoration: underline;
}
● 代码解释：在 <style> 标签中使用 @import url('imported.css'); 引入了 imported.css 文件，该文件中的样式会与 <style> 标签内其他样式一起作用于 HTML 元素。这里 h1 元素会有下划线装饰。