在网页开发的世界里，HTML 负责搭建页面的结构，而 CSS（Cascading Style Sheets，层叠样式表）则承担着渲染 HTML 元素标签样式的重任，赋予网页丰富的视觉效果。
一、CSS 的魅力展现
CSS 能够实现诸如改变文字的样式与颜色（Look! Styles and colors）、灵活操控文本（Manipulate Text）、设置元素的颜色和盒子模型（Colors, Boxes）等诸多功能，极大地提升了网页的美观度和用户体验。
二、在 HTML 中使用 CSS 的实例
（一）HTML 使用样式
- 通过部分样式信息格式化 HTML
在 HTML 文档的部分添加样式信息，可以对整个页面的元素进行统一的样式设置。这就好比为一场演出布置舞台，让所有的元素都能在一个协调的风格环境中呈现。例如，通过设置一些全局的字体样式、颜色等，使页面看起来更加和谐统一。
- 使用样式属性制作无下划线链接
在 HTML 中，我们可以利用样式属性来改变链接的默认样式。比如，要制作一个没有下划线的链接，这在很多追求简洁美观的网页设计中非常常见。通过简单的样式设置，就可以让链接在页面中以更加简洁的方式呈现，提升页面的整体美感。
- 链接到外部样式表
使用<link>标签链接到外部样式表，这是一种高效的管理网页样式的方式。当我们的网站有多个页面，并且希望所有页面保持一致的风格时，外部样式表就发挥了巨大的作用。只需要在每个页面的部分通过<link>标签引用同一个外部样式表文件，就可以轻松实现对所有页面样式的统一管理和修改。例如：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>这样，当我们需要修改网站的整体风格时，只需要修改mystyle.css这个文件，所有引用了该样式表的页面都会随之改变，大大提高了开发效率。
三、如何使用 CSS
CSS 从 HTML 4 开始被广泛应用，其目的是为了更出色地渲染 HTML 元素。CSS 可以通过以下几种方式添加到 HTML 中：
（一）内联样式
当我们希望为个别元素应用特殊样式时，内联样式就派上用场了。使用内联样式的方法很简单，就是在相关的 HTML 标签中使用style属性。这个style属性就像是一个个性化的装饰工具，我们可以在其中包含任何 CSS 属性。例如，要改变一个段落的颜色和左外边距，可以这样写：
<p style="color:blue;margin-left:20px;">这是一个段落。</p>通过这样的设置，这个段落就会显示为蓝色字体，并且左外边距为 20 像素。内联样式非常适合在一些特殊情况下，对单个元素进行临时的、独特的样式调整。
（二）内部样式表
当单个 HTML 文件需要有独特的样式时，内部样式表是一个不错的选择。我们可以在 HTML 文档头部的<head>区域使用<style>元素来包含 CSS 代码。这种方式就像是为一个特定的房间进行独特的装修设计。例如：
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>在这个例子中，整个页面的背景颜色被设置为黄色，而所有段落的文本颜色被设置为蓝色。内部样式表适用于只在特定页面需要特殊样式，而不需要影响其他页面的情况。
（三）外部引用
使用外部 CSS 文件是最好的管理样式的方式。当我们的网站有多个页面，并且希望所有页面保持一致的风格时，外部样式表就显得尤为重要。通过将所有的 CSS 代码放在一个单独的文件中（通常以.css 为扩展名），然后在每个 HTML 页面的<head>部分通过<link>标签引用这个文件，就可以实现对整个网站样式的统一管理和维护。例如，在上面提到的链接到外部样式表的例子中，只需要修改mystyle.css文件，所有引用了该样式表的页面的样式都会随之改变。这种方式大大提高了开发效率，并且使得代码的结构更加清晰，易于维护。
在本站的 HTML 教程中，为了简化例子，让大家更容易在线编辑代码并运行实例，我们使用了内联 CSS 样式。但在实际的项目开发中，建议大家根据具体的需求合理选择使用不同的 CSS 添加方式，以达到最佳的开发效果。如果想要学习更多的 CSS 知识，可以访问本站的 CSS 教程。
四、HTML 样式实例详解
（一）背景颜色
- 使用 background - color 属性设置背景颜色
背景色属性background-color用于定义一个元素的背景颜色。在 HTML 中，我们可以通过以下方式设置元素的背景颜色：
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>在这个例子中，页面的整体背景被设置为黄色，标题的背景为红色，段落的背景为绿色。通过这种方式，我们可以清晰地看到不同元素的背景颜色设置效果。
- 早期设置背景方式对比
早期，背景色属性是使用bgcolor属性来定义的。但随着 HTML 和 CSS 的发展，background-color属性已经成为了标准的设置背景颜色的方式。例如，旧版 HTML 设置背景方式可能如下：
<body bgcolor="yellow">
<h2 bgcolor="red">这是一个标题</h2>
<p bgcolor="green">这是一个段落。</p>
</body>虽然这种方式在早期被广泛使用，但从代码的规范性和可维护性来看，background-color属性更加优越。
（二）字体、字体颜色、字体大小
- 使用相关属性定义字体样式
在 HTML 中，我们可以使用font-family（字体）、color（颜色）和font-size（字体大小）属性来定义字体的样式。例如：
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>在这个例子中，标题使用了 Verdana 字体，而段落使用了 Arial 字体，并且段落文本颜色为红色，字体大小为 20 像素。通过这些属性的设置，我们可以灵活地调整文本的显示效果，使其更符合页面的设计需求。
- 新旧方式对比
在过去，我们可能会使用<font>标签来设置字体样式，但现在通常使用font-family、color和font-size属性来定义文本样式。<font>标签在 HTML 4.01 中已经被弃用，在 HTML5 中更是不再支持。新的属性方式更加符合 CSS 的规范，能够更好地与现代网页开发的理念相结合，使代码更加简洁、易于维护。
（三）文本对齐方式
- 使用 text - align 属性指定文本对齐方式
使用text-align（文字对齐）属性可以指定文本的水平与垂直对齐方式。例如，要将一个标题居中对齐，可以这样设置：
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>在这个例子中，标题被居中显示，使页面看起来更加整齐美观。text-align属性还可以设置为left（左对齐）、right（右对齐）等，以满足不同的排版需求。
- 新旧方式对比
文本对齐属性text-align取代了旧标签<center>。<center>标签在过去被广泛用于将元素居中显示，但随着 HTML 和 CSS 的发展，使用 CSS 属性来控制元素的对齐方式更加灵活和强大。通过text-align属性，我们不仅可以实现水平居中，还可以通过一些额外的设置实现垂直居中，为网页排版提供了更多的可能性。
五、HTML 样式标签总结
|------------|---------------------------------------------------------------------------------------------------|
| 标签 | 描述 |
| <style> | 定义文本样式，用于在 HTML 文档中包含 CSS 代码，可以是内部样式表的定义，也可以用于设置内联样式的部分语法环境。 |
| <link> | 定义资源引用地址，在 HTML 中主要用于链接外部样式表，通过rel属性指定链接的关系为stylesheet，type属性指定资源类型为text/css，href属性指定外部样式表文件的路径。 |
通过对以上 HTML 样式中 CSS 的全面解析，相信大家对 CSS 在 HTML 中的应用有了更深入的了解。在实际的网页开发过程中，合理运用 CSS 的各种特性和添加方式，能够创建出更加美观、功能强大的网页。希望大家在学习和实践中不断探索，提升自己的网页开发技能。