11.4 使用CSS
有4种常用的在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外部样式表和内嵌样式。
1．链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，例如以下代码：
上面的代码中第3行代码表示浏览器从mystyle.css文件中以文档格式读出定义的样式表，rel="stylesheet"是指在页面中使用这个外部的样式表，type="text/css"是指文件的类型是样式表文本，href="mystyle.css"是文件所在的位置。
2．内部样式表
内部样式表是把样式表放到页面<head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，例如如下代码：
上面的代码中第3行～第7行代码定义了几个标记的样式，其中，定义了分割线hr的颜色，段落的左边距和页面的背景图片。这些样式会自动应用到在<body>和</body>之间定义的标记。
3．导入外部样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import关键字，例如以下代码：
上面的代码中第5行代码中@import "mystyle.css"表示导入mystyle.css样式表。
4．内嵌样式
内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单地对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，例如代码：
上述代码第1行代码中利用style参数来定义段落显示的样式。第2行是显示的文字。
以上概要地介绍了CSS的基本语法和用法，关于CSS可以定义的详细属性以及相应值，读者可以去查阅资料以获取比较详尽地属性列表，这里就不再一一列举了。
【实例11-1】CSS的使用
本实例使用CSS外部样式表定义一个网站页头部分，包括网站Logo和导航部分，最后在程序中导入外部样式表。
01 启动Visual Studio 2012，创建一个ASP.NET Web空应用程序，命名为“实例11-1”。
02 在“实例11-1”中创建一个名为Default.aspx的窗体。
03 单击网站的根目录下Default.aspx文件，进入到“视图设计器”，切换到“源视图”，在<form>和</form>标记之间编写如下代码：
上面的代码中第1行～第47行定义了一个7行3列的表格。其中，第2行定义表格的标题，第3行～第9行定义表格的表头，第10行～第41行定义了表格要显示的每一行中每一列的具体内容，第42行～第46行定义了表格的页脚部分。
04 用右键单击网站名称“实例11-1”，在弹出的快捷菜单中选择“添加”|“添加新项”命令，弹出如图11-1所示的“添加新项”对话框。
图11-1 “添加新项”对话框
05 选择“已安装模板”下的“Visual C#”模板，并在模板文件列表中选中“样式表”，然后在“名称”文本框输入该文件的名称StyleSheet.css，最后单击“添加”按钮。
06 此时，在网站根目录自动生成一个如图11-2所示的StyleSheet.css文件。
图11-2 生成样式表
07 单击StyleSheet.css文件，编写CSS代码如下：
上面的代码中，第1行～第10行定义了表格的样式，其中在第2行里定义了表格的宽度为600px，在第3行～第6行里，定义了8个方向的表格的外边框，在第7行里，定义了表格里文字是采用“居中”的对齐方式，而在第8行里，定义了表格的背景色，在第9行里，定义了针对表格里的字体大小的设置。
第11行～第14行通过类选择器设置偶数行的变化效果，第20行～第27行设置表头的样式，第28行定义隔行变化的效果，第31行～第33行设置通过伪类选择器鼠标停留在数据行上显示的颜色。
08 将解决方案资源管理器中的StyleSheet.css文件，拖动到“源视图”中的<head>和</head>标记内。
09 按快捷键Ctrl＋F5运行程序，运行结果如图11-3所示。
图11-3 运行结果