CSS 入门

Created: October-16, 2018

CSS 可以通过各种方式包含在 HTML 文档中。

CSS 入门

在本教程中，你将了解使用 CSS 向网页添加样式和格式信息是多么容易。但是，在我们开始之前，请确保你具有一些 HTML 的工作知识。

如果你刚开始从事 Web 开发，请从HTML这里开始学习

好吧，让我们开始使用最流行的样式表语言。

在 HTML 文档中包含 CSS

你可以通过三种方式在 HTML 文档中包含 CSS：

内联样式 - 使用 style HTML 开始标记中的属性。
嵌入式样式 - 使用文档头部中的 <style> 元素。
外部样式表 -使用 <link> 元素，指向外部 CSS 文件。

在本教程中，我们将逐一介绍所有这三种插入 CSS 的方法。

内联样式

内联样式用于通过将 CSS 规则直接放入开始标记来将唯一样式规则应用于元素。它可以使用 style 属性附加到元素。

该 style 属性包括一系列 CSS 属性和值对。每个 property: value 对都用分号（\ n ;）分隔，就像写入嵌入式或外部样式表一样。但它需要全部在一行中，即分号后没有换行符，如下所示：

<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 文档添加样式的首选方法。

嵌入式样式表

嵌入式或内部样式表仅影响它们嵌入的文档。

嵌入式样式表使用 <style> 元素在 HTML 文档的 <head> 部分中定义。你可以在 HTML 文档中定义任意数量的 <style> 元素，但它们必须出现在 <head> 和 </head> 标记之间。这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <style type="text/css">
        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 type="text/css">
    @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 规则必须出现在样式表的开头。样式表中定义的任何样式规则都会覆盖导入样式表中的冲突规则。但是，由于性能问题，不建议在另一个样式表中导入样式表。