有四种方法可以将 CSS 样式 与 HTML 文档 关联起来。最常用的方法是 内联 CSS 和 外部 CSS。
嵌入 CSS - <style> 元素
您可以使用 <style> 元素将 CSS 规则放入 HTML 文档中。此标签放置在 <head>...</head> 标签。使用此语法定义的规则将应用于文档中所有可用的元素。这是通用语法：
<!DOCTYPE html>
<html>
<head><title>启 科 普 css 教程</title>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是段落文字。</p>
</body>
</html>
属性
与 <style> 元素关联的属性包括：
| 属性 | 值 | 描述 |
|---|---|---|
| type | text/css | 将样式表语言指定为内容类型（MIME 类型）。这是必需属性。 |
| media |
screen tty tv projection handheld braille aural all |
指定将在其上显示文档的设备。默认值为 all。这是一个可选属性。 |
内联 CSS - style 属性
您可以使用任何 HTML 元素的 style 属性来定义样式规则。这些规则将仅适用于该元素。这是通用语法 -
<element style = "...style rules....">
属性
| 属性 | 值 | 描述 |
|---|---|---|
| style | style rules | style 属性的值是用 分号（ ; ) 分隔的样式声明的组合。 |
示例
以下是基于上述语法的内联 CSS 示例：
<html>
<head><title>启 科 普 css 教程</title>
</head>
<body>
<h1 style = "color:#36C;">这是内联 CSS 的示例</h1>
</body>
</html>
外部 CSS - <link> 元素
<link> 元素可用于在 HTML 文档中包含外部样式表文件。
外部样式表是一个单独的文本文件，扩展名为 .css 。您可以在此文本文件中定义所有样式规则，然后可以使用 <link> 元素将此文件包含在任何 HTML 文档中。
这是包含 外部CSS文件 通用语法:
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
属性
与 <style> 元素关联的属性包括：
| 属性 | 值 | 描述 |
|---|---|---|
| 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>
导入CSS - @import规则
@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;
/* 这是注释 */
text-align: center;
}
/* 这是注释*/
</style>
</head>
<body>
<p>启 科 普 教 程，你好！</p>
</body>
</html>
