CSS基础教程：在文档中包含CSS
Hudson 译 原文
有四种方法可以将样式与HTML文档相关联。最常用的方法是内联CSS和外部CSS。
使用<style>元素嵌入CSS
可以使用<style>元素将CSS规则放入HTML文档中。此标签放置在<head>...</head>标签中。 <style>元素定义的规则将应用于文档中所有可用的元素。以下是通用语法示例：
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
如下是显示效果：
属性
与<style>元素相关的属性如下：
| 属性 | 值 | 描述 |
|---|---|---|
| type | text/css | 将样式表语言指定为内容类型（MIME类型）。该属性必需。 |
| media | screen tty tv projection handheld braille aural all | 指定文档将显示在的设备。默认值为all。该属性可选。 |
使用 style属性内联CSS
可以使用任何HTML元素的style属性来定义样式规则。这些规则仅适用于该元素。以下是通用语法示例：
<element style = ”...style rules....“>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| style | 样式规则 | style属性的值是由分号(; )分隔的样式声明组成。 |
示例
下面是基于上述语法内联CSS的示例：
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>
显示效果如下：
使用<link>元素链接外部CSS
<link>元素可用于在HTML文档中包含外部样式表文件。
外部样式表是一个具有.css扩展名的单独的文本文件。此文本文件中定义所有样式规则，然后可以使用<link>元素将此文件包含在任何HTML文档中。
以下是包含外部CSS文件的通用语法：
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
属性
<link>元素相关的属性如下：
| 属性 | 值 | 描述 |
|---|---|---|
| type | text/css | 将样式表语言指定为内容类型（MIME类型）。该属性必需。 |
| href | URL | 指定样式表文件。该属性必需。 |
| media | screen tty tv projection handheld braille aural all | 指定显示文档的设备。默认值为all。该属性可选。 |
示例
考虑一个简单的样式表文件，名为mystyle.css，其中包含以下规则：
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
现在，可以将 mystyle.css文件包含在任何HTML文档中，如下所示：
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>
使用@import导入CSS
@import类似<link>元素,也可以导入外部样式表。以下是@import规则的通用语法:
<head>
@import "URL";
</head>
这里的URL是包含样式规则的样式表文件的URL。也可以使用另一种语法：
<head>
@import url("URL");
</head>
示例
以下示例展示如何将样式表文件导入HTML文档:
<head>
@import ”mystyle.css“;
</head>
CSS覆盖规则
前面讨论了四种在HTML文档中包含样式表规则的方法。以下是覆盖任何样式表规则的规则。
- 任何内联样式表都具有最高优先级。因此，它将覆盖
<style>...</style>元素中定义的任何规则，也覆盖在任何外部样式表文件中定义的规则。 - 任何在
<style>...</style>元素中定义的规则将覆盖任何外部样式表文件中定义的规则。 - 任何在外部样式表文件中定义的规则具有最低优先级，仅当上述两个规则不适用时才会应用此文件中定义的规则。
处理旧浏览器
仍然有许多不支持CSS的旧浏览器。因此，在编写HTML文档中内嵌CSS时，应该小心。以下代码片段显示了如何使用注释元素将CSS隐藏在较旧的浏览器中：
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>
CSS注释
很多时候可能需要在样式表块中添加附加注释。 可以简单地将您的注释放在/*.....这是样式表中的注释.....*/内。
可以使用像C和C ++编程语言中相似的方式 /* ....*/ 注释多行块。
以下是示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
它将产生以下结果：
