Dreamweaver网页设计 CSS样式表
Dreamweaver 网页设计 CSS 样式表
【学习概述】 现在，对于一个高质量的网站来说，应用 CSS样式表是必不可少的。CSS样式表的主要优 点是便于对网页整体风格进行控制，当更新一处 的CSS规则时，使用该已定义样式的所有文档的 格式都会自动更新为新样式，并且CSS还可以制 作网页特性。本章内容包括：CSS的基本概念 CSS的类型、创建CSS样式表、编辑样式表、 CSS滤镜效果、CSS的冲突等内容。本章重点内 容是3种常用CSS样式类型的应用，难点是CSS 的冲突
【学习概述】 现在，对于一个高质量的网站来说，应用 CSS样式表是必不可少的。CSS样式表的主要优 点是便于对网页整体风格进行控制，当更新一处 的 CSS 规则时，使用该已定义样式的所有文档的 格式都会自动更新为新样式，并且CSS还可以制 作网页特性。本章内容包括：CSS的基本概念、 CSS的类型、创建CSS样式表、编辑样式表、 CSS滤镜效果、CSS的冲突等内容。本章重点内 容是3种常用CSS 样式类型的应用，难点是CSS 的冲突
8.1【课堂讲解】CSS样式表概述 8.1.1什么是CSS? CSS也被称为层叠样式表。是一系列格式设置规则，它们控制Web页面 内容的外观。使用CSS设置页面格式时，可以将内容与表现形式分 开。使用CSS可以非常灵活并更好地控制具体的页面外观，从精确 的布局定位到特定的字体和样式。直接在dreamweaver中输入文字并 设置属性面板如图8-1。 ”性 格式标题3样式5m/ cS3]B【量置望■ 字体宋体大小无 0000扫扫 页面犀性。☐ 图8-1自动产生CSS样式“STYLE1
8.1【课堂讲解】CSS 样式表概述 8.1.1什么是CSS？ CSS也被称为层叠样式表。是一系列格式设置规则，它们控制 Web 页面 内容的外观。使用 CSS 设置页面格式时，可以将内容与表现形式分 开。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确 的布局定位到特定的字体和样式。直接在dreamweaver中输入文字并 设置属性面板如图8-1。 图 8-1自动产生CSS样式“STYLE1
文档中文字效果如图8-2 图8-2文档中文字效果 源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式 包括字体颜色、粗细、斜体、字体等。 00 入才定义的文字性目动种我为© 11-引用上面定义的c 图8-3自动产生的CSS源代码
文档中文字效果如图8-2。 图 8-2 文档中文字效果 源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式， 包括字体颜色、粗细、斜体、字体等。 图 8-3 自动产生的CSS源代码
8.1.2CSS样式面板 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层 次结构，如图8-4所示。可以使用CSS样式面板附加外部CSS样式表 (按钮)、创建（按钮）、编辑（按钮）和删除（按钮）CSS样式。 1“的属性 ode-bi 图8-4CSS样式面板
8.1.2 CSS样式面板 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层 次结构，如图8-4所示。可以使用CSS样式面板附加外部CSS样式表 （按钮 ）、创建（按钮 ）、编辑（按钮 ）和删除（按钮 ）CSS样式。 图 8-4 CSS样式面板
8.1.3CSS样式的类型 CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻松设定 不同类型的CSS样式 1.类（可用于任何标签》 可作为class属性应用于文本范围或文本块的自定义样式。注意类名称 必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头 的句点，Dreamweaver将自动输入句点，如图8-5。 新建CSS煤则 海关型⊙ 名称：sm 8m 图8-5类 2.标签（重新定义特定标签的外观） 重定义特定HTML标签的默认格式设置。当读者选择该选项时，可以在 《“标签”项的下拉菜单中选择一个标签或直接输入一个标签。如图8-6
8.1.3 CSS 样式的类型 CSS类型包括三种：类、标签和高级。在Dreamweaver中可以轻松设定 不同类型的CSS样式。 1．类（可用于任何标签） 可作为 class 属性应用于文本范围或文本块的自定义样式。注意类名称 必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头 的句点，Dreamweaver 将自动输入句点，如图8-5。 图 8-5 类 2．标签（重新定义特定标签的外观） 重定义特定 HTML 标签的默认格式设置。当读者选择该选项时，可以在 “标签”项的下拉菜单中选择一个标签或直接输入一个标签。如图8-6
新建CSS炽则 选择器类型：O英可应用于任何标签)C) 确定 ⊙标签重新定义特定标签的外观)) O高级(D、伪类选择器等)A) 取消 标签：table 定义在：O新建样式表文件) ⊙仅对该文档 帮助 3.高级(D、伪类选择器等) 为具体某个标签组合或所有包含特定d属性的标签定义格式 设置。提供的选择器包括a:active、a:hover、a:link和 a:visited四种，如图8-7。 新建C55,财 定在 图8-7高级
3．高级（ID、伪类选择器等） 为具体某个标签组合或所有包含特定 Id 属性的标签定义格式 设置。提供的选择器包括 a:active、a:hover、a:link 和 a:visited四种，如图8-7。 图 8-7高级
8.2.1CSS样式的创建、应用、编辑与删除 读者可以创建一个CSS样式（或称规则）来自动完成HTML标签的格 式设置或class属性所标识的文本范围的格式设置。创建CSS样式步 骤如下： (1)创建如图所示的网页文档（也可以直接打开本章目录下的 “index.html"文件)，如图8-9。 旅嘴网 欢迎光临旅游网 北京景区 量葉线 毫香 图8-9“index.html"文件
8.2.1 CSS样式的创建、应用、编辑与删除 读者可以创建一个 CSS 样式（或称规则）来自动完成 HTML 标签的格 式设置或 class 属性所标识的文本范围的格式设置。创建CSS样式步 骤如下： （1） 创建如图所示的网页文档（也可以直接打开本章目录下的 “index.html”文件），如图8-9。 图 8-9 “index.html”文件
(2)在“CSS样式”面板中，单击面板右下侧的“新建CSS规 则”()按钮或选择菜单【文本】->【CSS样式】->【新建】命令， 显示“新建CSS规则”对话框。 图8-10CSS样式面板 (3) 在“新建CSS规则”对话框中，设置“名称”项为“biaoti'”,如 图8-11。 湖定 取用☐ 名l 定义在：0新样式文件) ⊙权对漆文档 图8-1不“新建CS$规侧”对话框 “.biaoti
（2） 在“CSS 样式”面板中，单击面板右下侧的“新建 CSS 规 则”( ) 按钮或选择菜单【文本】->【CSS 样式】->【新建】命令， 显示“新建CSS 规则”对话框。 图 8-10 CSS样式面板 （3） 在“新建CSS 规则”对话框中，设置“名称”项为“.biaoti”，如 图8-11。 图 8-11 “新建CSS 规则”对话框－“.biaoti
(4)单击【确定】按钮，显示“.biaoti的CSS规则定义”对话框。 (5)在“.biaoti的CSS规则定义”对话框中，设置各个选项如图8 12 b1aot1的CsS规则定义 牛体D:体 .16 式:正常 色)：09时 定取消☐皮用)帮助 图8-12“.biaoti的CSS规则定义”对话框 单击【确定】按钮，完成创建CSS样式。 选择要设置CSS样式的文字，本例为文字“北京景区”。 、在属性面板中选择“样式”下拉菜单并选择样式“biaoti”(图 8-13)或选择菜单【文本】->【CSS样式】->【biaoti】命 令
（4） 单击【确定】按钮，显示“.biaoti的CSS 规则定义”对话框。 （5）在“.biaoti的CSS 规则定义”对话框中，设置各个选项如图8- 12。 图 8-12 “.biaoti的CSS 规则定义”对话框 单击【确定】按钮，完成创建CSS样式。 选择要设置CSS样式的文字，本例为文字“北京景区”。 在属性面板中选择“样式”下拉菜单并选择样式“biaoti”（图 8-13）或选择菜单【文本】->【CSS 样式】->【biaoti】命 令