HTML 样式

Created: October-16, 2018

样式规则描述了如何在 Web 浏览器上显示文档。

样式化 HTML 元素

在文档表示方面，HTML 非常有限。它最初被设计为一种呈现信息的简单方式。 CSS（层叠样式表）于 1996 年 12 月由 W3C 引入，以提供更好的 HTML 元素样式。

使用 CSS，可以轻松指定用于文本和背景的颜色、字体的大小和样式、元素之间的空间、向元素添加边框和轮廓以及许多其他样式。

向 HTML 元素添加样式

样式信息可以作为单独的文档附加，也可以嵌入 HTML 文档中。这是将样式信息实现到 HTML 文档的三种方法（从最高优先级到最低优先级）。

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

在本教程中，我们将逐一介绍所有这些不同类型的样式表：

内联样式

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

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

以下示例将向你展示如何更改文本 color 和 font-size 文本：

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>

使用内联样式通常被认为是一种不好的做法。由于样式规则直接嵌入在 html 标记内，因此它会使表示与文档内容混合在一起; 这其实违背了使用 CSS 的目的。

注意： 使用内联样式设置伪元素和类的样式是不可能的。因此，你应该避免在标记中使用样式属性。使用外部样式表是向 HTML 文档添加样式的首选方法。

嵌入式样式表

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

嵌入式样式表使用 <style> 标记在 HTML 文档的 <head> 部分中定义。你可以在 HTML 文档的 <head> 部分中定义任意数量的 <style> 元素。请参阅以下示例：

<head>
    <style type="text/css">
        body {background-color: YellowGreen;}
        p {color: Black;}
    </style>
</head>

外部样式表

当样式应用于许多页面时，外部样式表是理想的选择。

外部样式表将所有样式规则保存在单独的文档中，你可以从站点上的任何 HTML 文件进行链接。外部样式表是最灵活的，因为使用外部样式表，你可以通过仅更改一个文件来更改整个网站的外观。

你可以通过两种方式附加外部样式表 - 链接和导入：

链接外部样式表

可以使用标签 <link> 将外部样式表链接到 HTML 文档。 <link> 标签在 <head> 里面：

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

导入外部样式表

@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 规则必须出现在样式表的开头。样式表中定义的任何样式规则都会覆盖导入样式表中的冲突规则。