第6章 CSS技术
在Internet出现的早期，Web页面使用HTML格式化语法进行修饰，但是HTML在样式方面有不足之处，因此CSS（Cascading Style Sheet，层叠样式表）诞生了。CSS是用来控制网页样式并允许将样式信息与网页内容相分离的一种标记性语言，也可以说CSS就是描述HTML元素的规则。本章我们来详细学习CSS技术。
6.1 CSS简介
知识点讲解：光盘\视频讲解\第6章\CSS简介.wmv
CSS层叠样式表是一系列格式设置的规则，它们控制着网页内容的外观。CSS允许控制HTML无法独自控制的许多属性，使用它可以将网页内容与表现形式分开，网页内容保存在HTML文件中，而CSS规则保存在另一个文件中。由于CSS样式文件独立，很容易让用户在两种样式之间进行选择。
CSS的主要优点是提供了便利的更新功能。设计网站时，可以创建一个CSS样式表文件，然后将网站中的所有网页都连接到该样式表文件，这样就很容易为Web站点内的所有网页提供一致的外观和风格。当更新某一样式属性时，使用该样式的所有网页的格式都会自动更新为新样式，而不必逐页进行修改。
6.2 创建CSS层叠样式表
CSS层叠样式表中包含应用到页面元素的所有相关样式信息。要想格式化页面上的元素，必须要告诉浏览器以下信息：格式化什么元素，格式化元素的哪个部分，以及预期选中的元素部分的样式。这三部分内容分别对应着选择器（selector）、属性（properties）和值（value）。选择器是标识格式元素的术语，声明用于定义元素样式，声明中又包括属性和值。本节我们来学习CSS语言的知识。
6.2.1 选择器
知识点讲解：光盘\视频讲解\第6章\选择器.wmv
选择器用来在页面内选择一个或者一类HTML元素。CSS通过选择器来控制一类或一个HTML元素，这样可以减少代码编写量。CSS选择器按类型可分为类别选择器、通用选择器、ID选择器、包含选择器和标签选择器。
1. 类别选择器
类别选择器可以通过class属性格式化多个HTML元素，前面以“.”来标识。该选择器适用于当需要赋予若干个不相关的HTML元素相同的格式化类型时。
【示例6-1】下面使用类别选择器将class值为Font的HTML元素中的文本设置为红色粗体字。代码如下：
示例6-1：使用类别选择器
源码路径：光盘\源文件\Chapter6\示例6-1\创建CSS\StyleSheet.css
2. 通用选择器
通用选择器以“*”来标识，适用于页面中的所有元素，通常用来进行一些全局设置，比如字体。
【示例6-2】下面使用通用选择器将所有元素的字体设置为14px。代码如下：
示例6-2：使用通用选择器
源码路径：光盘\源文件\Chapter6\示例6-2\创建CSS\StyleSheet2.css
3. ID选择器
ID选择器根据元素ID来选择元素，具有唯一性，前面以“#”来标识。在Web页面中，为每个元素的ID属性赋予一个唯一的ID值，使用ID选择器，就能改变这个元素的行为。
注意：ID选择器使用起来更加清晰。
【示例6-3】下面使用ID选择器将ID为demoDiv的元素的字体颜色设置为绿色。代码如下：
示例6-3：使用ID选择器
源码路径：光盘\源文件\Chapter6\示例6-3\创建CSS\StyleSheet3.css
4. 包含选择器
包含选择器用来选择特定元素或元素组的后代。该选择器中包含两个选择器，在两个选择器中间加一个空格。第一个选择器选择父元素，第二个选择器选择子元素，样式最终会应用于子元素中。包含选择器还可以和通用选择器组合使用。
【示例6-4】下面使用包含选择器改变table标签下a标签内链接文字的字体大小，设置其文字大小为12px。在表格外的链接文字大小仍为默认大小。具体代码如下：
示例6-4：使用包含选择器
源码路径：光盘\源文件\Chapter6\示例6-4\创建CSS\StyleSheet4.css
5. 标签选择器
一个Web页面中有很多不同的标签，标签选择器可以设置每种标签采用的CSS样式。
【示例6-5】下面使用标签选择器将Web页面中所有p标签的背景都设置为红色，文字大小设置为12px，颜色设置为绿色。具体代码如下：
示例6-5：使用标签选择器
源码路径：光盘\源文件\Chapter6\示例6-5\创建CSS\StyleSheet5.css
6.2.2 属性
知识点讲解：光盘\视频讲解\第6章\属性.wmv
属性是元素的一部分，可以通过样式表进行修改。CSS规范定义了很多属性，但大多数Web站点中不会用到所有项。部分常见的CSS属性及其用法如表6.1所示。
表6.1 CSS常用属性
注意：控件的样式可以通过所改相应的属性来进行设置。
6.2.3 值
知识点讲解：光盘\视频讲解\第6章\值.wmv
与属性一样，值也有很多风格，不同的属性有不同的可用值。例如，color属性设置颜色的方式很多，可以使用颜色名称，也可以使用红绿蓝组成的十六进制数，还可以使用CSSrgb表示法来设置。
注意：有些属性的不同类型的值可以达到同样的效果。
6.3 使用CSS层叠样式表
在Web页面中可以使用三种方式将CSS样式表加入网页：定义内部样式表、定义内联样式表和链入外部样式表文件。一般而言，外部样式表优于内部样式表，内嵌样式表优于内联样式表。本节将详细介绍如何为Web页面加入CSS文件。
6.3.1 定义内部样式表
知识点讲解：光盘\视频讲解\第6章\定义内部样式表.wmv
内部样式表是指放置在页面<head>区中的样式集合。使用内部样式表，可以在一个统一的位置格式化整个页面，使页面的定义和样式清楚地分离开。
注意：内部样式表是一种比较常用的样式表，但只适用于单个页面，不利于多页重用。
【示例6-6】下面创建一个名称为“使用CSS”的网站，在该网站中添加一个名称为Default.aspx的Web窗体，然后在Default.aspx文件中定义内部样式表。具体代码如下：
示例6-6：定义内部样式表
源码路径：光盘\源文件\Chapter6\示例6-6\使用CSS\Default.aspx
运行结果如图6.1所示。
图6.1 运行结果图
在该示例中，在内部样式表中定义的样式是字体显示为红色。因此，“你好，欢迎光临！”文本显示为红色。
6.3.2 定义内联样式表
知识点讲解：光盘\视频讲解\第6章\定义内联样式表.wmv
内联样式表是指直接放在<html>标签中的样式。该样式表适用于只想修改单个页面中单个元素的行为，并且相当确定其他HTML元素不需要同样的声明时。
注意：使用内联样式表编写的样式比较散乱，通常情况下不建议使用该样式表来创建CSS。
【示例6-7】下面在“使用CSS”网站中添加一个名称为Default2.aspx的Web窗体，在该窗体中定义内联样式表。代码如下：
示例6-7：定义内联样式表
源码路径：光盘\源文件\Chapter6\示例6-6\使用CSS\Default2.aspx
运行结果如图6.2所示。
图6.2 运行结果图
在该示例中，在内联样式表中定义了字体为宋体，文本大小为14px，背景色为橘黄色。因此，运行结果如图6.2所示。
6.3.3 链入外部样式表文件
知识点讲解：光盘\视频讲解\第6章\链入外部样式表文件.wmv
外部样式表是将样式表完全放在一个单独的文件中，供多个页面使用。外部样式表允许通过单个文件改变整个站点的外观。
注意：只要对外部样式表文件做一次修改，使用这个样式表的所有页面就会自动进行这样的修改。
【示例6-8】在“使用CSS”网站中添加一个样式表文件StyleSheet.css。样式表文件具体代码如下：
示例6-8：链入外部样式表文件
源码路径：光盘\源文件\Chapter6\示例6-6\使用CSS\StyleSheet.css
在“使用CSS”网站中添加一个名称为Default3.aspx的Web窗体，在该窗体中链入外部样式表文件。代码如下：
运行结果如图6.3所示。
图6.3 运行结果图
在该示例中，在外部样式表中定义的样式是字体显示为红色，因此，“你好，欢迎光临！”文本显示为红色。
6.3.4 使用Visual Studio 2012设计器生成样式
知识点讲解：光盘\视频讲解\第6章\使用Visual Studio 2012设计器生成样式.wmv
在创建样式表时，可以借助Visual Studio 2012提供的功能来设计样式。
注意：Visual Studio 2012提供的功能强大的样式设计器，可以让开发人员以所见即所得的方式在界面上设计样式表。
【示例6-9】下面使用Visual Studio 2012设计器来演示样式的生成方式。
（1）创建一个网站“使用VS设计器生成样式”。
（2）在该网站中添加一个名称为Default.aspx的Web窗体，并在该Web页面上放置一些服务器控件。具体代码如下：
示例6-9：使用Visual Studio 2012设计器生成样式
源码路径：光盘\源文件\Chapter6\示例6-9\使用VS设计器生成样式\Default.aspx
（3）添加一个名称为StyleSheet.css的样式表文件。
（4）在样式表文件的大括号内单击鼠标右键，在弹出的快捷菜单中选择“生成样式”命令，打开“修改样式”对话框，如图6.4所示。
图6.4 “修改样式”对话框
在“修改样式”对话框的“类别”列表框中有9种可供设置样式，具体说明如下。
- 字体：设置字体、字号、文本颜色及一些其他的字体特性。
- 块：设置文本，如段落行高、文本对齐、文本缩进大小和字符间距等。
- 背景：设置背景颜色和背景图片。
- 边框：设置元素边框，如边框样式、宽度和每个边框的颜色。
- 方框：设置指定元素边框到容器距离的margin及padding属性。
- 定位：设置指定元素的定位特性，如相对定位或绝对定位。
- 布局：设置多种布局，可以指定元素是否可见、是否浮动及光标样式等。
- 列表：设置列表编号或项目符号的样式。
- 表格：设置表格元素的样式。
（5）使用样式设计器为各元素配置样式。在“类别”列表框中可以切换节点，在“说明”栏中可以看到生成的CSS代码，在“预览”栏中可以看到生成的CSS样式的效果。具体设置如图6.5所示。设置好后，生成的CSS代码如下：
图6.5 设置各元素值
示例6-9：使用Visual Studio 2012设计器生成样式
源码路径：光盘\源文件\Chapter6\示例6-9\使用VS设计器生成样式\StyleSheet.css
运行结果如图6.6所示。
图6.6 运行结果图
6.4 小结
本章主要介绍了ASP.NET的CSS技术，包括CSS简介、创建CSS层叠样式表和使用CSS层叠样式表。重点是对CSS技术的掌握，有兴趣的读者可以自己尝试着在自己的网站中使用CSS技术。
6.5 本章习题
习题6-1 在Visual Studio 2012中新建一个网站，命名为chapter6_1。在该网站中添加一个样式表文件，命名为StyleSheet.css。在该样式表文件中使用ID选择器改变ID值为top的元素的行为。设置其字体为“楷体”，字体大小为x-large，字体颜色为gray，背景色为#99FFCC。
【分析】本题目主要考查的是CSS文件的创建方法。
【关键代码】StyleSheet.css文件代码如下：
#top {
color: gray;
font-family: 楷体;
font-size: x-large;
background-color: #99FFCC;
}
习题6-2 在Visual Studio 2012中新建一个网站，命名为chapter6_2。在该网站中添加一个Web页面，在该页面中定义内部样式表。设置字体为“楷体”，字体大小为x-large，字体颜色为gray，背景色为#99FFCC。运行结果如图6.7所示。
图6.7 运行结果图
【分析】本题目主要考查的是对定义内部样式表的掌握情况。
注意：该示例中的样式表需要写在<head>标签之内。
习题6-3 在Visual Studio 2012中新建一个网站，命名为chapter6_3。在该网站中添加一个Web页面，在该页面中定义内联样式表。设置字体为“楷体”，字体大小为x-large，字体颜色为gray，背景色为#99FFCC。运行结果如图6.8所示。
图6.8 运行结果图
【分析】本题目主要考查对定义内联样式表的掌握情况。
注意：该示例中的样式表需要定义在<body>标签内。
习题6-4 在Visual Studio 2012中新建一个网站，命名为chapter6_4。在该网站中添加一个样式表文件，命名为StyleSheet.css。设置字体为“楷体”，字体大小为x-large，字体颜色为gray，背景色为#99FFCC。在该网站中添加一个Web页面，在该页面中链入外部样式表文件。运行结果如图6.9所示。
图6.9 运行结果图
【分析】本题目主要考查的是对在Web页面中链入外部样式表文件的掌握情况。
【关键代码】StyleSheet.css文件代码如下：
#top {
color: gray;
font-family: 楷体;
font-size: x-large;
background-color: #99FFCC;
}
注意：该示例在<head>元素中使用<link>标签，引入样式表文件。
习题6-5 在Visual Studio 2012中新建一个网站，命名为chapter6_5。在该网站中添加一个样式表文件，命名为StyleSheet.css。打开样式设计器，设置字体为“楷体”，字体大小为x-large，字体颜色为gray，背景色为#66FFCC。在该网站中添加一个Web页面，在该页面中链入外部样式表文件。运行结果如图6.10所示。
图6.10 运行结果图
【分析】本题目主要考查的是对使用Visual Studio 2012设计器生成样式的掌握情况。设计器中的设置如图6.11所示。
图6.11 修改样式
注意：只有在样式表文件的“｛｝”之间单击右键，才能在弹出的快捷菜单中选择“生成样式”命令。
【关键代码】StyleSheet.css文件的生成代码如下：
body {
font-family: 楷体;
font-size: x-large;
color: gray;
background-color: #66FFCC;
}