开始使用css（使用css的三种方式 – CSS教程）使用css的三种方式|CSS

上一章CSS教程请查看：css入门介绍
CSS文件是一个简单的纯文本文件，它的扩展名是. CSS。
开始学习CSS在本教程中，你将了解使用CSS向web页面添加样式和格式信息是多么容易。但是，在开始之前，请确保你对HTML有一些实用的知识。
如果你刚刚开始web开发，那么就从这里开始学习吧
言归正传，让我们从层叠样式表(CSS)开始。
在HTML文档中包含CSSCSS可以作为单独的文档附加，也可以嵌入到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="http://www.srcmini.com/css/style.css"> < /head> < body> < h1>这是标题< /h1> < p>这是段落文本< /p> < /body> < /html>

提示：在所有的三个方法,使用外部样式表是最好的方法来定义和应用样式的HTML文档，与外部样式表,你可以清楚地看到影响HTML文件需要最少的标记的变化。
导入外部样式表@ import规则是另一种加载外部样式表，@ import语句指示浏览器加载一个外部样式表和使用它的风格。
你可以用它在两个方面，最简单的方法是在你的文档的标题，注意,其他的CSS规则可能仍然包含在< 时尚> 元素中。这里有一个例子：