2.11.1 CSS 样式概述
简单地说，CSS 样式就是定义网页格式的代码，它是一种比较先进的网页控制技术，主 要用来指定布局、字体、背景以及其他的一些图文元素的格式。
CSS 样式一般分为嵌入式和外部链接式两种类型。嵌入式是在独立的文档中应用的 CSS 样式（如在 HTML 中应用于<head>和</head>之间），外部链接式样式应用于多个文档，生成 专门的*.css 文件，由其他文件来调用它。
2.11.2 新建 CSS 样式
首先新建一个标准的 HTML 网页，选择“窗口”→“CSS 样式”命令（或者按 Shift+F11 组合键），则会弹出“CSS 样式”面板，如图 2-145 所示。单击该面板中的“新建 CSS 规则”
按钮 则会弹出如图 2-146 所示的“新建 CSS 规则”对话框，然后在“名称”组合框中输入 要定义的 CSS 样式名称。
图 2-145 “CSS 样式”面板 图 2-146 “新建 CSS 规则”对话框 对话框中各个选项的含义如下：
（1） 选择器类型（类）：用于创建作为 class 属性，且应用于文本范围或文本块的自定义 样式。需要注意的是：类名称必须以句点开头，并且可以包含任何字母和数字的组合（例如 mycss）。
（2）选择器类型（标签）：用于重定义 HTML 标签的默认格式。选择此选项时，原先的
“名称”会自动地变成“标签”名称，可以在其后的文本框中输入一个 HTML 标签，或者从 其下拉菜单中选择一个标签名称。
（3）选择器类型（高级）：用于为具体的某个标签组合或所有包含 Id 属性的标签定义格 式。选择此选项时，原先的“名称”会自动地变成“选择器”，可以在其后的文本框中输入一 个或多个 HTML 标签名称，或者从其下拉菜单中选择一个“标签”名称。该选择器也称伪类 选择器，包括 a:hover、a:link、a:visited 等，常用于超级链接的样式设置。
（4）名称：设置 CSS 样式的名称。建议使用英文字母进行名称的命名。需要注意的是：
如果是类的名称，则必须以句点开头，并且可以包含任何字母和数字的组合（例如.mycss）。
（5）定义在（新建样式表文件）：选择此选项时，可以在其后的文本框内输入一个 CSS 样式表的名称（例如 mycss.css），它可以将设置的各种 CSS 样式内容保存到独立的外部 CSS 样式表文件中（扩展名为 css）。
（6）定义在（仅对该文档）：选择此选项时，可以将 CSS 样式内容直接插入到当前的网 页中。
2.11.3 编辑 CSS 样式属性 1．设置 CSS 样式的“类型”属性
接着上面的操作步骤，在“新建 CSS 规则”对话框中单击“确定”按钮则会弹出“CSS 规则定义”对话框。在“分类”列表框中选择“类型”选项，然后可以根据实际制作的需要自 由地设定“类型”的相应参数，如图 2-147 所示。
图 2-147 “CSS 样式定义”对话框中的“类型”选项的参数 该对话框中各参数的含义如下：
（1）字体：设置 CSS 样式所使用的中文字体或英文字体。如果没有特别的需求，此处可 以留空，浏览器会使用默认的字体显示文本。
（2）大小：设置文本的字体大小和单位。一般情况下常常使用“像素（px）”和“点数
（pt）”作为字体大小的单位，例如 10pt 表示字体大小为 10 点，10px 表示字体大小为 10 像素。
（3）粗细：设置文本的字体粗细，在下拉列表中可以选择“粗体”、“细体”等。
（4）样式：设置字体的样式，在下拉列表中可以选择“正常”、“斜体”、“偏斜体”等样 式。默认设置是“正常”。
（5）变体：设置文本的变体，此处一般保留为空。
（6）行高：设置文本所在行的高度。选择“正常”则自动计算字体大小的行高，也可以
输入一个确切的值并选择一种相应的单位。例如 22 像素表示行的高度为 22 像素，150%表示 行的高度为字体大小的 1.5 倍。
（7）大小写：可以设置每个英文单词的首字母为大写，或者设置每个英文单词全部为大 写或小写。
（8）颜色：设置文本颜色。
（9）修饰：设置文本是否带有下划线、上划线、删除线，或者使文本闪烁。正常文本的 默认设置是“无”，链接文本的默认设置是带有“下划线”。
2．CSS 样式的“背景”属性
接着上面的操作步骤，在“CSS 规则定义”对话框中选择“分类”列表框中的“背景”
选项，然后可以根据实际制作的需要自由地设定“背景”的相应参数，如图 2-148 所示。
图 2-148 “CSS 规则定义”对话框中“背景”选项的参数 该对话框中各参数的含义如下：
（1）背景颜色：设置文本、表格、页面等元素的背景颜色。
（2）背景图像：设置文本、表格、页面等元素的背景图像。
（3）重复：设置背景图像是否重复或者如何重复。“不重复”表示在元素开始处显示一次 背景图像；“重复”表示在元素的位置水平和垂直平铺背景图像；“横向重复”和“纵向重复”
可分别设置在水平或垂直方向上重复平铺背景图像，但是平铺的背景图像不会超出元素的边界。
（4）附件：设置背景图像是固定在原始位置还是随元素一起滚动。
（5）水平位置：设置背景图像在相应元素中的水平初始位置。
（6）垂直位置：设置背景图像在相应元素中的垂直初始位置。
3．CSS 样式的“区块”属性
接着上面的操作步骤，在“CSS 规则定义”对话框中选择“分类”列表框中的“区块”
选项，然后可以根据实际制作的需要自由地设定“区块”的相应参数，如图 2-149 所示。
图 2-149 “CSS 规则定义”对话框中的“区块”选项的参数 该对话框中各参数的含义如下：
（1）单词间距：设置每个单词之间或文字之间的距离，同时需要指定该距离的单位。例 如 5px 表示单词之间或文字之间的距离为 5 像素，5pt 表示单词之间或文字之间的距离为 5 点。
（2）字母间距：设置每个字母之间的距离，同时需要指定该距离的单位。例如 5px 表示 每个字母之间的距离为 5 像素。
（3）垂直对齐：设置文本在相应元素中的垂直对齐方式。
（4）文本对齐：设置文本在相应元素中的水平对齐方式。
（5）文字缩进：设置段落中的第一行文本的缩进距离，同时需要指定该缩进距离的单位。
（6）空格：设置相应元素中的空格区域（空字符）。“正常”表示收缩空格；“保留”表 示保留所有空白，包括空格、制表符和回车等；“不换行”表示当遇到<br>标签时文本才进行 换行。
（7）显示：设置文本在相应元素中的显示方式。
4．CSS 样式的“方框”属性
接着上面的操作步骤，在“CSS 规则定义”对话框中选择“分类”列表框中的“方框”
选项，然后可以根据实际制作的需要自由地设定“方框”的相应参数，如图 2-150 所示。
该对话框中各参数的含义如下：
（1）宽、高：设置文本、图片、表格、层等相应元素的宽度和高度的范围。
（2）浮动：设置文本、图片、表格、层等相应元素的浮动方式。例如设置表格浮动为“左 对齐”，文本就会自动地排列在该表格的右侧。
（3）清除：设置各种相应元素是否允许浮动。“左对齐”表示不允许左边有浮动对象；“右 对齐”表示不允许右边有浮动对象；“两者”表示允许两边都可以有浮动对象；“无”表示不允 许有浮动对象。
（4）填充：设置文本、图片、表格等相应元素内容与元素边框之间的间距。如果选择“全
部相同”复选项，则可同时设置“上”、“右”、“下”、“左”四侧的填充间距；如果取消选择“全 部相同”复选项，则可单独地设置“上”、“右”、“下”、“左”四侧的填充间距。
图 2-150 “CSS 样式定义”对话框中的“方框”选项的参数
（5）边界：设置文本、图片、表格等相应元素的边框与其他元素之间的间距。如果选择
“全部相同”复选项，则可同时设置“上”、“右”、“下”、“左”四侧的边界；如果取消选择“会 部相同”复选项，则可单独地设置“上”、“右”、“下”、“左”四侧的边界。
下面通过任务讲解如何创建 CSS 样式和对规则中的类型、背景、区块进行设置。
【任务 2-11】CSS 样式的使用
【任务 2-11-1】创建 CSS 样式和对规则中的类型、背景、区块进行设置
【操作要求】
按照图 2-151 所示的样图创建 CSS 样式和对规则中的类型、背景、区块进行设置。
图 2-151 样图
【操作步骤】
（1）在 Dreamweaver 中新建一个基本网页 1101.html，并将一些文字复制到页面中，原始
文字的格式如图 2-152 所示。
图 2-152 原始文字
（2）在 CSS 样式窗口中，单击“新建 CSS 规则”按钮 ，弹出“新建 CSS 规则”对话 框，在“选择器类型”区域中选择“类”单选项，在“名称”组合框中输入 mycss，在“定义 在”区域中选择第一个单选按钮，在其下拉列表框中选择“新建样式表文件”并保存到相应的 目录，如图 2-153 所示。
图 2-153 “新建 CSS 规则”对话框
（3）分别对类型、背景、区块的各参数进行设置，具体参数如图 2-154 至图 2-156 所示。
图 2-154 “CSS 规则定义”对话框中“类型”选项的参数设置
图 2-155 “CSS 规则定义”对话框中“背景”选项的参数设置
图 2-156 “CSS 规则定义”对话框中“区块”选项的参数设置
（4）选中表格中的所有文字，单击“样式”下拉列表框选择刚刚新建的 mycss 样式，效 果如图 2-151 所示。
5．CSS 样式的“边框”属性
接着上面的操作步骤，在“CSS 规则定义”对话框中选择“分类”列表框中的“边框”
选项，然后可以根据实际制作的需要自由地设定“边框”的相应参数，如图 2-157 所示。
该对话框中各参数的含义如下：
（1）样式：设置文本、图片、表格等相应元素四周边框的外观样式，包括“实线”、“虚 线”、“双线”、“点划线”等样式。如果选择“全部相同”复选项，则可同时设置“上”、“右”、
“下”、“左”四周的边框样式；如果取消选择“全部相同”复选项，则可单独设置“上”、“右”、
“下”、“左”四周的边框样式。
图 2-157 “CSS 规则定义”对话框中的“边框”选项的参数
（2）宽度：设置文本、图片、表格等相应元素四周边框的粗细。如果选择“全部相同”
复选项，则可同时设置“上”、“右”、“下”、“左”四周的边框粗细；如果取消选择“全部相同”
复选项，则可单独地设置“上”、“右”、“下”、“左”四周的边框粗细。
（3）颜色：设置文本、图片、表格等相应元素四周边框的颜色。如果选择“全部相同”
复选项，则可同时设置“上”、“右”、“下”、“左”四周的边框颜色；如果取消选择“全部相同”
复选项，则可同时设置“上”、“右”、“下”、“左”四周的边框颜色；如果取消选择“全部相同”