CSS 入门
CSS文件只是以.css扩展名保存的纯文本文件。
CSS入门
在本教程中，您将学习使用CSS向网页添加样式和格式设置信息有多么容易。但是，在开始之前，请确保您具有HTML的一些使用知识。
如果您刚刚进入Web开发领域，请从这里开始学习»
事不宜迟，让我们开始使用级联样式表（CSS）。
在HTML文档中包含CSS
CSS可以作为单独的文档附加，也可以嵌入HTML文档本身。在HTML文档中包括CSS的三种方法：
在本教程中，我们将一种一种介绍所有三种签入CSS的方法。
注意：内联样式的优先级最高，而外部样式表的优先级最低。这意味着，如果在嵌入式样式表和外部样式表中都为元素指定样式，则嵌入式样式表中冲突的样式规则将覆盖外部样式表。
内联样式
内联样式用于通过将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的目的。
嵌入式样式表
嵌入或内部样式表仅影响嵌入它们的文档。
嵌入式样式表在<head>HTML文档的部分中使用<style>元素定义。您可以<style>在HTML文档中定义任意数量的元素，但是它们必须出现在<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属性（例如：type="text/css"）定义了样式表的语言。由于CSS是HTML5中的标准样式表语言和默认样式表语言，因此可以省略type属性。
外部样式表
当样式应用于网站的许多页面时，外部样式表是理想的选择。
外部样式表将所有样式规则保存在一个单独的文档中，您可以从网站上的任何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规则都必须在样式表的开头出现。样式表中定义的任何样式规则本身都会覆盖导入的样式表中的冲突规则。但是，由于性能问题，不建议在另一个样式表中导入样式表。