srcmini上一章CSS教程请查看：css入门介绍
CSS文件是一个简单的纯文本文件，它的扩展名是. CSS。
开始学习CSS
在本教程中，你将了解使用CSS向web页面添加样式和格式信息是多么容易。但是，在开始之前，请确保你对HTML有一些实用的知识。
如果你刚刚开始web开发，那么就从这里开始学习吧
言归正传，让我们从层叠样式表(CSS)开始。
在HTML文档中包含CSS
CSS可以作为单独的文档附加，也可以嵌入到HTML文档中。在HTML文档中包含CSS有三种方法：
- 内联样式——使用HTML开始标记中的样式属性。
- 嵌入样式——在文档的标题部分使用<style>元素。
- 外部样式表——使用<link>元素，指向一个外部CSS文件。
在本教程中，我们将逐一介绍这三种插入CSS的方法。
注意：内联样式具有最高的优先级，而外部样式表具有最低的优先级。这意味着，如果你为嵌入和外部样式表中的元素指定样式，则嵌入样式表中的冲突样式规则将覆盖外部样式表。
内联样式
通过将CSS规则直接放到开始标记中，内联样式用于将独特的样式规则应用于元素。它可以使用style属性附加到元素上。
style属性包括一系列CSS属性和值对，每个“property: value”对由分号(;)分隔，就像你在嵌入式或外部样式表中写入一样，但它需要在一个行，即没有断行后的分号，如下所示：
<h1 style="color:red; font-size:30px;">这是标题</h1>
<p style="color:green; font-size:22px;">这是段落</p>
<div style="color:blue; font-size:14px;">这是文本内容</div>
使用内联样式通常被认为是一种不好的做法。由于样式规则直接嵌入到HTML标记中，它会导致表示与文档的内容混合，这使得代码难以维护，并否定了使用CSS的目的。
注意：用内联样式设置伪元素和伪类的样式是不可能的。因此，应该避免在代码中使用样式属性。使用外部样式表是向HTML文档添加样式的首选方法。
嵌入样式表
嵌入式或内部样式表只影响其嵌入的文档。
嵌入的样式表是使用<style>元素在HTML文档的<head>部分定义的。你可以在HTML文档中定义任意数量的<style>元素，但是它们必须出现在<head>和</head>标记之间。让我们来看一个例子：
<!DOCTYPE html>
<head>
<title>HTML文档</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是段落文本</p>
</body>
</html>
提示：<style>和<link>标签的type属性(即type=”text/css”)定义了样式表的语言。这个属性是纯信息性的。你可以忽略这一点，因为CSS是HTML5中的标准和默认样式表语言。
外部样式表
当样式应用于网站的多个页面时，外部样式表是理想的。
外部样式表将所有样式规则保存在一个单独的文档中，你可以从站点上的任何HTML文件链接该文档。外部样式表是最灵活的，因为有了外部样式表，只需更改一个文件就可以更改整个网站的外观。
你可以通过两种方式附加外部样式表——链接和导入。
链接外部样式表
在链接之前，我们需要先创建一个样式表。让我们打开你最喜欢的代码编辑器并创建一个新文件。现在在这个文件中键入以下CSS代码，并将其保存为“style.css”。
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
外部样式表可以使用<link>标记链接到HTML文档，<link>标记位于<head>部分中，如下面的示例所示：
<!DOCTYPE html>
<head>
<title>HTML文档</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>这是标题</h1>
<p>这是段落文本</p>
</body>
</html>
提示：在所有的三个方法,使用外部样式表是最好的方法来定义和应用样式的HTML文档，与外部样式表,你可以清楚地看到影响HTML文件需要最少的标记的变化。
导入外部样式表
@ import规则是另一种加载外部样式表，@ import语句指示浏览器加载一个外部样式表和使用它的风格。
你可以用它在两个方面，最简单的方法是在你的文档的标题，注意,其他的CSS规则可能仍然包含在<时尚>元素中。这里有一个例子：
<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规则必须出现在样式表的开头。在样式表中定义的任何样式规则都将覆盖导入的样式表中的冲突规则。但是，由于性能问题，不建议在另一个样式表中导入样式表。
评论前必须登录！
注册