第3章 CSS

第 3 章

CSS

第 2 章学完 HTML 常用标签，我们可以实现页面的整体骨架和内容展示，为了使页面更加美观，我们需要继续学习另一种技术，即 CSS（Cascading Style Sheet，层叠样式表）。它是由 W3C 协会制定并发布的一个网页排版式标准，是对 HTML 语言功能的补充。CSS 是用来描述 HTML 文档样式的一种标记型语言，描述了在媒体上的标签应该如何被渲染。用一个比喻来帮助读者理解 CSS 的作用，HTML 相当于刚刚购买的毛坯房，而 CSS 相当于对毛坯房进行装修。通过使用 CSS 实现页面的内容与表现形式分离，极大地提高了工作效率。如今，CSS 被越来越多地应用到网页设计中。本章重点介绍 CSS 基本语法及简单应用。

3.1 CSS 入门

下面通过一个案例引入 CSS 样式。下面代码中定义了两个段落标签，现通过 style 属性设置其中一个段落标签的字体为红色，示例代码如下。

运行代码查看效果，如图 3-1 所示，发现第二个段落的字体被成功设置为红色。

在上述代码中，通过在 HTML 标签中添加 style 属性的方式是应用 CSS 样式的一种形式，被称为行内样式，接下来将详细介绍几种不同的 CSS 应用样式。

3.2 CSS 应用样式

CSS 作为美化页面的工具，用来描述 HTML 文档样式的标记语言。那么，如何将 CSS 样式应用到

HTML 标签上呢？这里提供了三种方法，分别为行内样式、内嵌样式和外链样式。下面分别对这三种引入方式进行详细介绍。

3.2.1 行内样式

行内样式利用 HTML 标签上的 style 属性来设置，CSS 属性作为 style 属性的属性值来进行书写。使用这种方式应用 CSS 样式的特点是只能在当前标签生效。行内样式的语法格式如下。

了解了行内样式的基本语法后，下面使用行内样式，在 HTML 文件中使用 CSS 样式，示例代码如下。

在上述代码中，第一个 标签中的 style 属性上设置了 CSS 样式 “color:red;font-size:100px;”，表示该标签中的字体会被设置为红色，字体大小会被设置为 100 像素。而第二个没有书写 CSS 样式的 标签中的文字就完全不会受到影响。

运行代码查看效果，测试行内样式如图 3-2 所示。

需要注意的是，行内样式通常只在为单个元素提供少量样式时使用。在实际开发中，并不推荐使用这种方法来应用 CSS 样式。因为使用这种方式体现不出 CSS 的优点，比如针对整个文档或多个文档，在其对应标签上寻找对应样式依次修改时，使用该方式则会导致工程师的工作量大大增加。所以，即使这种方式编写简单、定位准确，但并不推荐使用。

3.2.2 内嵌样式

如果需要一次性设置多个标签的样式，显然一一设置去实现是不现实的，过于烦琐，那么我们可以借助另一种 CSS 应用样式，即内嵌样式，对其统一设置。

内嵌样式是将 CSS 样式直接编写到 标签中的