09-层叠样式表的应用.ppt

第9章CSS样式表的应用 本章重点 创建 编辑CSS样式 创建 编辑 选用CSS外部样式表 常用CSS特效滤镜的使用方法 第9章CSS样式表的应用 9 1使用CSS样式格式化网页元素9 2CSS样式概述9 3 CSS样式 面板的使用9 4实战演练 9 1使用CSS样式格式化网页元素 9 1 1案例综述为了使网页具有同一的风格 我们通常在网页中使用CSS样式美化 格式化页面 9 1使用CSS样式格式化网页元素 9 1 2案例分析CSS样式的创建有三种方式 一 是使用 属性 检查器或菜单命令创建应用于文本的样式的CSS规则 二 是在 页面属性 对话框中设置 三 是使用 CSS样式 面板创建和编辑CSS规则和属性 9 1使用CSS样式格式化网页元素 9 1 3实现步骤一 打开HTML网页二 设置页面属性 添加嵌入头部的CSS样式三 用 CSS样式 面板创建CSS样式四 在页面中应用CSS样式五 链接样式表 统一网站风格 9 2CSS样式概述 9 2 1CSS的特点其特点可以归结为以下3点 1 控制页面中的每一个元素 精确定位 2 对HTML语言处理样式的最好补充 3 把内容和格式处理相分离 减少工作量 9 2CSS样式概述 9 2 2CSS的类型自定义CSS样式自定义CSS样式 也称为类样式 可以将样式属性设置为任何文本范围或文本块 HTML标签样式HTML标签样式 用于重新定义特定标签 如H1的格式 创建或更改H1标签的CSS样式时 所有用H1标签设置了格式的文本都立即更新 CSS选择器样式CSS选择器样式重定义特定标签组合的格式 如每当H2标题出现在表格单元格内时都应用tdh2 或重定义包含特定id属性的所有标签的格式 9 2CSS样式概述 9 2 3CSS的3种存在方式1 外部文件方式外部CSS样式文件 是一系列存储在一个单独的外部文件 css文件 并非HTML文件 中的CSS样式 CSS文件的引用是在HTML的标签之间编写下列语句 其中的Style css文件应为已编好的样式表文件 2 内部文档头方式内部 或嵌入式 CSS样式表 是一系列包含在HTML文档head部分的style标签内的CSS样式 将风格直接定义在文档头之间 如 9 2CSS样式概述 3 直接插入式直接插入式很简单 只需在每个HTML标签后书写CSS属性即可 例如 规定一个Table标志中的字为红色 字体大小为10pt 则可书写如下 9 2CSS样式概述 9 2 4CSS在Dreamweaver中的创建方法1 在 页面属性 中设置 9 2CSS样式概述 切换到 代码 视图 可以看到对 页面属性 进行的设置 变成了一段CSS样式代码 嵌在文档头之间 2 文本编辑Dreamweaver8在属性检查器中增加了 样式 选项 这一选项的功能是在设计页面时进行添加字体 设置颜色 大小等样式操作时 样式 中套用样式 如果套用的CSS样式不是文字 而是表格 同样可以在属性面板中设置CSS 在属性面板中都有一个类别 Class 在这里就可以设计表格的CSS样式 3 CSS样式面板 CSS样式 面板集成在 CSS 面板组中 在此面板中可以方便地进行CSS样式的添加 编辑 查看属性和删除等样式的管理 9 2CSS样式概述 9 3 CSS样式 面板的使用 9 3 1CSS样式面板 附加样式 新建样式 编辑样式 删除样式 样式属性 样式列表 2 CSS样式 面板的结构 1 打开 CSS样式 面板 窗口 CSS样式 命令 9 3 CSS样式 面板的使用 9 3 1CSS样式面板3 管理样式 查看属性视图按钮 管理CSS规则按钮 9 3 CSS样式 面板的使用 9 3 1CSS样式面板3 管理样式包含三个允许在 属性 窗格中改变视图的按钮 类别 视图将Dreamweaver支持的CSS属性划分为8个类别 每个类别的属性都包含在一个列表中 您可以单击类别名称旁边的加号 按钮展开或折叠它 列表 视图按字母顺序显示Dreamweaver所支持的所有CSS属性 设置属性 蓝色 将出现在列表顶部 设置属性 视图仅显示那些已设置的属性 设置属性 视图为默认视图 9 3 CSS样式 面板的使用 9 3 1CSS样式面板3 管理样式管理CSS样式按钮 附加样式表 按钮 可调出 链接外部样式表 对话框 从中选择要链接到或导入到当前文档中的外部样式表 新建CSS样式 按钮 单击后可弹出 新建CSS样式 对话框 使用 新建CSS样式 对话框可以选择要创建的样式类型 编辑样式表 按钮 单击后可弹出 CSS样式定义 对话框 编辑当前文档或外部样式表中的任何样式 删除CSS样式 按钮 删除 CSS样式 面板中的所选样式 并从应用该样式的所有元素中删除样式 9 3 CSS样式 面板的使用 9 3 2创建新的CSS样式打开 新建CSS样式 对话框定义要创建的CSS样式的类型创建自定义样式 Class 重定义标签使用CSS选择器 选择器 下拉列表中提供的选择器包括 a active a hover a linka visited 选择定义样式的位置新建样式表文件 用于创建外部样式表 仅对该文档 在当前文档中嵌入样式 9 3 CSS样式 面板的使用 9 3 3编辑CSS样式CSS样式有8种类型 定义CSS样式类型属性定义CSS样式背景属性定义CSS样式区块属性定义CSS样式方框属性定义CSS样式边框属性定义CSS样式列表属性定义CSS样式定位属性定义CSS样式扩展属性 9 3 CSS样式 面板的使用 1 定义CSS类型属性使用 CSS样式定义 对话框中的 类型 类别可以定义CSS样式的基本字体和类型设置 9 3 CSS样式 面板的使用 2 定义CSS样式背景属性使用 CSS样式定义 对话框中的 背景 类型 可以定义CSS样式的背景设置 可以网页中的任何元素应用背景属性 9 3 CSS样式 面板的使用 3 定义CSS样式区块属性使用 CSS样式定义 对话框中的 区块 类别 可以定义标签和属性的间距和对齐设置 9 3 CSS样式 面板的使用 4 定义CSS样式方框属性使用 CSS样式定义 对话框中的 方框 类别可以为控制元素在页面上的放置方式的标签和属性定义设置 9 3 CSS样式 面板的使用 5 定义CSS样式边框属性使用 CSS样式定义 对话框中的 边框 类别可以定义元素周围的边框的设置 如宽度 颜色和样式 9 3 CSS样式 面板的使用 6 定义CSS样式列表属性使用 CSS样式定义 对话框中的 列表 类别可以为列表标签定义列表设置 如项目符号大小和类型 9 3 CSS样式 面板的使用 7 定义CSS样式定位属性 定位 样式属性使用 层 首选参数中定义层的默认标签 将标签或所选文本块更改为新层 9 3 CSS样式 面板的使用 8 定义CSS样式扩展属性 扩展 样式属性包括过滤器 分页和指针选项 它们中的大部分不受任何浏览器的支持 或者仅受InternetExplorer4 0和更高版本的支持 9 3 CSS样式 面板的使用 1 Alpha滤镜 设置透明度 其参数格式是 Alpha Opacity Finishopacity Style StartX StartY FinishX FinishY 2 Blur滤镜 设置3D效果 其参数格式是 8 定义CSS样式扩展属性 Blur Add Direction Strength 9 3 CSS样式 面板的使用 3 DropShadow滤镜 设置文本或图像的阴影效果 应用在文本上时 其效果更加明显 其参数格式是 DropShadow Color OffX OffY Positive 4 Glow滤镜 设置发光效果 其参数格式是 Glow Color Strength 8 定义CSS样式扩展属性 9 3 CSS样式 面板的使用 5 Shadow滤镜 设置阴影效果 其参数格式是 Shadow Color Direction 6 Wave滤镜 设置波纹效果 其参数格式是 Wave Add Freq LightStre