样式与层叠样式表
在本节课中，我们将学习样式和 CSS。 开始吧！
章节概览
你已经学习了如何使用 HTML 构建网页的基本结构，并通过 JavaScript 编程语言操作页面结构，实现响应用户事件的交互式页面。
在许多示例程序中，你已经使用了 层叠样式表（CSS） 来设置页面的外观，包括字体、颜色、布局等。
在 HTML 的早期阶段，样式功能是内嵌在标记语言中的。一些 HTML 标签仅用于实现页面特定部分的样式，例如字体类型、颜色、对齐方式、边距、内边距等。这种将结构与样式混杂的做法导致了冗长的网页代码，结构元素和样式元素交织在一起。
当某一组样式属性在页面多个位置重复使用时，就会产生冗余：每个需要应用该样式的结构部分都必须重复书写相同的 HTML 标记。这种方法不仅增加了网页的体积，也使得维护变得更加繁琐。
层叠样式表（CSS） 的理念已有二十多年历史，第一个规范（CSS1）于1996年12月成为 W3C 的正式推荐标准。
随着规范的发展，陆续发布了 CSS2 和 CSS2.1。目前最常用的规范是 CSS3，它主要与 HTML5 配合使用，并被划分为多个独立的模块。如今已有超过六十个模块，每个模块由不同的工作组分别推进，状态各不相同。
类似地，CSS4 的规范也采用模块化设计。其中一些模块扩展了 CSS3 的功能，也有一些引入了全新的特性和能力。
本章将介绍如何在网页中使用 CSS 的基本知识。本章只涵盖最重要的内容，不会涉及所有细节，但会为你提供开始为网页添加样式的必要基础。
样式与样式表
HTML5 的标记中不再包含仅用于设置页面某部分视觉样式的元素。
相反，你可以通过任意 HTML 元素的 style 或 class 属性来描述其外观，如下所示：
示例：style 与 class 属性
No configuration found for ID: 85bda1bd8df9218b950143f1cfa64f90520b78feaee0580658fb62bcaa746045
<h1> 标签使用 class 属性来设置样式。该属性值为 blue，因此会应用 <head> 中 <style> 节点定义的 .blue 样式规则，使标题文字颜色变为蓝色。
后续的 <p> 标签通过 style 属性设置了等宽字体显示。
<body> 标签的样式是隐式设置的；虽然未显式设置 class 或 style 属性，但 <style> 中定义的 body 规则会被渲染引擎自动应用，这正是 CSS 规范的工作机制。
页面的字体族设置为 Verdana，若系统没有 Verdana，则使用 Arial；如果两者都不存在，则使用浏览器默认的无衬线字体。
下述代码的运行结果如下：
实际上，<h1> 和 <p> 元素都应用了两种样式：第一种是来自 body 规则的字体族设置，第二种是 <h1> 的蓝色（由 .blue 规则定义），以及 <p> 的等宽字体（由 style 属性指定）。
在下一课中，我们将学习如何使用 CSS 来美化页面元素。
期待下次见面！ :)