网页设计6：CSS样式.ppt

网页设计 适用软件学院 第6课 CSS样式 学习目标 学会使用CSS控制页面元素的显示效果学习任务 1 掌握CSS样式的创建 编辑和应用2 掌握滤镜的用法重难点 1 CSS样式的设置2 CSS滤镜的设置和使用 样式样式是指一组可控制文本块或文本区域外观的格式属性 字符的样式是指字符外观的显示方式 Dreamweaver中的常用样式 文本选项卡下 加粗 文字加粗显示 斜体 文字显示为倾斜格式 加强 加强格式根据浏览器不同规定而显示 多为加粗方式显示 强调 强调格式根据浏览器不同规定显示 多为斜体显示 段落 标签所定义的显示方式 引用块 表明选中的文字是被引用的 有缩进 已编排格式 指的是用户预先对标签中的文字排版格式将在浏览器中原样的显示 字符 插入特殊字符 利用键盘不能直接输入的字符 使用菜单 文本 样式 下的子菜单设置文本样式 CSS样式CSS是一种样式表的技术 全称为 级联样式表 是用来进行网页风格设计的 CSS的作用可以将格式和结构分离HTML语言只是定义了网页的结构和个别要素的功能 而让浏览器自己决定应该让各要素的显示方式 CSS通过将定义结构的部分和定义格式的部分分离 能够对页面的布局施加更多的控制 CSS可以更精确的控制页面的布局 CSS使网页文件变的更小 下载更快 CSS可以更快更容易的维护及更新大量的网页 CSS分类嵌入式在独立的文档应用CSS样式外部链接式应用于多个文档 生成专门的 CSS文件 创建新CSS样式打开CSS样式面板 窗口 CSS样式 或Shift F11单击CSS样式面板中的 新建CSS样式 按钮 打开 新建CSS样式 对话框 1 名称 为新样式命名 名称前必须以英文句点开头 如无此点 Dreamweaver自动添加 2 选择器类型 类 自定义一个新的样式 可应用于任何标签 标签 重新定义HTML标签 定义之后不需要选中对象就直接应用到页面中去了 高级 针对超级链接状态进行设置 共四种状态 a Link 超级链接的正常状态 没有任何动作的时候 a Visited 访问过的超级链接状态 a Hover 光标移上超级链接状态 a Active 选中超级链接状态 3 定义在 新建样式表文件 在网页外部定义一个新的CSS样式表文件 仅对该文档 将CSS样式定义在该文档内部 仅能在该文档中应用 编辑现有样式 内部CSS样式的修改 在CSS面板中右击样式 在弹出菜单中选择 编辑 在 样式定义 对话框中编辑样式 外部CSS样式的修改 方法同上 应用CSS样式 应用嵌入式CSS样式如果设置段落将光标定位在段落中或选中段落 如果设置多个段落需要选中这些段落 如果设置字符需要选中字符在CSS样式面板中 选择某个样式右击选择 套用 或者在属性面板样式菜单中选择某个样式 应用外部链接式CSS样式打开CSS样式面板单击 附加样式表 按钮 打开 链接外部样式表 对话框 在 文件 URL 文件域中输入或通过浏览找到外部CSS样式表地址和名称 链接 通过链接调用外部样式表文件导入 在页面打开时加载外部样式表文件 重置 在现有样式的基础上创建新样式 删除样式 选中样式 单击 删除CSS样式 按钮 定义CSS样式设置CSS样式的8个面板 类型 背景 区块 方框 边框 列表 定位 扩展类型 此面板可定义样式的基本类型设置 字体 为样式设置字体类型 大小 定义文本字体的大小 粗细 对字体应用指定的或相对的粗细度 样式 指定样式为普通 斜体或偏斜体 变量 设置字体变量 主要应用于英文 行高 设置文本所在地方的行高 大小写 设置文本的大小写状态 应用于英文 装饰 使用下划线 上划线 删除线装饰文本 闪烁效果只在NC浏览器中可以看到 颜色 定义文本颜色 背景 此面板主要是对元素的背景进行设置 包括背景颜色 背景图象 背景图象的控制 一般是对BODY 页面 TABLE 表格 DIV 区域 的设置 背景颜色 设置元素的背景色 背景图像 设置元素的背景图像 重复 确定背景图像是否以及如何重复 重复 在元素的背景部分水平和垂直方向平铺图像 不重复 在元素的开头显示一遍图像 横向重复 在水平方向重复显示纵向重复 在垂直方向重复显示附件 固定背景图像在最初位置或者跟随内容滚动 有些浏览器会将固定当作滚动看待 水平位置 指定背景图像的水平位置 左对齐 右对齐和居中分别是指相对于元素的对齐方式 垂直位置 指定背景图像的垂直位置 顶部 居中 底部分别是指相对于元素的对齐方式 区块 此面板主可定义样式的空格和对齐方式 单词间距 设置单词之间的间距 可以设置负值 字母间距 设置字符之间的间距 可以指定负值 因为中文也是字符 这个参数可以设置文字间的间距 垂直方式 指定元素的垂直对齐方式 通常是相对于其上一级而言的 文本对齐 设置文本在元素内的对齐方式 文字缩进 设置文本第一行的缩进值 负值用于将文本第一行向外拉 要在每段前空两格 可设置为2em 因为em是当前字体尺寸 2em就是两个字的大小 空格 设置如何处理元素内的空白符 指代码 正常 会将空白符全部压缩 保留 所有的空白符 包括空格 标签 回车 等都会得以保留不换行 指定文本只有遇到br标签时才换行 方框 此面板主要设置对象的边界 间距 高度 宽度 和漂浮方式等 宽 定义元素的宽 高 定义元素的高 注意 宽和高定义的对象多为图片 表格 层等 浮动 定义元素的漂浮方式 左对齐表示对象浮在左边 右对齐表示对象浮在右边 无表示对象不浮动 清除 左对齐 表示不允许左边有浮动对象 右对齐 表示不允许右边有浮动对象 无 表示允许两边都可以有浮动对象 两者都不允许有浮动对象 填充 定义元素内容与其边框的间距 如果没有边框则指页边的空白 边界 定义元素的边框与其他元素之间的距离 如果没有边框就是指内容之间的距离 边框 此面板可以设置对象边框的宽度 颜色及样式列表 面板可以设置列表项样式 列表项图片 和位置 类型 决定项目符号或编号的外观 项目符号图像 允许指定项目符号的自定义图像 位置 决定列表项换行时是缩进还是边缘对齐 定位 此地面板改变选定文本的标签或文本块 文本块变为新层 类型 决定浏览器定位层的方式 绝对 使用在 定位 框中输入的相对于页面左上角的坐标放置层 相对 相对于文档中的对象位置的坐标放置层 静态 将层定位在文本自身的位置 显示 决定层的初始显示状态 宽和高 设置层的高度和宽度 Z轴 决定层的放置顺序 溢出 决定在层的内容超出其大小时的处理方式 可见 扩展层的大小使其所有内容可见 隐藏 保持层的大小 剪切其超出部分 滚动 不论内容是否超出层的大小均为层添加滚动条自动 只有在内容超出层的边界时才出现滚动条 定位 指定层的位置和大小 剪辑 定义层的可见部分 可以使用脚本语言读取该区域 扩展 分页 在打印的时候强迫在样式控制的对象前后换页视觉效果 鼠标 当鼠标滑过样式控制的对象时改变鼠标形状 过滤器 对由样式控制的对象应用特殊效果 过滤器效果Alpha 设置透明度Opacity 透明度级别 范围是0 100 0代表完全透明 100代表完全不透明 FinishOpacity 设置渐变的透明效果时 用来指定结束时的透明度 范围也是0到100 Style 设置渐变透明的样式 值为0代表统一形状 1代表线形 2代表放射状 3代表长方形 StartX和StartY 代表渐变透明效果的开始X和Y坐标 FinishX和FinishY 代表渐变透明效果结束X和Y的坐标 BlendTrans 图像之间的淡入和淡出的效果Duration 淡入或淡出的时间 注意 这个滤镜必须配合JS建立图片序列 才能做出图片间效果 Blru 建立模糊效果Add 是否单方向模糊 此参数是一个布尔值 true 非0 或false 0 Direction 设置模糊的方向 其中0度代表垂直向上 然后每45度为一个单位 Strength 代表模糊的象素值 Chroma 把指定的颜色设置为透明Color 是指要设置为透明的颜色 DropShadow 建立阴影效果Color 指定阴影的颜色 OffX 指定阴影相对于元素在水平方向偏移量 整数 OffY 指定阴影相对于元素在垂直方向偏移量 整数 Positive 是一个布尔值 值为true 非0 时 表示为建立外阴影 为false 0 表示为建立内阴影 FlipH 将元素水平反转FlipV 将元素垂直反转Glow 建立外发光效效果Color 是指定发光的颜色 Strength 光的强度 可以是1到255之间的任何整数 数字越大 发光的范围就越大 Gray 去掉图像的色彩 显示为黑白图象Invert 反转图象的颜色 产生类似底片的效果Light 放置光源的效果 可以用来模拟光源在物体上的投影效果注意 此效果需要用JS设置光的位置和强度 Mask 建立透明遮罩Color 设置底色 让对象遮住底色的部分透明 Shadow 建立另一种阴影效果Color 是指阴影的颜色 Direction 是设置投影的方向 0度代表垂直向上 然后每45度为一个单位 Wave 波纹效果Add 表示是否显示原对象 0表示不显示 非0表示要显示原对象 Freq 设置波动的个数 LightStrength 设置波浪效果的光照强度 从0到100 0表示最弱 100表示最强 Phase 波浪的起始相角 从0到100的百分数值 例如 25相当于90度 而50相当于180度 Strength 设置波浪摇摆的幅度 Xray 显现图片的轮廓 X光片效果 注意 在使用CSS滤镜时 必须使用在有区域的元素 比如表格 图片等 而文本 段落这样没有区域的元素不能使用CSS滤镜 对这样的元素我们可以设置元素的Height和Width样式或坐标来实现 为了不影响原来对象的高度 我们设置的高度不能超过字体本身的高度 这里我设置高度为1 上机任务 制作一个外部链接样式表文件修饰示例中的网页 其中对超链接 文本 图片的边框 单元格等元素进行样式设置