HTML 样式
在本教程中，您将学习如何将样式规则应用于 HTML 元素。
样式化 HTML 元素
当涉及到网页的展示时，HTML 是非常有限的。 它最初被设计为一种简单的信息呈现方式。 CSS（层叠样式表） 由 万维网联盟 (W3C) 于 1996 年 12 月引入，以提供一种更好的方式来设置 HTML 元素的样式。
使用 CSS，很容易指定诸如字体的大小和字体、文本和背景的颜色、文本和图像的对齐方式、元素之间的空间量、元素的边框和轮廓等等。 其他样式属性。
为 HTML 元素添加样式
样式信息既可以作为单独的文档附加，也可以嵌入 HTML 文档本身。 这是将样式信息实现到 HTML 文档的三种方法。
- 内联样式 — 在 HTML 开始标记中使用
style属性。 - 嵌入式样式 — 在文档的 head 部分中使用
<style>元素。 - 外部样式表 — 使用
<link>元素，指向一个外部 CSS 文件。
在本教程中，我们将一一介绍所有这些不同类型的样式表。
注意： 内联样式的优先级最高，外部样式表的优先级最低。 这意味着如果您在 embedded 和 external 样式表中为段落指定样式，则嵌入样式表中的冲突样式规则将覆盖外部样式表。
内联样式
内联样式用于通过将 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;">这是一个段落。</p>
<div style="color:green; font-size:18px;">This is some text.</div>使用内联样式通常被认为是一种不好的做法。 因为样式规则直接嵌入在 html 标签中，它会导致演示文稿与文档的内容混合在一起，这使得更新或维护网站非常困难。
要详细了解各种 CSS 属性，请查看 CSS 教程 部分。
嵌入式样式表
嵌入式或内部样式表仅影响它们嵌入的文档。
嵌入样式表是在 HTML 文档的 <head> 部分中使用 <style> 标记定义的。 您可以在 <head> 部分中定义任意数量的 <style> 元素。
以下示例演示了如何将样式规则嵌入到网页中。
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>外部样式表
当样式应用于许多页面时，外部样式表是理想的选择。
外部样式表将所有样式规则保存在一个单独的文档中，您可以从站点上的任何 HTML 文档链接该文档。 外部样式表是最灵活的，因为使用外部样式表，您只需更新一个文件即可更改整个网站的外观。
您可以通过两种方式附加外部样式表 — 链接 和 导入:
链接外部样式表
可以使用 <link> 标记将外部样式表链接到 HTML 文档。
<link> 标签进入 <head> 部分，如下所示：
<head>
<link rel="stylesheet" href="css/style.css">
</head>导入外部样式表
@import 规则是加载外部样式表的另一种方式。 @import 语句指示浏览器加载外部样式表并使用其样式。
您可以通过两种方式使用它。 最简单的方法是在 <head> 部分的 <style> 元素中使用它。 请注意，其他 CSS 规则仍可能包含在 <style> 元素中。
<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 规则必须出现在样式表的开头。 样式表本身中定义的任何样式规则都会覆盖导入样式表中的冲突规则。 @import 规则可能会导致性能问题，一般应避免导入样式表。