第18章 使用样式表.ppt

第18章如何使用样式表 使用样式表 不但可以定义文本等内容的格式 同时也可以对页面进行布局 在W3C发布的Web标准中 推荐使用CSS进行布局代替传统的表格布局 下面详细讲解关于CSS样式表的知识 18 1样式表简介 本节主要讲解样式表的基础知识 其中包括样式表的概念 样式表的作用 以及Web标准的基础知识 18 1 1样式表的概念 级联样式表又称为CSS 是CascadingStyleSheet的缩写 通常也简称为样式表 是W3C组织制定的 是用于控制网页样式的一种标记性语言 包括CSS1和CSS2两个部分 其中CSS2是1998年5月发布的 包含了CSS1的内容 也是现在通用的标准 18 1 2样式表的作用 样式表的主要作用是用来定义元素的显示效果 其中包括定义元素的大小 边框 边界 补白 背景等 同时样式表还可以定义元素内部文本的显示效果 包括字体的选择 字体的大小 字体的样式 行高 缩进等 除此之外 使用样式表还可以定义元素的显示位置 浮动效果 以及链接内容的显示效果等 使用样式表可以完成文档中所有内容的布局和修饰效果 18 1 3W3C推荐的页面布局 Web标准可以分为三方面 结构标准语言 主要包括XHTML和XML 表现标准语言 主要包括CSS 行为标准 主要包括对象模型 ECMAScript 下面简单介绍一下这些标准 1 结构标准语言结构标准语言包括两个部分 XML XHTML 其具体区别如下所示 18 1 3W3C推荐的页面布局 2 表现标准语言CSS是CascadingStyleSheet 层叠样式表 的缩写 目前推荐遵循的是W3C于1998年5月12日推出的CSS2 CSS标准建立的目的是CSS进行网页布局 控制网页的表现 CSS标准布局与XHTML结构语言相结合 可以实现表现与结构相分离 提高网站的使用性和可维护性 18 1 3W3C推荐的页面布局 3 行为标准行为标准也包括两个部分 DOM ECMAScript 其具体区别如下所示 DOM是DocumentObjectModel 文档对象模型 的缩写 W3C建立的W3CDOM是建立网页与Script 或程序语言 沟通的桥梁 其实现了访问页面中标准组件的一种标准方法 18 2创建CSS样式 使用Dreamweaver新建CSS样式时 可以选择CSS的类型 其中每种类型的作用和注意事项都不相同 下面分别进行讲解 18 2 1新建CSS样式 在Dreamweaver中新建CSS样式的方法 如下所示 18 2 2使用类 在Dreamweaver中 类型样式可以使用在多个内容上 具体操作如下所示 18 2 3使用标签 在Dreamweaver中的标签类型样式 可以使用在所有相同标签内容上 具体操作如下所示 18 2 4使用高级 在Dreamweaver中 高级类型样式在文档中是唯一标识的标签内容 同时会为相应标签添加唯一标识的ID 具体操作如下所示 18 3新建CSS样式文件和附加样式 在Dreamweaver中 可以新建独立的CSS样式文件 并通过附加样式的方法 使用文档外独立的样式文件 下面分别进行讲解 18 3 1新建CSS样式文件 在Dreamweaver中新建CSS样式文件的操作 如下所示 18 3 2使用附加样式 在Dreamweaver中 可以通过附加样式的方法 使用文档以外的CSS样式文件 具体操作如下所示 18 4使用CSS样式面板 在Dreamweaver中 可以使用CSS样式面板显示和编辑CSS样式 通过CSS样式面板编辑样式 可以更加方便直观 具体操作如下所示 1 打开CSS样式面板 18 4使用CSS样式面板 2 使用 全部 模式在 全部 模式下 如图18 20所示 CSS样式面板分为两个部分 上面是所有规则面板 下面是属性面板 在所有规则面板中 显示了页面以及链接文件中定义的所有CSS规则 18 4使用CSS样式面板 3 使用 正在 模式在 正在 模式下 如图18 21所示 CSS样式面板分为三个部分 上面是所选内容摘要面板 中间是关于内容面板 下面是属性面板 其含义如下所示 18 4使用CSS样式面板 4 使用属性面板在属性面板的底部 含有更改面板显示和操作的按钮 其中部分按钮的作用 如下所示 18 5设置CSS属性 在Dreamweaver中 可以定义的CSS属性有很多 其中包括类型 背景 区块 方框 边框 列表 定位 扩展等8个类别 下面通过示例 讲解每种类别中各个属性使用的属性值和效果 其中示例中使用的元素和内容 在未定义任何样式时 显示效果如图所示 18 5 1类型属性 在CSS规则定义对话框中 选择分类中的 类型 选项 打开 类型 选项对话框 在 类型 选项中 可以定义元素三个部分的显示效果 分别为定义字体的相关属性 定义段落的相关属性 定义文本的样式 下面分别进行讲解 1 定义字体的相关属性 18 5 1类型属性 2 定义段落的相关属性段落的相关属性 主要是指段落中文本的行高属性 具体操作如下所示 18 5 1类型属性 3 定义文本的样式文本的样式是指段落中文本的下划线 上划线或者删除线等属性 具体操作如下所示 18 5 2背景属性 在CSS规则中 背景属性用来定义元素使用的背景颜色 背景图像 以及背景图像的显示位置 重复效果等 具体操作如下所示 18 5 3区块属性 在CSS规则中 区块属性用来定义元素中文本的文字间距 对齐效果 文本缩进 空格的显示等 具体操作如下所示 18 5 4方框属性 在CSS规则中 方框属性用来定义元素的宽度 高度 元素和内容之间的距离 元素和其他元素之间的距离 以及浮动和清除等 具体操作如下所示 18 5 5边框属性 在CSS规则中 边框属性用来定义元素边框的显示效果 边框宽度 边框颜色等 具体操作如下所示 18 5 6列表属性 在CSS规则中 列表属性用来定义列表元素中项目符号的显示效果 项目符号的替代图像 项目符号的显示位置等 具体操作如下所示 18 5 7定位属性 在CSS规则中 定位属性用来定义元素边框的显示效果 边框宽度 边框颜色等 具体操作如下所示 18 5 8扩展属性 在CSS规则中 扩展属性用来定义打印时的分页效果 光标的显示效果 CSS滤镜等 具体操作如下所示 18 5 9CSS滤镜 在Dreamweaver中 选择分类中的 扩展 选项 打开CSS规则定义对话框 在 过滤器 选项中可以定义各种CSS滤镜 其中部分滤镜的使用方法如下所示 1 透明度 滤镜 18 5 9CSS滤镜 2 模糊 滤镜 18 5 9CSS滤镜 3 波浪 滤镜 18 6定义链接的样式 在Dreamweaver中 可以使用CSS样式定义链接内容使用的样式 具体操作如下所示 18 7专家总结 CSS样式表的内容很多 也较为复杂 其主要作用是用来定义