第20章 样式风格设计

《第20章 样式风格设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作文达学院第20章样式风格设计20.2CSS样式面板20.3CSS样式的创建20.1CSS样式表概述20.4CSS样式的管理20.5CSS样式中滤镜的使用20.6本章小结文达学院计算机一系20.1CSS样式表概述20.1.1什么是CSSCSS英文全称为CascadingStyleSheets，中文全称为层叠样式表，更多的人把它称之为样式表，以下简称为CSS样式。它用于控制Web页面内容的外观，以便用户在站点的多个页面中创建一致的样式风格。文达学院计算机一系20.1.2CSS的作用CSS技术可将网页要展示的内容与样式设定分开，也就是将网页的外观设

2、定信息从网页内容独立出来，并可以存成独立的样式文件，集中管理。CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小、颜色等，更加入了重叠文字、区块变化及任意位置放置等多项新属性。文达学院计算机一系20.1.3CSS的语法规则CSS样式由两部分组成：选择器和声明。例如：H1{Font-size:16pixels;Font-family:Helvetica;Font-weight:bold;}CSS术语中的cascading表示向同一个元素应用多种样式的能力。多个定义的样式向下“层叠”到Web页面上的元素，并最终创建用户想要的设计效果。文达学院计算机一

3、系默认状态下“CSS样式”面板为显示状态，如果未显示，可选择【窗口】

4、【CSS样式】菜单命令，“CSS样式”面板中包含两种模式：“全部”模式和“正在”模式。如图所示。20.2CSS样式面板文达学院计算机一系20.2.1“正在”模式下的“CSS样式”面板默认状态下是“正在”模式，面板显示了三个窗格：“所选内容的摘要”窗格：“规则”窗格：“属性”窗格：文达学院计算机一系20.2.2“全部”模式下的“CSS样式”面板在“全部”模式，面板显示了两个窗格：“所有规则”窗格：“属性”窗格：文达学院计算机一系20.2.3“CSS样式”面板中的按钮面板底部共有7个按钮：“

5、显示类别视图”按钮“显示列表视图”按钮“只显示设计属性”按钮“附加样式表”按钮“新建CSS规则”按钮“编辑样式”按钮“删除CSS规则”按钮文达学院计算机一系20.3.1设置CSS样式类别及使用范围在“CSS样式”面板，并单击面板右下角的“新建CSS规则”按钮，弹出“新建CSS规则”对话框，这是在新建CSS规则前先要完成的工作，即设置CSS样式类别及使用范围，如图所示。20.3CSS样式的创建文达学院计算机一系（1）“选择器类型”选项组用于选择要定制的样式类型：类（可用于任何标签）：创建可作为class属性应用于文本范围或文本块的自定义样式。标签（重新定义特

6、定标签的外观）：重定义特定HTML标签的默认格式设置。高级（ID、伪类选择器等）：为具体某个标签组合或所有包含Id属性的标签定义格式设置。文达学院计算机一系（2）“名称”下拉列表随“选择器类型”的类型不同而变化。选择“类”选项时：则为“名称”文本框，用于输入样式名称。此类样式名必须以英文句号开头，可以包含任何字母和数字组合，如.style1。选择“标签”选项时：则为“标签”下拉列表，用于输入或从下拉列表选择一个HTML标签。选择“高级”选项时：则为“选择器”下拉列表，用于输入一个或多个HTML标签，也可以从下拉列表提供的选择器中选择一个标签。文达学院计算机

7、一系（3）“定义在”选项组用于定义样式的使用范围。“新建样式表文件”单选按钮：定义外部层叠样式表。选择此按钮后单击“确定”按钮，弹出“保存样式表文件为”对话框，要求将样式保存成一个样式文件。“仅对该文档”单选按钮：定义只能应用于该文档的样式。文达学院计算机一系当完成“新建CSS规则”对话框的设置，随后会弹出“CSS规则定义”对话框，如图所示。对话框将CSS样式分为8个类别，下面分别说明各个分类中各元素的设置内容。文达学院计算机一系1．“类型”部分如图所示：20.3.2创建CSS样式文达学院计算机一系2．“背景”部分如图所示：文达学院计算机一系3．“区块”部

8、分如图所示：文达学院计算机一系4．“方框”部分如图所示：文达学院计算机一系5．“边框”部分如图所示：文达学院计算机一系6．“列表”部分如图所示：文达学院计算机一系7．“定位”部分如图所示：文达学院计算机一系8.“扩展”部分如图所示：文达学院计算机一系21.4CSS样式的管理21.4.1应用自定义的CSS样式１．应用自定义的CSS样式（1）在文档窗口中，选定要应用样式的对象。可以在文档窗口中直接选择对象，也可以使用窗口底部状态栏的标签选择器来选择对象。（2）从“属性”检查器上的“样式”列表中选择要应用的样式，如图所示。文达学院计算机一系说明:有些样式应用后会

9、立刻在文档窗口中显示出来，有些样式应用后需在IE浏览器中才能显示出