层叠样式表/将 CSS 应用于 HTML 和 XHTML
CSS 可以通过三种方法应用于 HTML 或 XHTML：链接、嵌入和内联。在链接方法中，CSS 存储在单独的文件中，而不是直接存储在 HTML 页面中。在嵌入方法中，CSS 作为 HTML 页面的一部分存储在页眉部分。在内联方法中，CSS 直接存储在 HTML 标签的 style 属性中，例如 <div style="font-weight:bold">粗体字</div>。
最简洁的方法可能是链接方法，但其他方法在网页原型设计阶段很方便快捷。嵌入和内联方法不需要使用单独的文件。内联方法可以省去考虑文档应该使用哪些 CSS 类别的麻烦。对于一个更大的网站，其中多个网页共享相同的样式，并且样式应该由用户自定义，链接方法是唯一可行的方法。
以下部分将详细介绍这些方法。
使用链接的 CSS，CSS 规则存储在单独的文件中。要从 HTML 页面引用该文件，请将 link 元素（以及 XHTML 中的结束元素）添加到 head 元素中，如下例所示，该示例假设样式表存储在名为“style.css”的文件中。
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
示例中的 link 元素具有三个属性。第一个是 rel，它告诉浏览器链接目标的类型。第二个是 type，它告诉浏览器样式表的类型。第三个是 href，它告诉浏览器在哪个 URL 下找到样式表。在示例中，URL 是相对的，但也可以是绝对的。
包含单个规则的“style.css”只包含以下文本
p {
font-weight:bold;
}
这告诉浏览器段落 (p) 元素中的文本应该以粗体显示。
示例渲染
将被格式化的文本。
因此，完整 HTML 文档的源代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Text that will be formatted.</p>
</body>
</html>
动态生成的网页可能需要使用嵌入式 CSS，但这应该尽量减少。即使在动态页面中，任何多个页面共有的 CSS 通常也应该移到链接的样式表中。
嵌入式 CSS 是位于需要样式的 HTML 文档页眉中的 CSS。例如，我们希望本 HTML 文档中的文本以粗体显示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Web Page</title>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
CSS 可以放在文档的页眉部分
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
}
</style>
</head>
CSS 位于 style 元素中。将元素的 type 属性设置为 text/css 告诉浏览器包含的样式表是用 CSS 编写的，应该用于格式化页面。如果 type 属性缺失或设置为无法识别的值，CSS 将不会应用到页面。
本示例中的 CSS 片段告诉浏览器将所有段落 (p) 元素中的文本设置为粗体。页面上的文本将如下所示
将被格式化的文本。
以下是包含 CSS 的完整文档。
<!DOCTYPE html">
<html lang="en">
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
color:green;
}
</style>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
请记住，您应该尽可能使用链接样式表而不是嵌入式样式表。这样可以轻松替换通用样式信息，而无需跟踪各个 HTML 文件中的样式。
内联 CSS 直接指定在要应用 CSS 的元素的开始标签中。它被输入到 HTML 或 XHTML 1.1 中的 style 属性中。
例如
<div style="font-weight:bold; color:red;">Bold Font</div>
显示为
如前所述，您通常应该优先使用链接 CSS 而不是嵌入式 CSS，两者都优先于内联 CSS。