在HTML中使用CSS
CSS旨在与HTML(或者SVG)一起使用。我们可以通过三种方式将CSS包含在HTML文件中：
- 将CSS嵌入HTML元素的
style属性中。 - 将CSS嵌入
styleHTML元素中 - 链接到外部CSS文件。
这些选项中的每一个都将在下面说明。
CSS样式属性
在HTML页面中包含CSS的最简单方法是将CSS嵌入HTML元素的style属性内。嵌入在"样式"属性内的CSS属性仅适用于嵌入它们的HTML元素。看起来是这样的：
<div style="border: 1px solid black;"> Style This! </div>
这个例子将CSS属性border插入div元素的style属性中。边框属性的值为1px纯黑，将div元素的边框设置为一个像素宽的黑色边框。
如果我们需要在style元素内设置多个CSS属性，请使用分号分隔CSS属性，如下所示：
<div style="border: 1px solid black; font-size: 18px;"> Style This! </div>
这个例子同时设置了borderCSS属性和font-sizeCSS属性。
样式元素中的CSS
在HTML中使用CSS的另一种方法是将CSS嵌入HTML页面内的styleHTML元素内。如果我们需要将相同的样式应用于多个HTML元素，则比在每个HTML元素的" style"属性中设置样式要容易得多。这是一个使用style元素的CSS示例：
<style>
div {
border: 1px solid black;
}
</style>
<div> Style This! </div>
<div> Style This Too! </div>
这个例子显示了一个单个的style元素，它定义了一个CSS规则，该规则适用于所有的div元素。因此，在示例中，style元素内部的CSS属性(border属性)将应用于两个div元素。
我们可以在同一style元素中定义多个CSS规则。这是一个例子：
<style>
div {
border: 1px solid black;
}
span {
border: 1px solid blue;
}
</style>
本示例定义了两个CSS规则。第一个CSS规则适用于所有div元素，第二个CSS规则适用于所有span元素。
我们也可以在同一HTML页面中嵌入多个style元素。这是一个例子：
<style>
div {
border: 1px solid black;
}
</style>
<style>
span {
border: 1px solid blue;
}
</style>
这个例子展示了来自上一个例子的CSS规则，它们嵌入在自己的style元素中。
样式元素可以嵌入HTML头部元素或者主体元素内。这是一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
}
</style>
</head>
<body>
<style>
span {
border: 1px solid blue;
}
</style>
<div> Style This! </div>
<span> Style This Too! </span>
</body>
</html>
在此示例中，" div"元素的CSS规则嵌入在" head" HTML元素内其自己的" style"元素内，而" span"元素的CSS规则嵌入在其" body"内其自身的" style"元素内HTML元素。
外部文件中的CSS
如果需要将相同的CSS样式应用于多个HTML页面，则将CSS规则移动到CSS文件，然后从HTML页面链接到该文件更加容易。我们可以通过两种方式引用外部样式表：
- 通过
head元素内的link元素。 - 通过
style元素内的@ import指令。
以下各节将说明这两种机制。
链接元素
我们可以使用link元素(位于head元素内部)引用外部CSS文件。这是一个例子：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my-css-file.css">
</head>
<body>
<div> Style This! </div>
<span> Style This Too! </span>
</body>
</html>
这个例子链接到名为" my-css-file.css"的外部CSS文件。该文件必须可以在线访问，在这种情况下，它必须与HTML文件位于同一目录中。因此，如果HTML文件位于http：// jenkov.com / my-website / my-html-file.html，则CSS文件应位于http://jenkov.com/my-网站/ my-css-file.css。
实际上，" link"元素的" href"属性可以包含绝对或者相对URL。有关绝对和相对URL的更多信息，请参见HTML4教程中的HTML和URL。
如果我们将CSS规则从先前的示例移至" my-cess-file.css"文件，则内容将如下所示：
div {
border: 1px solid black;
}
span {
border: 1px solid blue;
}
注意CSS文件没有style元素。它本身只有CSS规则。
@import指令
我们还可以使用@import指令从style元素内部导入外部CSS文件。这是一个CSS@ import示例：
<style>
@import url('http://jenkov.com/my-website/my-css-file.css');
</style>
此示例将在包含该style元素的HTML页面中添加CSS文件http://jenkov.com/my-website/my-css-file.css。
