【精品】九CSS样式表.ppt

九 css样式表 九 css样式表 第6章用层和样式表布局并修饰1 层的基本操作2 css样式表3 div css样式表布局 层是一种html内容的容器 通常由div及span标记说明 层可定位在页面上的任意位置 并且其中可包含文本 图像 表单等所有可直接用于文档的元素 层提供了定位页面元素的方法 通过将页面元素放置于层中 用户可控制对象的上下叠放顺序 显示或隐藏 也可以通过时间轴同时在屏幕上移动一个或多个层 可制作动画 层的定位和显示跟不同浏览器有关 需精确定位 一 层的基本操作 1 创建和使用层 当用户在文档中放置层时 dw将在代码中插入该层的html标签 用户可以选择让dw将div标签或span标签用于自己的层 默认情况下 dw会使用div标签创建层 层代码可以插入在html文件正文中的任意位置 但在页面中绘制层时 dw将在body标记的后面加入层代码 如果嵌套一个层 则dw会在父层中插入代码 1 创建和使用层 1 创建层和嵌套层 查看 菜单 可视化助理 层边框 ap元素轮廓线 创建层 插入栏 布局 绘制apdiv 或通过 插入 菜单 布局对象 apdiv 嵌套层 鼠标插入点放置在要创建嵌套层的层中 然后通过 插入 菜单 布局对象 apdiv 或按住alt键在层中直接绘制嵌套 1 创建和使用层 2 显示层面板 ap元素面板 选项设置 显示或隐藏 如果前面什么都没有的话 则该层的可见性继承其父层的显示属性 默认 在层名处双击可修改层名在z列单击可修改层的层次属性值 数值大的位于上层 单击可以修改层次 也可以选定一个层 把层直接拖到想要的层次也可以 防止重叠 有嵌套层时应选定 1 创建和使用层 3 设置层参数 编辑 菜单 首选参数 ap元素 1 创建和使用层 4 选择层和激活层选择层 要对层进行移动 调整大小等就要先选择层 选择层才能对层进行操作 要选择层的话 可以在层面板里面选择 或点击层边框 或点击层标记等 选中后 可以直接移动或调整层的大小了 选择多个时 shift键 要对齐层 多个选定之后通过 修改 菜单 排列顺序 对齐 1 创建和使用层 激活层 要把对象插入层中 首先要激活层 把光标移动到层内的任何地方单击 就可以在里面插入文本 图像等对象了 激活层不等于选择层 层里面的内容怎么定位 p129右下角的一堆话 1 创建和使用层 5 设置层属性 左 上 设定层相对与页面或父层的位置 坐标 z轴 设置层的层次属性值 显示 设置层的可见性 default指不指明可见性 但一般default是 继承 1 创建和使用层 溢出 层内容超出层范围 尺寸 时的处理方法visible 自动增加层的尺寸hidden 保持层尺寸不变 隐藏超出部分内容scroll 无论是否超出范围 显示滚动条auto 当层内容超出层范围时 自动增加滚动条 默认值 剪辑 设置层的可视区域 其中的数值表示可视区域与层边界的像素值 1 创建和使用层 6 转换表格和层 修改 菜单 转换 在dw中 不能将模板中的层或应用模板的网页中的层转换为表格 2 创建层动画 动态html dhtml 是html与特定脚本语言的结合 该脚本语言可以用来改变html元素的样式或定位属性 在dw中时间轴面板使用动态html来改变层及图片在一段时间内的属性 如位置 尺寸 可见性及堆栈顺序等 从而制作出动画效果 此外 可以使有时间轴加载其它操作 如执行行为 2 创建层动画 通过在不同时间改变层的位置 大小 可见性和叠放顺序来创建动画 窗口 时间轴 把时间轴面板选择出来其中b为行为通道 显示时间轴对应时间所附近的行为 使用浅蓝色方块来表示存在的行为 2 创建层动画 1 直接创建时间轴动画时间轴只能移动层 2 删除某段动画右键点击要删除的部分 选择 移除时间轴 3 拖动路径创建动画右键单击选定的层 选择 记录路径 或右键点击时间轴 选择 录制层路径 练习 p263 p268第17章利用时间轴制作浮动的小广告 二 css样式表 6 2css在网页中的应用 样式是控制文本块或段落外观的一组格式属性 使用样式可以格式化文本 可以设置一篇文档的格式 css样式 层叠样式单 用来进行网页风格设计 通过设立样式表 可以统一控制html中各标记的显示属性 通过只修改一个文件就可以改变一批网页的外观和格式 css样式可以控制多个文本的文本格式 当css样式被更新时 所有使用css样式的文档也自动随着更新 二 css样式表 1 创建css样式 窗口 css样式 把 css样式 面板选出来 全部 显示网页中所有的css样式规则 正在 显示当前选择网页元素的css样式信息 在面板中点击 新建css样式 或者右键单击选 新建 创建css样式 将会出现 新建css样式 对话框 1 创建css样式 dw中 css样式分为三种 类 自定义样式 可应用于任何标签 主要应用于选定的区域 定义样式后需要手动对网页元素进行样式的应用注意 该类型样式一般以 开头命名 一般dw会自动在前面补全 但如果发现缺少需要手动加上 如 bg 1 创建css样式 标签 重新定义特定标签的外观 该样式实际上是对现有html标记的一种重新定义 在其中选择所需要的html标签进行样式的定义 该样式只能对html标签进行样式的定义 定义样式后 自动进行样式的应用 即当用户创建或改变一个css样式时 所有使用该标记的文本格式也将自动被更新 1 创建css样式 如 当选择 标签 类型时 可以看到 名称 变成了 标签 网页是用html代码编写的 是由很多 代码标签 写成的 所以当选择创建这一种样式时 可以把样式应用于所有选定的标签的地方 比如body标签是html正文部分 如果选了body的话 那么当应用这个样式时 应用于body标签的地方 如果选了font标签 应用样式时 凡是有font标签的地方都应用这样样式 1 创建css样式 高级 id 伪类选择器 该样式用于重新定义一些特殊的标记组合或包含了特殊的id属性的格式 当选择 高级 类型时 可以看到 名称 变成了 选择器 选择器选项有 a link a visited a hover a active 选 其实这一类型样式是可以用来设定链接时不同状态的效果 如选了a link就是准备来设定链接的状态效果 a hover就是设置鼠标经过时的状态 1 创建css样式 对于 定义在 选项 css样式可以分为 嵌入式 仅应用在该文档 外部链接时 新建样式表文件应用于多个文档 生成专门的 css文件 选 新建样式表文件 时会把定义的样式单独保存成文件 可以供其它文件使用 1 创建css样式 css样式表属性选项设置 在css样式定义属性窗口中 可以进行类型 背景等设置 用的较多的为类型 背景 扩展 类型里面有个 修饰 用来设定链接文本的 默认的话我们创建了一个链接的话 文本下面会多了一条下划线的 可以对它进行修改 扩展选项的光标选项可以改变光标形状 默认手型 扩展选项的过滤器选项可以设置很多效果 但具体参数设置需要看其它参考书 把 里面部分内容删除即是使用默认参数 1 创建css样式 注意事项 样式表有些功能应用的对象不同 所有有些设定可能对某些内容不起作用 比如应用于图像的设置如果应用于文本 当然看不到效果的改变 高级 类型的几种状态设定好之后 预览的时候可能看到的都是链接访问过后的状态 原始状态可能马上看不了 多个样式效果会互相影响 2 使用css样式表 创建好样式后 在 css样式 面板中就有刚创建好的样式了 在 css样式 面板单击要应用的样式 右键点击 套用 或者在选定内容的属性面板进行设定 链接外部css样式 想应用外部链接css样式文件时点击 css样式 上的 附加样式表 打开 链接外部样式表 对话框 或者右键单击选择 附加样式表 选择要用到的 css文件 可选链接或导入 2 使用css样式表 导入 链接 的区别 导入 可直接将外部样式表文件中的所有样式导入到当前网页中 使用此方法允许样式表的嵌套 但不是所有的浏览器都能识别该方法 故一般都采用 链接 的方式 2 使用css样式表 编辑 复制和删除css样式 编辑 直接双击要编辑的css样式名称 在面板下方的样式属性也可以快速进行修改 复制 删除 可以右键点击选择相应操作设置css样式参数 编辑 菜单 首选参数 中修改 css样式 3 css样式表应用例子 9磅字 9pt 的制作一 类应用在选定的文本 9磅字的制作二 标签一般不用方法一 如果整个文档都是文字 要一个选定应用样式比较麻烦 正文内容在html中的标签是body 可以使用css样式表的 重定义html标签 把css样式表定义在body标签中 这样就可以应用在body标签的地方了 具体点就是正文部分 取消超级链接的下划线 并且改变鼠标悬停式的光标形状 3 css样式表应用例子 去掉链接颜色的方法修改页面属性使用样式表 利用html标记改变所有图像上的边框 利用用户自定义样式制作项目列表图标 固定背景图像及不能让它上下滚动方法 css样式表应用注意问题 多个样式表那个起作用1 先内后外 经常会有样式表冲突问题 这时可能重新制作应用样式表 2 同个样式后定义原则a link a visited a hover a actived出现问题 先定义visited 再定义hover 先定义hover 再定义visited访问链接后对比一下情况 注意那个定义在前的正确做法 练习 p134 p1366 2 5基础实例 用css修饰段落 三 div css布局 6 3用div css布局网页1 插入一个 层 2 使用css样式表设置这