HTML 样式

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

样式化 HTML 元素

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

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

向 HTML 元素添加样式

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

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

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

内联样式

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

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

以下示例将向你展示如何更改文本 colorfont-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 规则必须出现在样式表的开头。样式表中定义的任何样式规则都会覆盖导入样式表中的冲突规则。