《网页设计与制作第21章样式风格设计》由会员分享，可在线阅读，更多相关《网页设计与制作第21章样式风格设计（42页珍藏版）》请在金锄头文库上搜索。
1、第21章 样式风格设计,第21章 样式风格设计,CSS是网页设计中众多样式的集成，它可以使页面风格统一化和标准化。CSS提供的链接功能可以让所有的网页使用同一种样式，使网页的维护更新变得轻松、高效。,21.1 CSS样式表概述 21.2 CSS样式面板 21.3 CSS样式的创建 21.4 CSS样式的管理 21.5 CSS样式中滤镜的使用 21.6 本章小结,21.1 CSS样式表概述,21.1.1 什么是CSS CSS英文全称为Cascading Style Sheets，中文全称为层叠样式表，更多的人把它称之为样式表，以下简称为CSS样式。网页设计最初是用HTM L标记来定义页面文档及格
2、式，例如标题、段落、表格等，但这些标记不能满足更多的文档样式需求，为了解决这个问题，诞生了一种称为样式表（Style Sheets）的技术，全称为层叠样式表。它用于控制Web页面内容的外观，以便用户在站点的多个页面中创建一致的样式风格。,21.1.2 CSS的作用CSS技术可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并可以存成独立的样式文件，集中管理，这样就可让多个网页文件共同使用它，省去了大量重复设置的麻烦。特别是当要更新这种风格样式时，只需修改这个CSS文件中相应的行，那么整个网站的所有页面都会随之发生变化。,21.1 CSS样式表概述,21.1.3
3、CSS的语法规则CSS样式由两部分组成：选择器和声明。例如： H1 Font-size: 16 pixels;Font-family: Helvetica;Font-weight: bold; CSS术语中的cascading表示向同一个元素应用多种样式的能力。多个定义的样式向下“层叠”到Web页面上的元素，并最终创建用户想要的设计效果。,21.1 CSS样式表概述,选择器, 之间为声明,属性,值,默认状态下“CSS样式”面板为显示状态，如果未显示，可选择【窗口】|【CSS样式】菜单命令，“CSS样式”面板中包含两种模式：“全部”模式和“正在”模式。如图所示。,21.2 CSS样式面板,21.
4、2.1“正在”模式下的“CSS样式”面板默认状态下是“正在”模式， 面板显示了三个窗格： “所选内容的摘要”窗格： “规则”窗格： “属性”窗格：,21.2 CSS样式面板,21.2.2 “全部”模式下的“CSS样式”面板在“全部”模式，面板显示了 两个窗格： “所有规则”窗格： “属性”窗格：,21.2 CSS样式面板,21.2.3 “CSS样式”面板中的按钮面板底部共有7个按钮：,“显示类别视图”按钮,“显示列表视图”按钮,“只显示设计属性”按钮,“附加样式表”按钮,“新建CSS规则”按钮,“编辑样式”按钮,“删除CSS规则”按钮,21.2 CSS样式面板,21.3.1 设置CSS样式类别
5、及使用范围在“CSS样式”面板，并单击面板右下角的“新建CSS规则”按钮，弹出“新建CSS规则”对话框，这是在新建CSS规则前先要完成的工作，即设置CSS样式类别及使用范围， 如图所示。,21.3 CSS样式的创建,（1）“选择器类型”选项组用于选择要定制的样式类型： 类（可用于任何标签）：创建可作为class属性应用于文本范围或文本块的自定义样式。 标签（重新定义特定标签的外观）：重定义特定HTML标签的默认格式设置。 高级（ID、伪类选择器等）：为具体某个标签组合或所有包含Id属性的标签定义格式设置。,21.3 CSS样式的创建,（2）“名称”下拉列表随“选择器类型” 的类型不同而变化。
6、选择“类”选项时：则为“名称”文本框，用于输入样式名称。此类样式名必须以英文句号开头，可以包含任何字母和数字组合，如.style1。 选择“标签”选项时：则为“标签”下拉列表，用于输入或从下拉列表选择一个HTML标签。 选择“高级”选项时：则为“选择器”下拉列表，用于输入一个或多个HTML标签，也可以从下拉列表提供的选择器中选择一个标签。,21.3 CSS样式的创建,（3）“定义在”选项组用于定义样式的使用范围。 “新建样式表文件”单选按钮：定义外部层叠样式表。选择此按钮后单击“确定”按钮，弹出“保存样式表文件为”对话框，要求将样式保存成一个样式文件。 “仅对该文档”单选按钮：定义只能应用于该
7、文档的样式。,21.3 CSS样式的创建,当完成“新建CSS规则”对话框的设置，随后会弹出“CSS规则定义”对话框，如图所示。,对话框将CSS样式分为8个类别，下面分别说明各个分类中各元素的设置内容。,21.3 CSS样式的创建,1“类型”部分 如图所示：,21.3 CSS样式的创建,2“背景”部分 如图所示：,21.3 CSS样式的创建,3“区块”部分 如图所示：,21.3 CSS样式的创建,4“方框”部分 如图所示：,21.3 CSS样式的创建,5“边框”部分 如图所示：,21.3 CSS样式的创建,6“列表”部分 如图所示：,21.3 CSS样式的创建,7“定位”部分 如图所示：,21.
8、3 CSS样式的创建,8. “扩展”部分 如图所示：,21.3 CSS样式的创建,21.4 CSS样式的管理,21.4.1 应用自定义的CSS样式 应用自定义的CSS样式 （1）在文档窗口中，选定要应用样式的对象。可以在文档窗口中直接选择对象，也可以使用窗口底部状态栏的标签选择器来选择对象。 （2）从“属性”检查器上的“样式”列表中选择要应用的样式，如图所示。有些样式应用后会立刻在文档窗口中显示出来，有些样式应用后需在IE浏览器中才能显示出来。,取消对自定义CSS样式的应用要想取消文档中某个元素对自定义CSS样式的应用，可以在上面应用样式中介绍的各种下拉列表或菜单中选择“无”即可。也可以在“C
9、SS样式”面板中将该样式删除。,21.4 CSS样式的管理,21.4.2 附加外部CSS样式表用户可以选用自己文档中的所有样式表，也可以选用或链接已存在的样式表并应用到文档中。要附加外部的CSS样式表，可按下面进行操作： （1）在“CSS样式”面板，单击面板下方的“附加样式表”按钮，弹出“链接外部样式表”对话框，如图所示。,21.4 CSS样式的管理,说明： 样式表文件的扩展名为“.css”。 “链接”：只是读入样式表中的信息，而没有将信息导入到当前文档中。 “导入”：将外部CSS样式表中的信息导入到当前文档中。 在 “媒体”下拉列表中选择样式表的目标媒体。 单击“确定”按钮，在CSS样式面板
10、的“全部”模式下，可以看到附加的外部CSS样式表文件。,21.4 CSS样式的管理,21.4.3 导出外部CSS样式表为了达到样式的共享，可以导出文档中存在的所有样式： （1）打开CSS样式面板，切换到“全部”模式。 （2）选择要导出的样式，并单击鼠标右键，从弹出的菜单中选择“导出”，出现“导出样式为CSS文件”对话框。 （3）设置样式文件的文件名和文件夹位置，单击“保存”按钮，关闭对话框，完成样式的导出。,21.4 CSS样式的管理,21.4.4 编辑CSS样式表 编辑当前文档中创建的CSS样式表在CSS样式面板的“全部”模式下，选择要修改的样式，然后采取以下任意一种方法来进行编辑： 单击鼠
11、标右键，从菜单中选择“编辑”，在对话框中编辑。 单击CSS样式面板下方的“编辑样式”按钮。 双击要修改的样式。 在“全部”模式的“属性”窗格中，直接进行编辑。 注：编辑完成后，系统会立即重新格式化所有该样式表控制的对象。,21.4 CSS样式的管理,2编辑外部CSS样式表 方法一：在应用它的文档中进行编辑。编辑方法与文档中创建的样式的编辑方法一样。编辑时，会自动弹出样式表文件的代码窗口，所进行的修改不仅会立即反映到文档窗口中，而且也会反映到外部样式表文件中，因此，在编辑完成后还需对该样式文件进行保存。 方法二：打开外部样式表文件进行编辑。打开需要更新的样式表文件，直接对其中的样式属性进行编辑，
12、完成后保存并关闭样式表文件。网站中所有应用该样式表的内容将全部自动更新。,21.4 CSS样式的管理,21.4.5 CSS样式的优先顺序 （1）如果将两种样式应用于同一文本，在没有冲突的情况下，浏览器显示这两种样式的所有属性；在有冲突的情况下，按CSS样式的优先规则处理冲突属性。 （2）发生冲突时，特别说明的属性优先于要继承的属性。例如：body color： green ；p color： red ； 由于特别说明了的属性优先于继承的属性，所以标签内的文字呈红色显示。,21.4 CSS样式的管理,（3）如果应用于同一文本的两种样式发生冲突，则浏览器根据在代码中的顺序优先显示最里面的样式（代码
13、窗口中离文本本身最近的样式）的属性。 （4）如果样式表中的属性与HTML标签中的属性发生冲突时，则定义文本最内层的属性优先显示。例如： 如果定义了样式：I font-family：宋体； 那么如果两个样式 发生冲突中文本“两个样式”将会以离它最近的“华文彩云”字体和斜体显示。,21.4 CSS样式的管理,如果将上例改为如下形式： 如果两个样式 发生冲突文本“两个样式”则会以离它最近的中定义的字体“宋体”字体和斜体显示。,21.4 CSS样式的管理,21.5 CSS样式中滤镜的使用,21.5.1 Alpha 滤镜 功能：指定一个元素的透明度。 例如：设置滤镜 Alpha(Opacity=100,
14、 FinishOpacity=10, Style=2, StartX=100, StartY=75, FinishX=200, FinishY=150),21.5.2 Blur 滤镜 功能：指定一个元素的模糊效果。 例如：设置滤镜 blur（add=true，direction=135，strength=10）,21.5 CSS样式中滤镜的使用,21.5.3 FlipH， FlipV 滤镜 功能：这两个滤镜可以分别将对象水平翻转和垂直翻转。 例如：设置滤镜 FilpH与FilpV,21.5 CSS样式中滤镜的使用,21.5.4 Chroma 滤镜 语法：filter:chroma（color=
15、color） 功能：可以设置一个对象中指定的颜色为透明色。 21.5.5 DropShadow 滤镜 功能：可以给对象添加阴影效果。 例如： 设置滤镜dropshadow（color=gray，offx=5，offy=5，positive=1）,21.5 CSS样式中滤镜的使用,21.5.6 Glow 滤镜 功能：使对象的边缘产生类似发光的效果。 例如：设置滤镜glow（color=red，strength=10）,21.5 CSS样式中滤镜的使用,21.5.7 Gray ，Invert，Xray 滤镜 功能：Gray滤镜是把一张图片变成灰度图。Invert滤镜是把对象的可视化属性全部翻转，包
16、括色彩、饱和度、和亮度值。Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X光片”效果。 如图：三种滤镜后的效果。,21.5 CSS样式中滤镜的使用,21.5.8 Light 滤镜 语法：filter:light 功能：这个滤镜可以模拟光源的投射效果。一旦为对象定义了“light”滤镜属性，那么就可以调用它的方法来设置或者改变属性。 21.5.9 Mask 滤镜 语法：filter:mask（color=color） 功能：可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。,21.5 CSS样式中滤镜的使用,21.5.10 Shadow 滤镜 功能：可以在指定的方向建立物体的投影。 例如：设置滤镜shadow（color=gray，direction=225）,21.5 CSS样式中滤镜的使用,21.5.11 Wave 滤镜 功能：把对象按照垂直的波形样式打乱。 例如：设置滤镜Wave(Add=true, Freq=3, LightStrength=10, Phase=10, Strength=10),
