第 5 章 网页内容的修饰－ css 样式
DESCRIPTION
第 5 章 网页内容的修饰－ CSS 样式. 教学内容： CSS 样式的类型、创建 CSS 样式、编辑 CSS 样式、设置 CSS 样式的基本属性、链接和导出 CSS 样式表、 CSS 在网页中的应用。 教学重点和难点：掌握在网页中添加、应用 CSS 样式的方法。. 5.1 初识 CSS. CSS 样式就像 word 中的格式刷 , 可以对众多网页中的文本及文本区外观进行统一控制。 5.1.1 样式表的概念 - PowerPoint PPT PresentationTRANSCRIPT
第第 55 章 网页内容的修饰－章 网页内容的修饰－CSSCSS 样式 样式
教学内容：教学内容： CSSCSS 样式的类型、创建样式的类型、创建 CSSCSS 样式、样式、编辑编辑 CSSCSS 样式、设置样式、设置 CSSCSS 样式的基本属性、样式的基本属性、链接和导出链接和导出 CSSCSS 样式表、样式表、 CSSCSS 在网页中的应在网页中的应用。用。教学重点和难点：掌握在网页中添加、应用教学重点和难点：掌握在网页中添加、应用CSSCSS 样式的方法。样式的方法。
5.1 5.1 初识初识 CSS CSS CSS 样式就像 word 中的格式刷 , 可以对众多网
页中的文本及文本区外观进行统一控制。5.1.1 样式表的概念 样式表是为了弥补 HTML 语言而开发，调整字间
距、行间距、取消链接的下划线、固定背景图像等样式表可以实现原来的 HTML 标记无法实现的效果。
1 ．样式表的优点（ 1 ）内容结构和格式控制相分离（ 2 ）精确控制网页外观 （ 3 ）制作体积下，下载页面快（ 4 ）快速规格网页样式（ 5 ）兼容不同浏览器
2 ．样式表标记• 定义样式表的部分用 <style ></style> 标记来表示。• 样式表的内容应该位于 <head></head> 标记之间。• 在 Dreamweaver 中为指定字体、字号、文字颜色来
定义样式表的时候，在代码视图中出现的 HTML 代码会出现字体 {font-family} 或者 {font-size} 等属性，并且以冒号为间隔设置属性值。属性和属性由分号来区分。
• 应用样式表的文字包括在 <span></span> 标记之间。• 有 <!-- 和 --> 注释标记来套用样式表是因为样式表在
Explorer 和 Netscape 4.0 以上的浏览器中才被支持，使用该注释标记是为了在其他浏览器中被忽略通过。
5.1.2 CSS 样式的类型1 ．类样式（ class ） 类样式的名称必须以句点（英文状态）开
头，后跟字母或字母和数字组合（例如， .mycss ）。
为类样式命名时，不能使用 body ， table等与“标签”样式相冲突的 HTML 标签名称。
class 的类别定义在代码中是写在 <style>与 </style> 标记之间，并放在 <head> 标记之下，一份网页只要写一次即可。
2 ．标签样式 标签样式表示重新定义特定 HTML 标签的外观。3 ．高级样式 高级样式会对某一具体的标签组合或者含有特
定 ID 属性的标签应用样式。 高级样式还常用于设定超链接，即通过“新建
CSS 样式”对话框的“选择器”下拉菜单中提供的四个选项，定义超链接的四种状态。– a:link ：超链接文字的一般状态– a:visited ：超链接文字已链接过的状态– a:hover ：鼠标光标移到超链接文字上的状态– a:active ：超链接文字正在链接中的状态
5.2 使用 CSS 编辑器 使用 CSS 编辑器可以创建、编辑和删除 CSS
样式。并且可以将外部样式表文件附加到当前文档。
• “ 附加样式表”：单击该按钮会打开“链接外部样式表”对话框，可选择要链接到或导入到当前文档中的外部样式表。
• “ 新建 CSS 规则”：打开“新建 CSS 样式”对话框，可以选择创建的样式类型。如类样式、标签样式或高级样式。
• “ 编辑样式”：打开“ CSS 样式定义”对话框，可编辑当前文档或外部样式表中的样式。
• “ 删除 CSS 规则”：删除“ CSS 样式”面板的所选样式，并从应用该样式的所有元素中删除格式，但是不删除对该样式的引用。
5.2.1 创建 CSS 新样式1 ．创建标签样式例 1 ：将页面背景色设置成土黄色 (#996600) ，页面左边界、上边界均为 0 。
操作步骤如下 :① 单击“ CSS 样式”面板中的“新建 CSS 样式”按钮。在“新
建 CSS 样式”对话框中，“选择器类型”设置为“标签”，在“标签”下拉菜单中选择 body ，“定义在”设置为“仅对该文档”，然后单击“确定”按钮，创建一个名为 body 的标签样式。
② 在“ body 的 CSS 规则定义”对话框中设置该样式的属性，在“分类”的“背景”项中设置网页的背景颜色为“ #996600” 。然后将“分类”切换到“方框”，在边界区域分别设置页面的上、左边界为“ 0” 像素。
③ 单击“确定”按钮后，在“ CSS 样式”面板中会增加 body 样式名称，并且定义的样式会自动应用到页面中。
④ 将页面切换到“拆分”视图，我们会发现 body 标签出现在代码里，是包围在 <style> 与 </style>这对标记之间，并且镶嵌在网页的 <head> 标记下。
⑤ 保存网页，按 F12键预览网页。
2 ．创建类样式 例 2 ：为页面设置标题，将标题设置为“黑体， 24 点
数（ pt ）”。具体操作如下：① 单击“ CSS 样式”面板中的“新建 CSS 样式”按
钮。在“新建 CSS 样式”对话框中，“选择器类型”设置为“类”，名称输入“ .style2” ，“定义在”设置为“仅对该文档”，单击“确定”按钮。② 在出现的“ .style2 的 CSS 规则定义”对话框中，
设置类型项中的字体为“黑体”，大小为“ 24 点数（ pt ）”。③ 单击“确定”按钮。④ 保存网页，按 F12键预览网页。 3 ．创建高级样式参见教材第 5 章 [ 实例 3] 。
5.2.25.2.2 编辑编辑 CSSCSS 样式样式1 ．管理 CSS 样式 修改例 2 中创建的 .style2 样式。将样式名称改为 .biaoti, 字体设
置为新宋体，字号设置为 36 像素 , 颜色设置为 #339966 。操作如下：① 打开“ CSS 样式”面板，选择 .style2 样式。单击鼠标右键，
在弹出的对话框中选择“重命名”。② 此时弹出“重命名类”对话框，在“新建名称”框中输
入“ .biaoti” ，单击“确定”按钮。③ 选择 .biaoti 样式，单击“ CSS 样式面板”右下角的“编辑样
式”按钮，打开“ .biaoti 的 CSS 规则定义”对话框。④ 在对话框中将字体设置为新宋体，大小设置为 36 像素 , 颜色
设置为 #339966 。修改完毕后，单击“确定”按钮。 通过“ CSS 样式”面板，还可以删除、复制、重命名一个样式。
2 ．内部样式表和外部样式表 内部样式表是将 CSS 样式的定义直接写在 HTML
文档 Head 部分的 Style 标签内，仅供该网页使用。外部样式表是一系列存储在一个单独的外部文件（ .css 文件，并非 HTML 文件）中的 CSS 样式。利用文档 head 部分中的链接，该文件被链接到Web站点中的一页或多页上。
（ 1 ）创建内部样式 在新建一个 CSS 样式时，在“新建 CSS 规则”
对话框中，选择“仅对该文档”，则所新建的CSS 样式便会成为内部样式。前面所建立的几个CSS 样式均是内部样式。
（ 2 ）创建外部样式：例 3 ：为网站创建一个名为 mail_style .css 的外部样式。操作如下：① 打开“ CSS 样式”面板，单击“新建 CSS 规则”按钮。② 在“新建 CSS 规则”对话框中，输入样式名称 .tit ，
“定义在”选择“新建样式表文件”，单击“确定”按钮。③ 在打开的“保存样式表文件为”对话框中，输入要创建
的外部样式表文件（ CSS 文件）的名称 mail_style.css ，并选择文件的保存路径，单击“保存”按钮。 ④ 在“ .tit 的 CSS 规则定义（在 mail_style .css 中）”对
话框中，设置该样式的大小和颜色。单击“确定”按钮。
3 ．导入或链接 CSS 样式表 例 4 ：将上例中建立的外部样式表文件 mail_style.css 应用到示
例网站的指定页面中。操作如下：① 在 Dreamweaver 中打开示例网站的指定的页面文件。② 打开“ CSS 样式”面板，单击面板右下角的“附加样式
表”按钮，打开“链接外部样式表”对话框。③ 单击对话框中的“浏览”按钮，从打开的对话框中选择样式
表文件 mail_style.css 。④ 选择“链接”（或“导入”）单选按钮后，单击“确定”按
钮，外部样式表文件 mail_style.css便被链接（或导入）到指定页面中。
【说明】在“链接外部样式表”对话框中，“添加为”有两个选项“链接”和“导入”。无论选择哪个选项，选择的外部样式表文件都会出现在当前文档的 CSS 样式面板中。但在导出时两者就有了区别，导入的样式文件在导出时是作为当前文档样式文件的一部分，连同内部样式一起被导出；而链接的外部样式表文件则不会被当作当前文档的样式文件导出。
4 ．导出内部样式 例 5 ：将当前网页中的样式导出为外部样式表
文件，并命名为 link_style.css 。步骤如下：①打开“ CSS 样式面板”，单击鼠标右键，选
择“导出”菜单，或者选择菜单“文件 | 导出 | CSS 样式”命令，弹出“导出样式为CSS 文件”对话框。②在对话框中选择样式表文件的保存路径，本
例为站点根目录下的 CSS 文件夹，然后输入样式表的文件名 link_style.css ，单击“保存”按钮。
5.3 5.3 设置设置 CSSCSS 样式的属性样式的属性1 ．类型面板 主要用于定义网页中文本的字体、颜色及字体的风格等 .例 6: 为指定页面设置文字样式。要求是新宋体， 12 像素细体字，
行间距有 30 像素，颜色 #6699FF 。操作如下：① 打开指定的页面。② 打开 CSS 样式面板，单击“新建 CSS 规则”按钮，打开“新
建 CSS 规则”对话框，在“名称”文本框中输入“ .wz” ，然后单击“确定”按钮。
③ 打开定义样式对话框，在对话框左侧的“分类”列表中选择“类型”后，在右侧的类型属性面板中设置“字体”为“新宋体”，“大小”设置为“ 12 像素”，“粗细”设置为“细体”，“行高”设置为“ 30 像素”，“颜色”设置为“ #6699FF” 。
④ 单击“确定”按钮，选取页面中的文字，在属性面板中选择“样式”下拉列表中的“ wz” 选项。保存文件，按 F12键预览 。
2 ．背景面板 主要用于在文本、表格、页面等的后面设置背景属性及背景图像的位置。
例 7 ：为上例中的页面添加背景颜色和背景图片。操作如下：① 打开需设置背景的页面文档。② 打开 CSS 样式面板，单击“新建 CSS 规则”按钮，打开“新建 CSS
规则”对话框，在“名称”文本框中输入“ .back” ，然后单击“确定”按钮。
③ 打开定义样式对话框，在对话框左侧的“分类”列表中选择“背景”后，在右侧的“背景”选项面板中单击“背景图像”文本框后的“浏览”按钮。
④ 在弹出的“选择图像源文件”对话框中，选择要设置为背景的图像。⑤ 单击“确定”按钮回到“背景”选项面板，将除了背景图像之外的其
他部分的背景颜色设置为 #F9FDFF 。⑥ 为了不让背景图像平铺显示，把“重复”设置为“不重复”，然后为
了让背景图像显示在右底部，将“水平位置”设置为“右对齐”，“垂直位置”设置为“底部”，
⑦ 单击“确定”按钮，为了把完成后的样式表应用到网页文档中，选择操作界面下面的标记 <td.back> 后，在属性面板中选择“样式”下拉列表中的“ back” 选项。
⑧ 保存文档，按 F12键预览。
3 ．区块面板 区块面板可以精确定义整段文本中文字的
间距、对齐方式和文字缩进等属性。如下图所示：
4 ．方框面板 方框样式是定义特定元素的大小及其与周围元素的间距等属性。
5 ．边框面板 使用“ CSS 的规则定义”窗口的“边框”面
板可以定义元素周围的边框的设置（如宽度、颜色和样式）。见下图。可以为边框的四边指定不同的颜色，不同的宽度和不同类型的边框线。
6 ．列表面板 “列表”面板可以定义列表样式，可以选择图像取代项目符号。如
下图所示：
• “ 类型”：设置项目符号的外观。• “ 项目符号图像”：可以为项目符号指定自定义图像。• “ 位置”：设置列表项目的换行位置。“内”表示应用该样式的段落过长而自动换行时，直接显示在旁边的空白上，不进行缩进；“外”表示应用该样式的段落过长而自动换行时，以缩进方式显示。
7 ．定位面板 定位样式主要用来定义层在页面中的排布相关
属性。如下图所示：
8 ．扩展面板 “CSS 的规则定义”窗口的“扩展”面板包
括分页、光标和滤镜等选项。如图所示：
5.6 5.6 习题答案习题答案一、填空题：1. 类样式，标签样式，高级样式； 2. 链接，导入。二、选择题： 1. C； 2. A三、判断题1. 2. × 四、简答题1 ．答：（ 1 ）内容结构和格式控制相分离；（ 2 ）精确控制网页外观；
（ 3 ）制作体积小，下载页面快；（ 4 ）快速规格网页样式；（ 5 ）兼容不同浏览器。
2 ．答：内部样式表是将 CSS 样式的定义直接写在 HTML 文档 Head 部分的Style 标签内，仅供该网页使用。外部样式表是一系列存储在一个单独的外部文件（ .css 文件，并非 HTML 文件）中的 CSS 样式。利用文档head 部分中的链接，该文件被链接到 Web站点中的一页或多页上。
3 ．答：