《Dreamweaver 网页设计》第8章 CSS 样式表

Dreamweaver网页设计 第8章CSS样式表

Dreamweaver 网页设计 第8章 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样式表概述 81.1什么是CSS? CSS也被称为层叠样式表。是一系列格式设置规则,它们控制Web页面 内容的外观。使用CSS设置页面格式时,可以将内容与表现形式分 开。使用CsS可以非常灵活并更好地控制具体的页面外观,从精确 的布局定位到特定的字体和样式。直接在 dreamweaver中输入文字并 设置属性面板如图8-1 格式标题3 3M样式SE/CB量国 字体宋体 大小无 #F000日扫当 □页面属性 图8-1自动产生CSS样式“ STYLE1

8.1【课堂讲解】CSS 样式表概述 8.1.1什么是CSS？ CSS也被称为层叠样式表。是一系列格式设置规则，它们控制 Web 页面 内容的外观。使用 CSS 设置页面格式时，可以将内容与表现形式分 开。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确 的布局定位到特定的字体和样式。直接在dreamweaver中输入文字并 设置属性面板如图8-1。 图 8-1自动产生CSS样式“STYLE1

文档中文字效果如图8-2 胛eb页面内容的外 更奸遒控制具体的页面外视,从确的布局定位到特定的字体和月 图8-2文档中文字效果 源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式, 包括字体颜色、粗细、斜体、字体等 1)无标题文档/tit]e STILEI I 才定义的文字属性自动转换为cs 一系列格式设置规則,它们控制vb页面内容的外观。使用Css 设置页面格式时,请将 文件自身中,而用于定义代码表现形 样式表)或HTML 以非常灵活并更好地控制具体的页面外狠,从精确的布局定位到特定的字体和样式。/h3 21(/htn1 e1ass="srLE1"-引用上面定义的ss 图8-3自动产生的CSS源代码

文档中文字效果如图8-2。 图 8-2 文档中文字效果 源代码如图8-3。在文字属性面板中设置的文字属性自动转换为CSS样式， 包括字体颜色、粗细、斜体、字体等。 图 8-3 自动产生的CSS源代码

812CSS样式面板 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层 次结构,如图8-4所示。可以使用CSS样式面板附加外部CSS样式表 (按钮)、创建(按钮)、编辑(按钮)和删除(按钮)CSS样式。 全部正在 日样式 STILEI"的屈性 图8-4CSS样式面板

8.1.2 CSS样式面板 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层 次结构，如图8-4所示。可以使用CSS样式面板附加外部CSS样式表 （按钮 ）、创建（按钮 ）、编辑（按钮 ）和删除（按钮 ）CSS样式。 图 8-4 CSS样式面板

813cSs样式的类型 CSS类型包括三种:类、标签和高级。在 Dreamweaver中可以轻松设定 不同类型的CSS样式 1.类(可用于任何标签) 可作为 class属性应用于文本范围或文本块的自定义样式。注意类名称 必须以句点开头,可以包含任何字母和数字组合。如果没有输入开头 的句点, Dreamweaver将自动输入句点,如图85。 新建CSs规则 择器类型:⊙类可应用于任何标签)C) 确定 ○标签新定义特定标签的外观)①) O高级(ID伪类选择器等)) 定义在:O新建样式表文件 ⊙仅对该文档 帮助 图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规则 选择器类型:○类可应用于任何标签)C) L确定 ⊙标签重新定义特定标签的外观)〔) O高级(I、伪类选择器等)④ 取消 标签: table 义在:O新建样式表文件 ⊙仅对该文档 帮助 3.高级(D、伪类选择器等) 为具体某个标签组合或所有包含特定ld属性的标签定义格式 设置。提供的选择器包括a: active、a: hover、a:|ink和 a: visited四种,如图8-7。 选择类型:O类可呵应用于任问标签)) O标签新定义特定标签的外观) ⊙商级(ID、伪类选择器等)④) 选择器 图8-7高级

3．高级（ID、伪类选择器等） 为具体某个标签组合或所有包含特定 Id 属性的标签定义格式 设置。提供的选择器包括 a:active、a:hover、a:link 和 a:visited四种，如图8-7。 图 8-7高级

821CSS样式的创建、应用、编辑与删除 读者可以创建一个CSS样式(或称规则)来自动完成HTML标签的格 式设置或 class属性所标识的文本范围的格式设置。创建CSS样式步 骤如下: (1)创建如图所示的网页文档(也可以直接打开本章目录下的 “ index htm”文件),如图8-9 幕游圆奏欢還光临游同 北京景区 己接待中外 0多位外国元首及世 图8-9“ ndex htm”文件

8.2.1 CSS样式的创建、应用、编辑与删除 读者可以创建一个 CSS 样式（或称规则）来自动完成 HTML 标签的格 式设置或 class 属性所标识的文本范围的格式设置。创建CSS样式步 骤如下： （1） 创建如图所示的网页文档（也可以直接打开本章目录下的 “index.html”文件），如图8-9。 图 8-9 “index.html”文件

2)在“CSS样式”面板中,单击面板右下侧的“新建CSS规 则”()按钮或选择菜单【文本】->【CSS样式】->【新建】命令, 显示“新建CSS规则”对话框。 所 日(样式 biaoti”的屈性 Eani1y“黑体 图8-10cSs样式面板 (3)在“新建CSS规则”对话框中,设置“名称”项为“. biaoti”,如 图8-11 选择器类型:⊙类应用于任问标签)c) O标签重新定义精定标签的外观)①) O高级(ID、伪类选择器等)④) 定义在O[新建样式表文件 ⊙仅对该文档 帮助 图811“新建cS规则”对话框“bao

（2） 在“CSS 样式”面板中，单击面板右下侧的“新建 CSS 规 则”( ) 按钮或选择菜单【文本】->【CSS 样式】->【新建】命令， 显示“新建CSS 规则”对话框。 图 8-10 CSS样式面板 （3） 在“新建CSS 规则”对话框中，设置“名称”项为“.biaoti”，如 图8-11。 图 8-11 “新建CSS 规则”对话框－“.biaoti

(4)单击【确定】按钮,显示“ biaoti的CSS规则定义”对话框。 (5)在“ biaoti的CSS规则定义”对话框中,设置各个选项如图8- 2 宇体):黑体 行高):正常 修饰@):口下戈线① 额色):回0 匚确定匚取消[应用匚帮助 图8-12“ biaoti的Css规则定义”对话框 单击【确定】按钮,完成创建CSS样式。 选择要设置CSS样式的文字,本例为文字“北京景区”。 在属性面板中选择“样式”下拉菜单并选择样式“ biaoti(图 8-13)或选择菜单【文本】>【CSS样式】->【baoi】命 令

（4） 单击【确定】按钮，显示“.biaoti的CSS 规则定义”对话框。 （5）在“.biaoti的CSS 规则定义”对话框中，设置各个选项如图8- 12。 图 8-12 “.biaoti的CSS 规则定义”对话框 单击【确定】按钮，完成创建CSS样式。 选择要设置CSS样式的文字，本例为文字“北京景区”。 在属性面板中选择“样式”下拉菜单并选择样式“biaoti”（图 8-13）或选择菜单【文本】->【CSS 样式】->【biaoti】命 令