第4章样式在网页中的应用1.pptVIP

第4章 样式在网页中的应用 本章学习目标 主要学习网页样式设计的原理和应用。样式的分类变化和应用范围非常丰富，这非常有利于美化网页。可以通过导出样式文件并应用于其它文档，使得整个网站的设计风格一致。 4．1 样式概述 级联样式表（Cascading Style Sheet，简称CCS），是网页元素外观属性的集合。它可以定义文字、表格、图像、表单等网页元素的属性。 1．使用CSS样式的优点: 提供便利的更新功能；更新 CSS 样式时，使用该样式的所有文档的格式都自动更新为新样式 4．1 样式概述 2．CSS 样式的类型 （1）自定义 CSS 样式（也称为类样式） （2）HTML 标签样式 （3）CSS 选择器样式 3．CSS 标签可以驻留的位置 （1）外部 CSS 样式表 （2）内部（或嵌入式）CSS 样式表 4．2 在网页中添加样式 4．2．1创建新的 CSS 样式 1．打开“新建 CSS 样式”对话框 4．2 在网页中添加样式 2．定义CSS 样式的类型(见上图) 3．选择定义样式的位置 4．设置的样式选项 4．2．2 创建和应用自定义CSS样式 1．创建自定义CSS样式 2．应用自定义样式 3．将自定义样式从选定内容中删除 4．2 在网页中添加样式 4．2．3 创建“重定义标签”样式 1．创建“重定义标签”样式 4．2 在网页中添加样式 2．控制段落“文字缩进” 4．2．4 创建“定义标签组合”样式 1．特定标签组合的格式 4．2 在网页中添加样式 2．包含特定 id 属性的所有标签的样式 3．修改超级链接文本样式 “a:link”：控制网页中超级链接文本的普通状态外观。 “a:active”：控制当前活动的超级链接文本的外观。 “a:hover”：控制鼠标悬停状态下超级链接文本的外观。 “a:visited”：控制已经访问的超级链接文本的外观。 4．3 CSS样式定义的选项说明 4．3．1 “类型”分类 “字体” ：为样式设置字体 “大小” ：定义文本大小 “样式” ：将“正常”、“斜体”或“偏斜体”指定为字体样式 “行高” ：设置文本所在行的高度 “修饰” ：向文本中添加下划线、上划线或删除线，或使文本闪烁 “粗细” ：对字体应用特定或相对的粗体量 “变量” ：设置文本的小型大写字母变量 “大小写” ：将选定内容中的每个单词的首字母大写或将文本设置为全部大写或小写 “颜色” ：设置文本颜色 4．3 CSS样式定义的选项说明 4．3．2 “背景”分类 （1）“背景颜色”：设置元素的背景颜色 （2）“背景图像”：设置元素的背景图像 （3）“重复”：确定当图像的尺寸小于对象尺寸时，是否以及如何重复背景图像 （4）“附件”：确定背景图像是固定在它的原始位置还是随内容一起滚动 （5）“水平位置”和“垂直位置”：指定背景图像相对于元素的初始位置 4．3 CSS样式定义的选项说明 4．3．3 定义 CSS 样式块属性 （1）“单词间距”：设置单词之间的距离 （2）“字母间距”：增加或减小字母或字符的间距 （3）“垂直对齐”：指定应用它的元素的垂直对齐方式 （4）“文本对齐”：设置元素中的文本对齐方式 （5）“文本缩进”：指定第一行文本缩进的程度 （6）“空格”：确定如何处理元素中的空白 （7）“显示”：指定是否以及如何显示元素 4．3 CSS样式定义的选项说明 4．3．4 “定位”分类 （1）“类型”：确定浏览器应如何来定位层 （2）“显示”：确定层的初始显示条件 （3）“Z 轴”：确定层的堆叠顺序 （4）“溢出”（仅限于 CSS 层）：确定在层的内容超出它的大小时的处理方法 （5）“定位”：指定层的位置和大小 （6）“剪辑”：定义层的可见部分 4．3 CSS样式定义的选项说明 4．3．5 “扩展”分类 4．3 CSS样式定义的选项说明 1．分页 2．“光标” 3．过滤器 （1）Alpha滤镜 （2）雾化效果 （3）阴影效果 （4）FlipH，FlipV滤镜 （5）发光效果 （6）Gray，Invert，xGray （7）Wave滤镜 4．4 导出样式表文件 若要从文档中导出 CSS 样式并创建 CSS 样式表，可执行以下操作： （1）选择“文件”/“导出”/“CSS 样式”或选择“文本”/“CSS 样式”/“导出”。 出现“导出样式为 CSS 文件”对话框 （2）输入样式表的名称，然后单击“保存”。样式随即保存为 CSS 样式表 4．5 链接到或导入外部 CSS 样式表 1．导入或链接外部 CSS 样式表 4．5 链接到或导入外部 CSS 样式表 2．导入与链接外部 CSS 样式表的区别 （1）导入的外部 CSS 样式