新编DreamweaverCS3动态网页设计与制作教程.ppt

9 1项目1 创建样式表9 2项目2 控制浏览器中的文字大小9 3项目3 设置行间距9 4项目4 为图片添加边框效果9 5项目5 利用 自定义样式表 改变鼠标指针形态9 6项目6 利用有关链接的样式表修改链接格式9 7项目7 控制页面背景图像样式9 8项目8 利用 自定义样式表 制作项目图标9 9项目9 css样式滤镜的应用9 10课堂综合训练9 11小结习题 第9章css样式表 css指令以规则的方式给出 一个样式表是这些规则的集合 规则是组成html或者被称为 选择器 的自定义标记的语句 例如 下面列出了一个使所有内容的颜色变成在color中给出的红色的css规则 t1 color ff0000 9 1项目1 创建样式表 1 操作步骤可以在 css样式 面板中创建样式表 1 css样式面板在dreamweavercs3下 选择 窗口 css样式 快捷键为shift f11 命令 打开 css样式 面板 如图9 1所示 2 css常用类型单击 css样式 面板中的按钮 弹出 新建css规则 对话框 如图9 2所示 按照作用对象可以将css样式分为三种类型 类 可应用于任何标签 标签 重新定义特定标签的外观 和高级 id 伪类选择器等 1 类 类用来设置一个自定义样式 具体操作如下 选择 窗口 css样式 快捷键为shift f11 命令 打开 css样式 面板 图9 2 新建css规则 对话框 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 选择 类 可应用于任何标签 然后在 名称 后的下拉列表框中输入这个样式的名称 注意 类名称必须以英文句点开头 并且包含任何字母和数字组合 例如 css1 在 定义在 中选择 仅对该文档 然后单击 确定 按钮 完成设置 将弹出 css1的css规则定义 对话框 如图9 3所示 图9 3 css1的css规则定义 对话框 2 标签 标签用来重新定义某种类型页面元素的格式 制作后 不需要选中表格对象 就可以直接应用到页面中去 具体操作如下 选择 窗口 css样式 快捷键为shift f11 命令 打开 css样式 面板 单击 css样式 面板中的 新建css规则 按钮 弹出 新建css规则 对话框 选择 标签 重新定义特定标签的外观 在 标签 后的下拉列表框里选择一个html标签 也可以直接在 标签 后的下拉列表框里输入这个标签 例如输入 td 如图9 4所示 图9 4 新建css规则 对话框 在 定义在 中选择 仅对该文档 然后单击 确定 按钮 完成设置 将弹出 td的css规则定义 对话框 如图9 5所示 3 高级 高级样式为具体的某个标签组合或所有包含特定id属性的标签定义格式 具体操作如下 选择 窗口 css样式 快捷键为shift f11 命令 打开 css样式 面板 图9 5 td的css规则定义 对话框 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 选择 高级 id 伪类选择器等 在 选择器 后的下拉列表框里输入一个html标签 也可以直接在 选择器 后的下拉列表框里选择一个html标签 提供的标签包括a active a hover a link和a visited a active 超链接文本被激活时的显示样式 a hover 光标移到超链接文本上时的显示样式 a link 正常的未被访问过的超链接文本的显示样式 a visited 被访问过的超链接文本的显示样式 这里选择 a link 如图9 6所示 在 定义在 中选择 仅对该文档 然后单击 确定 按钮 完成设置 将弹出 a link的css规则定义 对话框 如图9 7所示 图9 6 新建高级样式 对话框 图9 7 a link的css规则定义 对话框 2 相关知识点css样式面板的操作 css样式表的创建 css样式表的编辑和删除 1 操作步骤设置控制浏览器中的文字大小的操作步骤如下 1 打开 css1的css规则定义 对话框 如图9 8所示 在左边的 分类 选框里选择 类型 项 9 2项目2 控制浏览器中的文字大小 图9 8 css1的css规则定义 对话框 2 设置 字体 为 宋体 大小 为 36像素 单击 确定 按钮 css样式即创建完成 3 在 css样式 面板中 列出了所有样式标签中定义的所有样式的样式表 如图9 9所示 4 在 css样式 面板中 选择样式 css1 单击鼠标右键 选择 套用 命令 如图9 10所示 或者在 属性 面板的 样式 下拉列表框中直接选择样式 如图9 11所示 图9 9样式的名称和属性 图9 10 套用 命令 图9 11属性面板 5 这样 所选择的样式就可以应用到选中的段落或字符中 如图9 12所示 2 相关知识点css类型模式中字体属性的设置 css样式表的应用 图9 12应用 css1样式 1 操作步骤设置行间距的具体操作步骤如下 1 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 2 选择 类 可应用于任何标签 在 名称 后的下拉列表框中输入 p1 如图9 13所示 9 3项目3 设置行间距 图9 13 新建css规则名称 p1 对话框 3 打开 p1的css规则定义 对话框 如图9 14所示 在左边的 分类 选框里选择 类型 设置 行高 为 30像素 单击 确定 按钮 css样式即创建完成 4 选中需要应用样式的段落 对所选段落应用样式 p1 如图9 15所示 2 相关知识点css类型模式中行间距的设置 图9 14 p1的css规则定义 对话框 图9 15应用 p1样式 1 操作步骤为图片添加边框效果的具体操作步骤如下 1 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 2 选择 类 可应用于任何标签 在 名称 后的下拉列表框中输入 img 如图9 16所示 9 4项目4 为图片添加边框效果 图9 16 新建css规则名称 img 对话框 3 打开 img的css规则定义 对话框 如图9 17所示 在左边的 分类 选框里选择 边框 设置 样式 为 双线 宽度 为 中 颜色为 000000 单击 确定 按钮 css样式即创建完成 4 选中需要应用样式的图像 对所选图像应用样式 img 如图9 18所示 图9 17 img的css规则定义 图9 18应用 img样式 2 相关知识点css边框模式的设置 1 操作步骤利用 自定义样式表 改变鼠标指针形态的操作步骤如下 1 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 2 选择 标签 重新定义特定标签的外观 在 标签 后的下拉列表框中选择body 如图9 19所示 9 5项目5 利用 自定义样式表 改变鼠标指针形态 图9 19 新建css规则标签body 对话框 3 打开 body的css规则定义 对话框 如图9 20所示 在左侧的 分类 选框里选择 扩展 通过设置 光标 为 help 来改变鼠标形状 单击 确定 按钮 css样式即创建完成 4 按f12键后 打开浏览器预览页面 可以看到鼠标指针改变的形态 如图9 21所示 图9 20 body的css规则定义 对话框 图9 21预览效果 2 相关知识点css扩展模式的光标设置 1 操作步骤利用有关链接的样式表修改链接格式的操作步骤如下 1 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 2 选择 高级 id 伪类选择器等 在 选择器 后的下拉列表框中选择a link 如图9 22所示 9 6项目6 利用有关链接的样式表修改链接格式 3 打开 a link的css规则定义 对话框 如图9 2所示 在左侧的 分类 选框里选择 类型 设置 字体 为 宋体 大小 为 12像素 单击 确定 按钮 css样式即创建完成 4 选择 高级 id 伪类选择器等 在 选择器 后的下拉列表框中选择a visited 如图9 22所示 图9 22 新建css规则a visited 对话框 5 打开 a visited的css规则定义 对话框 在左侧的 分类 选框里选择 类型 设置 字体 为 楷体 gb2312 大小 为 14像素 修饰 为 删除线 单击 确定 按钮 css样式即创建完成 如图9 23所示 6 按f12键打开浏览器预览页面 可以看到链接效果 如图9 24和图9 25所示 图9 23 a visited的css规则定义 对话框 图9 24未被访问过的超链接文本的显示样式 图9 25被访问过的超链接文本的显示样式 2 相关知识点创建css选择器样式 网页中超链接的样式标签 1 操作步骤控制页面背景图像样式的操作步骤如下 1 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 2 选择 标签 重新定义特定标签的外观 在 标签 后的下拉列表框中选择body 3 打开 body的css规则定义 对话框 如图9 26所示 在左侧的 分类 选框里选择 背景 通过设置 背景图像 为 1 jpg 重复方式 为 不重复 附件 为 固定 水平位置 为 居中 单击 确定 按钮 css样式即创建完成 9 7项目7 控制页面背景图像样式 图9 26 body的css规则定义 对话框 4 按f12键后 打开浏览器预览页面 可以看到页面背景图像的样式 如图9 27所示 2 相关知识点设置背景图像的属性 图9 27预览效果 1 操作步骤利用 自定义样式表 制作项目图标的操作步骤如下 1 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 2 选择 标签 重新定义特定标签的外观 在 标签 后的下拉列表框中选择ul 如图9 28所示 9 8项目8 利用 自定义样式表 制作项目图标 图9 28 新建css规则 ul 对话框 3 打开 ul的css规则定义 对话框 在左边的 分类 选框里选择 列表 设置 项目符号图像 为 1 gif 单击 确定 按钮 css样式即创建完成 如图9 29所示 4 按f12键后 打开浏览器预览页面 可以看到页面项目列表的样式 如图9 30所示 2 相关知识点设置列表项目符号的样式 图9 29 ul的css规则定义 对话框 图9 30项目列表符号样式的效果 1 操作步骤应用css样式滤镜的操作步骤如下 1 在站点下新建文件夹 style 在文件夹 style 下新建文件 style css 如图9 31所示 9 9项目9 css样式滤镜的应用 图9 31 新建样式文件 窗口 2 单击 css样式 面板中的按钮 弹出 链接外部样式表 对话框 如图9 32所示 3 单击 浏览 按钮 弹出 选择样式表文件 对话框 选择文件夹 style 下的文件 style css 如图9 33所示 图9 32 链接外部样式表 对话框 图9 33 选择样式表文件 对话框 4 单击 确定 按钮 回到 链接外部样式表 对话框 检查无误后 单击 确定 按钮 链接成功 如图9 34所示 5 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 图9 34链接的文件 6 选择 类 可应用于任何标签 在 名称 后的下拉列表框中输入 blur 在 定义在 后选择 style css 如图9 35所示 7 打开 blur的css规则定义 对话框 如图9 36所示 在左边的 分类 选框里选择 扩展 设置 过滤器 为 blur add 1 direction 270 strength 20 即blur滤镜 指定图像改变成印象派的模糊效果 模糊的方向是水平向左270 20个像素宽度受到影响 图9 35 新建css规则 blur 对话框 图9 36 blur的css规则定义 对话框 8 创建css规则 gray 如图9 37所示 定义 gray 的css规则 如图9 38所示 在左边的 分类 选框里选择 扩展 设置 过滤器 为 gray 即gray滤镜 灰度效果 9 创建css规则 invert 如图9 39所示 定义 invert 的css规则 如图9 40所示 在左边的 分类 选框里选择 扩展 设置 过滤器 为 invert 即invert滤镜 将颜色的饱和度以及亮度值完全反转 类似底片效果 图9 37 新建css规则 gray 对话框 图9 38 gray的css规则定义 对话框 图9 39 新建css规则名称 invert 对话框 图9 40 invert的css规则定义 对话框 10 创建css规则 wave 如图9 41所示 定义 wave 的css规则 如图9 42所示 在左边的 分类 选框里选择 扩展 设置 过滤器 为 wave add add freq 2 lightstrength 50 phase 45 strength 10 即wave滤镜 把对象按照波形样式打乱 波纹频率为2 波纹增强光影效果为50 正弦波的偏移量为45 振幅大小为10 图9 41 新建css规则 wave 对话框 图9 42 wave的css规则定义 对话框 11 将样式 blur gray invert和 wave分别应用到网页index html的图像7 gif 8 gif 9 gif和10 gif中 12 按f12键后 打开浏览器预览页面 可以看到链接效果 如图9 43和图9 44所示 图9 43未添加滤镜效果 图9 44滤镜效果 2 相关知识点设置滤镜样式 1 训练内容进行课堂综合训练的具体内容如下 1 单击 css样式 面板中的按钮 弹出 新建css规则 对话框 2 选择 标签 重新定义特定标签的外观 在 标签 后的下拉列表框中选择body 3 打开 body的css规则定义 对话框 在左侧的 分类 选择 背景 设置 背景颜色 为 2ec9e7 单击 确定 按钮 css样式即创建完成 9 10课堂综合训练 4 选择 标签 重新定义特定标签的外观 在 标签 后的下拉列表框中选择td 5 打开 td的css规则定义 对话框 如图9 5所示 在左侧的 分类 项中选择 类型 设置 字体 为 宋体 大小 为 12像素 单击 确定 按钮 css样式即创建完成 6 选择 高级 id 伪类选择器等 在 选择器 后的下拉列表框中选择a link 7 打开 a link的css规则定义 对话框 在左侧的 分类 项中选择 类型 设置 行高 为 35像素 颜色 为 黑色 单击 确定 按钮 css样式即创建完成 8 选择 高级 id 伪类选择器等 在 选择器 后的下拉列表框中选择a hover 如图9 45所示 9 打开 a hover的css规则定义 对话框 如图9 46所示 在左侧的 分类 项中选择 类型 设置 行高 为 35像素 颜色 为 ff00ff 修饰 为 下划线 单击 确定 按钮 css样式即创建完成 图9 45 新建css规则a hover 对话框 图9 46 a hover的css规则定义 对话框 10 按f12键后 打开浏览器预览页面 可以看到链接效果 如图9 47和图9 48所示 图9 47未应用样式效果 图9 48最终效果 2 相关知识点css样式类型 类 可应用于任何标签 标签 重新定义特定标签的外观 和高级 id 伪类选择器等 页面背景设置 浏览器中的文字设置 链接样式设置 行间距设置 本章重点介绍了css样式的类型 特点 并介绍了定义样式的方法和一些典型的应用项目 css样式又称层叠样式表 主要用来指定布局 字体