CSS 入门
CSS 文件只是一个以 .css 扩展名保存的纯文本文件。
CSS 入门
在本教程中，您将了解使用 CSS 向网页添加样式和格式信息是多么容易。 但是，在我们开始之前，请确保您对 HTML 有一定的应用知识。
如果您刚刚开始涉足 Web 开发领域，从这里开始学习 »
事不宜迟，让我们开始使用层叠样式表 (CSS)。
在 HTML 文档中包含 CSS
CSS 既可以作为单独的文档附加，也可以嵌入到 HTML 文档本身中。 在 HTML 文档中包含 CSS 有三种方法：
- 内联样式 — 在 HTML 开始标记中使用
style属性。 - 嵌入式样式 — 在文档的 head 部分中使用
<style>元素。 - 外部样式表 — 使用
<link>元素，指向外部 CSS 文件。
在本教程中，我们将一一介绍这三种插入 CSS 的方法。
注意： 内联样式的优先级最高，外部样式表的优先级最低。 这意味着如果您在 embedded 和 external 样式表中为元素指定样式，则嵌入样式表中的冲突样式规则将覆盖外部样式表。
内联样式
内联样式用于通过将 CSS 规则直接放入开始标记来将唯一样式规则应用于元素。 它可以使用 style 属性附加到元素上。
style 属性包括一系列 CSS 属性和值对。 每个 "property: value" 对由分号 (;) 分隔，就像您写入嵌入式或外部样式表一样。 但它需要全部在一行中，即分号后没有换行符，如下所示：
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>使用内联样式通常被认为是一种不好的做法。 由于样式规则直接嵌入在 HTML 标记中，它会导致演示文稿与文档的内容混合在一起； 这使得代码难以维护并且否定了使用 CSS 的目的。
嵌入式样式表
嵌入式或内部样式表只会影响它们嵌入的文档。
嵌入式样式表在 HTML 文档的 <head> 部分中使用 <style> 元素。 您可以在 HTML 文档中定义任意数量的 <style> 元素，但它们必须出现在 <head> 和 </head> 标记之间。 我们来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>提示： <style> 和 <link> 标签（即 type="text/css"）的 type 属性定义了样式表的语言。 这个属性是纯粹的信息。 您可以省略它，因为 CSS 是 HTML5 中的标准和默认样式表语言。
外部样式表
当样式应用于网站的许多页面时，外部样式表是理想的选择。
外部样式表将所有样式规则保存在一个单独的文档中，您可以从站点上的任何 HTML 文件链接该文档。 外部样式表是最灵活的，因为使用外部样式表，您只需更改一个文件即可更改整个网站的外观。
您可以通过两种方式附加外部样式表 — 链接和导入。
链接外部样式表
在链接之前，我们需要先创建一个样式表。 让我们打开您最喜欢的代码编辑器并创建一个新文件。 现在在此文件中键入以下 CSS 代码并将其保存为"style.css"。
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}可以使用 <link> 标记将外部样式表链接到 HTML 文档 . <link> 标记位于 <head> 部分内，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>提示： 在所有三种方法中，使用外部样式表是为 HTML 文档定义和应用样式的最佳方法。 使用外部样式表可以清楚地看到，受影响的 HTML 文件需要对标记进行最少的更改。
导入外部样式表
@import 规则是加载外部样式表的另一种方式。 @import 语句指示浏览器加载外部样式表并使用其样式。
您可以通过两种方式使用它。 最简单的是在文档的标题中。 请注意，其他 CSS 规则仍可能包含在 <style> 元素中。 这是一个例子：
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>同样，您可以使用 @import 规则在另一个样式表中导入一个样式表。
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}注意：所有 @import 规则都必须出现在样式表的开头。 样式表本身中定义的任何样式规则都会覆盖导入样式表中的冲突规则。 但是，由于性能问题，不建议在另一个样式表中导入样式表。