第6章CSS样式表.ppt

6 1CSS样式表概述6 1 1样式表的基本操作6 1 2定义样式表选项6 1 3使用样式6 2创建新样式6 2 1为调用脚本创建的CSS规则6 2 2定义指定范围内的标签规则6 2 3同时定义多个标签6 2 4定义单个元素样式属性6 3内部CSS样式表的应用6 3 1使文字尺寸保持不变6 3 2设置网页行间距 第6章 CSS样式表 6 3 3制作图像边框效果6 3 4控制鼠标样式6 3 5修改文字链接的样式6 3 6锁定背景不跟随内容滚动6 3 7定义项目符号和编号6 3 8CSS滤镜的应用6 4外部CSS样式表的应用6 4 1建立文字段落的CSS样式6 4 2建立表格的CSS样式6 4 3建立超链接的CSS样式6 4 4建立特殊段落的CSS样式6 4 5在网页中应用外部CSS6 5习题与上机操作 CSS样式表简介 创建CSS样式表 内部CSS样式表的应用 外部CSS样式表的创建及应用 使用和编辑自定义CSS样式表 教学进程 本章要点 概述 利用CSS样式可以对网页中的文本 图像 页面背景 表单元素外观等实现更加精确的控制 甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整 教学进程 1 CSS真正实现了网页内容和格式定义的分离 通过修改CSS样式表文件就可以修改整个站点文件的风格 6 1CSS样式表概述 6 1 1样式表的基本操作 教学进程 执行 窗口 CSS样式 命令 打开 CSS样式 面板 或在面板组上单击 CSS 或者相应的折叠箭头 展开 CSS样式 面板 方法 6 1CSS样式表概述 当选中一个规则后执行 CSS样式 面板右下方的 编辑样式 命令 打开编辑选中规则的对话框 单击 CSS样式 面板右上方的属性按钮 在弹出的菜单中选择 编辑 命令 也可以启动编辑当前所选规则的对话框 教学进程 在 CSS样式 面板上 选择 新建CSS规则 按钮 会打开 新建CSS规则 对话框 方法 6 1 2定义样式表选项 6 1CSS样式表概述 选择其中一个正方形的热点 在 属性 面板中修改各参数 在 链接 文本框中输入链接地址 在 目标 选项的下拉列表中选择 blank 在 替换 文本框中输入 链接到洪恩在线 举例 教学进程 在 CSS样式 面板上 选择 新建CSS规则 按钮 会打开 新建CSS规则 对话框 方法 6 1 2定义样式表选项 6 1CSS样式表概述 教学进程 新建样式表文件 此选项将会把你设定的样式最终保存在一个外部单独的样式表文件中 这个样式表文件可以被其他文件共同使用 也就是说你可以使站点内的所有页面文件使用同一个样式表文件 甚至不同的站点只要是网页就可以使用 定义在 选项 各选项含义 6 1 2定义样式表选项 6 1CSS样式表概述 仅对该文档 此选项将会把你设定的规则仅仅放在当前文件的头文件中 这些规则只能在此文件中使用 教学进程 类 可应用于任何标签 选择此类型后 需要在上方的 名称 文本框中填入一个规则名字 需要注意的是 此类名称必须以 开头 这种方式定义的样式可以用来定义绝大多数的HTML对象 这样可以使这些对象有统一的外观 选择器类型 选项 各选项含义 6 1 2定义样式表选项 6 1CSS样式表概述 标签 重新定义特定标签的外观 选择此选项后从上方的 标签 下拉框里选择需要重新定义的HTML标识 这个选项将使得文件中具有统一标签的所有内容使用相同的外观 高级 ID伪类选择器等 这个选项的功能是可以设定链接文本的样式 6 1 3使用样式 教学进程 在 属性 面板选择样式 打开 属性 面板 单击打开 样式 右边的下拉列表框 里面列出了我们已经定义的一些CSS规则 1 需要指出的是 这里列出的只是部分已定义的规则 使用样式列表指定规则时 必须先选定你将要应用此规则的内容 然后在样式列表框中选择需要的规则 即可将规则应用于选定内容 6 1 3使用样式 教学进程 利用 标签选择器 选择样式 2 首先需要在 标签选择器 上选定一个标签 如 span 标签 然后在 span 标签上右击 在弹出的快捷菜单中选择 设置类 wenziduanluo 则可以快速把定义的 wenziduanluo 样式类指定给 span 标签 使用右键快捷菜单 3 我们也可以从右键快捷菜单中直接给对象指定一个样式 首先选中对象 在右键快捷菜单中指定样式类 清除样式 4 清除样式 首先选中对象 然后从右键快捷菜单中选择 无 即可清除原有的样式 6 2创建新样式 教学进程 id 属性是使用 CSS选择器 样式的常用功能之一 这种方式定义的CSS规则 与自定义CSS规则相似 在文档中 可以通过 id 属性来识别标记和定位文档的位置 这在调用脚本时会经常用到的 方法 6 2 1为调用脚本创建的CSS规则 6 2创建新样式 教学进程 6 2 2定义指定范围内的标签规则 新建CSS规则 在 CSS样式 面板上单击 新建CSS规则 按钮 打开 新建CSS规则 对话框 在 选择器类型 中选择 高级 ID伪类选择器等 在 选择器 参数项中输入 tdhr td是单元格的标签 hr是水平条的标签 1 单击 确定 按钮后 开始定义规则 我们只需要定义 类型 面板中的 颜色 项为红色就可以了 定义tdhr的CSS规则 2 按F12键 在浏览器中可以看到 单元格中的水平条变成了红色 而单元格之外的水平条却保持不变 预览效果 3 6 2创建新样式 教学进程 6 2 3同时定义多个标签 创建含有正文文字 单元格 文本字段表单的网页 创建一个HTML页面 在正文 body 里输入 CSS测试 这几个字 在文字的下面插入一个两行一列的表格 td 然后在上面的单元格里面输入 Dreanweaver教程 几个字 在下面的单元格中插入一个表单文本区域 textarea 1 6 2创建新样式 教学进程 6 2 3同时定义多个标签 打开 新建CSS规则 对话框后 在 选择器类型 中选择 高级 ID伪类选择器等 在 选择器 参数项中输入 body td textarea 这些标签要用英文状态的 分开 新建CSS规则 2 6 2创建新样式 教学进程 6 2 3同时定义多个标签 单击 确定 按钮后 开始定义规则 在 类型 面板里定义字体 颜色等 定义完以后 单击 应用 按钮 在Dreamweaver的 文档 窗口中文字都变成了红色 大小也成了14像素 接着我们在表单文本区域里输入文字 保存在css目录下 定义body td textarea的CSS规则 3 6 2创建新样式 教学进程 6 2 4定义单个元素的样式属性 如果要对网页中的某单个元素定义样式属性 那么可以在该元素中直接使用 style 来定义 如 style样式 在Dreamweaver8中 使用这种类型只能在Dreamweaver的 代码 视图中手工输入代码 新建CSS样式 单击 CSS样式 面板中的 新建CSS规则 按钮 弹出 新建CSS规则 对话框 1 教学进程 6 3内部CSS样式表的应用 6 3 1使文字尺寸保持不变 在 名称 文字框里输入要定义的CSS规则的名称 本例定义的是字体 为了方便记忆 可以设置样式的名称为 ziti 在 选择器类型 中选择 类 可应用于任何标签 在 定义在 中选择 仅对该文档 单击 确定 按钮 设置CSS样式的类型 区块标签 在 ziti的CSS规则定义 的对话框中 选择左边 分类 中的 类型 标签 把 大小 设为12像素 2 教学进程 6 3内部CSS样式表的应用 6 3 1使文字尺寸保持不变 如果想让每一段落的行首自动空两个汉字 可以选择 分类 中的 区块 标签 把 文字缩进 设为 个字体高 即2个汉字 预览效果 另存网页在css目录下 文件名为 wenxue ziti css html 用浏览器预览一下 网页的字体看起来就像专业网站的字体了 并且字体尺寸也不会随浏览器字体大小设置而改变 每段的首位自动空了两个汉字的距离 3 教学进程 6 3内部CSS样式表的应用 6 3 1使文字尺寸保持不变 6 3 2设置网页行间距 编辑CSS样式 1 在 CSS样式 面板中 选择 ziti规则 单击 编辑样式 按钮 弹出 ziti的CSS规则定义 对话框 在 行高 右边的两个下拉框中分别选择 值 然后 再在 值 框中输入数值 在这里输入150 作为我们网页文字的行间距 教学进程 6 3 2设置网页行间距 应用CSS样式 2 单击 确定 按钮 此时网页中的文字行间距会自动地调整为已经设定的规则 保存网页 用浏览器预览一下 教学进程 教学进程 6 3 3制作图像边框图像 创建为图片定义的CSS样式 在 CSS样式 面板上单击 新建CSS规则 按钮 弹出 新建CSS规则 对话框 在 选择器类型 中选择 标签 重新定义特定标签的外观 再在 标签 下拉框中选择 img 标记 1 教学进程 6 3 3制作图像边框图像 图片边框的参数意义 单击 确定 按钮 弹出 img的CSS规则定义 对话框 在 分类 项中选择 边框 设置 img的CSS规则定义 标记的边框属性 边框可设定的属性很多 包括样式 宽度和颜色 关键是指定每个边的宽度和每个边的颜色 2 宽度 可以是细 中 粗等值 颜色 定义方法与宽度定义相似 颜色值也可以用RGB值 如 ff00ff 样式 用9个关键字来描述 教学进程 6 3 3制作图像边框图像 设置边框参数 我们可以设定 样式 为脊状 宽度 为中 颜色 为红色 3 浏览器中的效果 单击 确定 按钮 定义的规则已经应用到网页的图片上了 在浏览器中是什么效果呢 保存网页文件 4 教学进程 6 3 4控制鼠标样式 一般情况下 鼠标在浏览器中以 箭头 的样式出现 我们想在网页的不同位置让鼠标显示不同形状 以体现不同的功能区 如果想让自己的网站体现与众不同的风格 可以把鼠标样式更改为自己喜欢的其他样式类型 教学进程 6 3 4控制鼠标样式 新建CSS规则 新建一个CSS规则 本例定义的是鼠标 为了方便记忆 可以设置规则的名称为 shubiao 在 选择器类型 中选择 类 可应用于任何标签 在 定义在 中选择 仅对该文档 1 教学进程 6 3 4控制鼠标样式 修改光标效果 单击 确定 按钮 在弹出的 shubiao的CSS规则定义 的对话框中 选择左边 分类 中的 扩展 标签 2 教学进程 6 3 4控制鼠标样式 光标样式的含义 右边 视觉效果 中的 光标 项 这就是设置鼠标样式的关键项 打开右边的下拉菜单 选择所需要的鼠标样式 单击 确定 按钮 3 crosshair 十字型 text 平时鼠标移动到文本上的样式 wait 等待的效果 default 默认的效果 help 带问号的鼠标样式 e resize 向右的箭头 ne resize 向右上方的箭头 n resize 向上的箭头 nw resize 向左上方的箭头 w resize 向左的箭关 sw resize 向左下的箭头 s resize 向下的箭头 se resize 向右下方的箭头 auto 系统自动的效果 新建高级CSS规则 教学进程 6 3 5修改文字链接的样式 建立第二个高级CSS样式 去掉超级链接的下划线 定义超级链接的颜色 链接可以说是网页中常见的页面元素了 默认的文字链接规则都是带下划线的效果 完全可以改变这种一成不变的外观 以使之更符合页面的整体效果 教学进程 6 3 6锁定背景不跟随内容滚动 打开文学页面 wenxue ziti css html 执行 修改 页面属性 命令 弹出 页面属性 对话框 在 页面属性 对话框中设置背景图像 单击 背景图像 选项右边的 浏览 按钮 选择自己喜欢的图像作为背景 设置网页背景 1 新建背景的CSS规则 2 新建一个CSS规则 本例定义的是背景 为了方便记忆 可以设置规则的名称为 beijing 在 选择器类型 中选择 类 可应用于任何标签 在 定义在 中选择 仅对该文档 教学进程 6 3 6锁定背景不跟随内容滚动 单击 确定 按钮 在弹出的 beijing的CSS规则定义 对话框中 选择左边 分类 中的 背景 标签 其中 附件 有两个选择项 分别为 固定 和 滚动 设置 附件 为 固定 设置固定背景 3 教学进程 6 3 7定义项目符号和编号 1 新建 xmfh的CSS规则 2 定义规则的 列表 属性 3 将项目符号应用到网页中 4 应用项目符号后的效果 利用CSS定义 项目符号和编号 1 教学进程 6 3 7定义项目符号和编号 1 准备作为项目符号的图片 自定义项目图片符号 2 2 标记 xmfhCSS规则 打开我们网站的wenxue ziti css htm网页 在右边的表格中插入一个1 1的表格 然后把标题 想飞 放在表格中 教学进程 6 3 8CSS滤镜的应用 打开网页 1 编辑CSS样式 2 将 style1的CSS规则定义给标题 首先在 CSS规则 面板里选择 style1自定义CSS规则 然后单击 编辑规则 按钮 弹出 style1的CSS规则定义 对话框 在此对话框的 分类 中选择 扩展 打开 滤镜 下拉列表 可以看到CSS样式表滤镜的多种属性 可以使用Blur滤镜为标题建立模糊效果 使用Glow滤镜为图片边界增加光效 Blur的语法是 Blur Add Direction Strength 其中有3个参数Add Direction Strength 教学进程 6 3 8CSS滤镜的应用 定义 style1的Blur滤镜 3 把Blur滤镜应用到标题上 4 单击 确定 按钮 style1规则已经被重新定义了 将 style1规则应用于标题所在的1 1表格上 这样Blur的CSS滤镜就已经应用到标题上了 教学进程 6 3 8CSS滤镜的应用 把滤镜应用到网页后的效果 5 新建一个CSS规则 由于要建立的是有关文字 段落的规则 所以可以建立一个统一的 类 在 名称 框中输入CSS规则的名称 在 定义在 中选择 新建样式表文件 教学进程 6 4外部CSS样式表的应用 6 4 1建立文字段落的CSS样式 建立外部样式表 1 保存样式表 2 单击 确定 按钮 在弹出的 保存样式表文件为 对话框内 我们要确定以下内容 保存在 要保存文件的位置 文件名 要保存文件的名字 保存文件的时候 要尽可能地保存在站点内 命名也要尽量做到见名知意 单击 保存 按钮后 计算机中就生成了xinde css这个外部样式表文件 同时弹出 wenziduanluo的CSS规则定义 在xinde css中 对话框 我们就开始定义这个外部CSS样式表了 可以这样定义文字和段落 在 分类 的 类型 面板中定义 字体 大小 行高 分别为 宋体 12像素 150 区块 面板中定义对齐方式为 顶部 左对齐 文字缩进为 2字体高 教学进程 6 4外部CSS样式表的应用 6 4 1建立文字段落的CSS样式 定义样式表的文字和段落 3 在 CSS样式 面板上单击 新建CSS规则 按钮 新建一个CSS规则 可以把表格作为一个 类 来定义 同时也可以作为 标签 来定义 所以在弹出的 新建CSS规则 对话框中 我们把表格作为一个 标签 来定义 表格的标签为 table 教学进程 6 4 2建立表格的CSS样式 新建表格的CSS样式 1 定义表格的CSS样式 2 单击 确定 按钮 就可以定义表格的样式了 本例中 我们可以把表格定义为边框宽度为 1 样式为点划线的彩色表格 新建一个CSS规则 在 新建CSS规则 对话框中仍然把超级链接作为 标签 来定义 把它放到前面已经建立的外部CSS样式表文件中 超级链接的标签为a 教学进程 6 4 3建立超链接的CSS样式 新建超链接的CSS样式 1 定义超链接的CSS样式 2 单击 确定 按钮 在弹出的 a的CSS规则定义 在xinde css中 对话框中 可以定义网页中超级链接的样式 比如在 分类 的 类型 中定义 字体 大小 颜色 修饰 分别为 宋体 12像素 FFFFFF 无 背景 中定义背景颜色为 FFFF00 再建立一个CSS规则 在 新建CSS规则 对话框中这样定义 在 选择器类型 中选择 高级 ID 伪类选择器等 在 选择器 中选择 a hover 定义在xinde css的外部