在向文档中添加CSS时，您可以选择多种方法。但是，有一种方法是最常见的。
有4种方法可以将CSS添加到网页：内联声明，嵌入到文档的头部，链接到外部CSS文件，导入CSS文件。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
内联样式
使用内联样式时，样式表信息将直接应用于HTML元素。无需定义样式一次，然后对元素的所有实例（例如<p>标记）应用样式，而是将样式直接添加到要应用样式的特定元素中。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
例如：文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
<pstyle="color:olive;font-size:24px;">HTMLStyleswithCSS</p>
虽然内联样式可以是向HTML文档添加样式的快速便捷方法，但应谨慎使用此方法。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
在整个网站上添加内联样式会使维护变得更加困难。如果样式已应用于站点中的许多页面，则微小的更改可能成为一项重大任务。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
嵌入式样式
将所有CSS信息添加到文档的一部分（通常是顶部）。这允许您从单个位置设置页面上任何元素的样式。为此，请将CSS信息嵌入到文档头部的<style>标签中。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
例如，将以下代码放在HTML文档的<head>标记之间：文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
<style>
body {
background-color: darkslategrey;
color: azure;
font-size: 1.1em;
}
h1 {
color: coral;
}
#intro {
font-size: 1.3em;
}
.colorful {
color: orange;
}
</style>下面是该代码在HTML文档中的位置示例：文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
body {
background-color: darkslategrey;
color: azure;
font-size: 1.1em;
}
h1 {
color: coral;
}
#intro {
font-size: 1.3em;
}
.colorful {
color: orange;
}
</style>
</head>
<body>
<h1>Embedded Styles</h1>
<p id="intro">Allow you to define styles for the whole document.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html>外部样式
外部样式表是将样式应用于网站的最常用方法。大多数新式网站使用外部样式表将站点范围的样式应用于整个网站。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
外部样式是指创建包含所有样式信息的单独文件。然后，此文件将从任意数量的HTML页面链接到您喜欢的页面。这通常是整个网站。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
要将外部样式表添加到网页，请使用<link>标记，在属性中提供样式表的URL以及。hrefrel="stylesheet"文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
对于以下示例，我从上面的（嵌入的）示例中获取样式，将它们移动到外部样式表，然后链接到该文件。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<link rel="stylesheet" href="/css/tutorial/example.css">
</head>
<body>
<h1>Embedded Styles</h1>
<p id="intro">Allow you to define styles for the whole document.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html>因此，您可以看到HTML文件不再包含任何实际的CSS代码。CSS代码位于外部文件中。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
导入样式
还可以使用CSS规则导入外部样式表。@import文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
为此，请使用<style>标记。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
可以使用以下任一语法：文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
<style>
@import "imported_style_sheet.css";
@import url("imported_style_sheet.css");
</style>在这里，我们使用与上一示例中相同的样式表，但这次我们使用规则导入样式表。@import文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<style>
@import "/css/tutorial/example.css";
</style>
</head>
<body>
<h1>Embedded Styles</h1>
<p id="intro">Allow you to define styles for the whole document.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html>请注意，此方法可能会影响性能，使用第一种方法（即使用<link>标记）通常更有效。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
但是，也可以从外部样式表本身内部使用该规则（以便将另一个样式表导入该样式表），而不会产生相同的性能问题。@import文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
您不仅限于将样式应用于文档的一种方法。如果需要，可以组合所有三种方法。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/251.html
大多数现代网站将外部样式用于其大多数（如果不是全部）样式。
但是，有许多有效的理由可以解释为什么他们可能还需要使用一种或两种其他方法。
评论