网站建设与管理第6章ppt课件.ppt

第六章使用CSS样式 内容提要 6 1CSS概述6 2CSS样式的基本使用介绍6 3设置CSS样式参数6 4CSS滤镜6 5深入了解CSS6 6CSS样式表应用示例 6 1CSS概述 层叠样式表 CSS CascadingStyleSheet 是一系列格式规则 它们控制网页内容的外观 使用CSS样式可以非常灵活并更好地控制确切的网页外观 从精确的布局定位到特定的字体和样式 CSS作用 CSS样式使用户可以控制许多仅使用HTML无法控制的属性 例如 可以指定自定义列表项目符号并指定不同的字体大小和单位 像素 点数等等 通过使用CSS样式和以像素为单位设置字体大小 可以确保以更一致的方式在多个浏览器中处理页面布局和外观 除了设置文本格式外 还可以控制网页中块级别元素的格式和定位 例如 可以设置边距 边框 其他文本周围的浮动文本等等 如何将样式应用到网页 可以用三种方式将样式表加入到网页中 而最接近目标的样式定义优先级越高 高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义 在网页中使用CSS方法一 链接外部样式表文件 LinkingtoaStyleSheet 可以先建立外部样式表文件 css 然后使用HTML的link对象链接样式表文件 示例如下 文档标题 在网页中使用CSS方法二 定义内部样式块对象 EmbeddingaStyleBlock 在HTML文档的部分插入样式定义 示例如下 文档标题 在网页中使用CSS方法三 内联定义 InlineStyles 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性 示例如下 这一行被设定行边距 6 2CSS样式的基本使用介绍 CSS样式规则 CSS样式规则由两部分组成 选择器和声明 选择器是样式名称 如TR或P 而声明则用于定义样式元素 声明由两部分组成 属性 如font family 和值 如华文行楷 CSS样式表的主要优点是提供便利的更新功能 更新CSS样式时 使用该样式的所有文档的格式都自动更新为新样式 因此网站的维护变得更容易 CSS样式面板 若要打开 CSS样式 面板 请执行下列操作之一 选择 窗口 CSS样式 按Shift F11键 演示 CSS属性 选项卡 CSS属性 选项卡使用户可以直接编辑CSS规则的属性和值 用户可以修改每个CSS规则的属性打开 CSS属性 选项卡的方法是选择 窗口 标签检查器 新建CSS样式 在 CSS样式 面板中 单击面板右下角区域中的 新建CSS样式 按钮 或者选择 文本 CSS样式 新建CSS样式 演示 定义要创建的CSS样式的类型 若要创建可作为类属性应用于文本范围或文本块的自定义样式 请选择 类 可应用于任何标签 然后在 名称 域中输入样式名称 注意 自定义样式类名称必须以圆点开头 并且可以包含任何字母和数字组合 例如 myhead1 如果没有输入开头的圆点 Dreamweaver将自动追加 若要重定义特定HTML标签的默认格式 请选择 标签 重新定义特定标签的外观 然后在 标签 域中输入一个HTML标签 或从弹出菜单中选择一个标签 若要为具体某个标签组合或所有包含特定ID属性的标签定义格式 请选择 高级 ID 上下文选择器等 然后在 选择器 域中输入一个或多个HTML标签 或从弹出式菜单中选择一个标签 弹出菜单中提供的选择器包括a active a hover a link和a visited 选择定义样式的位置 若要创建外部样式表 请选择 新建样式表文件 若要在当前文档中嵌入样式 请选择 仅对该文档 定义CSS样式 演示 应用类样式 类样式是唯一可以应用于文档中任何文本 与控制文本的标签无关 的CSS样式类型 与当前文档关联的所有类样式都显示在 CSS样式 面板和文本属性检查器的 样式 弹出式菜单中 用户会发现应用的大多数样式都会立即更新在网页设计界面 但还是应该在浏览器中预览页面 验证样式是否是按预期的方式应用 因为将两个或更多的样式应用于同一文本时 这些样式可能发生冲突并产生意外的结果 应用自定义CSS样式 1 在文档中 选择要将CSS样式应用于的文本 2 在文本属性检查器中 从 样式 弹出式菜单中选择要应用的类样式 将自定义样式从选定内容中删除 1 选择要从其中删除样式的对象或文本 2 在文本属性检查器中 从 样式 弹出式菜单中选择 无 或者在 相关CSS 选项卡中右键单击要删除的已应用规则 然后从上下文菜单中选择 设置类 无 演示 导出CSS样式 从文档中导出CSS样式并创建CSS样式表 请执行以下操作 1 选择 文件 导出 CSS样式 或选择 文本 CSS样式 导出 出现 导出样式为CSS文件 对话框 2 输入样式表的名称 然后单击 保存 演示 链接或导入外部CSS样式表 链接或导入外部CSS样式表 1 在 CSS样式 面板中 单击 附加样式表 按钮 出现 链接外部样式表 2 在 链接外部样式表 对话框中 单击 浏览 查找外部CSS样式表 或在 文件 URL 框中直接键入样式表的路径 6 3设置CSS样式参数 通过实例讲解 演示example test11 html 6 4CSS滤镜 Dreamweaver的滤镜和我们所熟悉的Photoshop滤镜相似 能够渲染对象元素 创建出艺术效果 Alpha滤镜 语法 Filter Alpha Opacity FinishOpacity Style StartX StartY FinishX FinishY 作用 Alpha滤镜是把一个目标元素与背景混合 设计者可以指定数值来控制混合的程度 这种 与背景混合 通俗地说就是一个元素的透明度 通过指定坐标 可以指定点 线 面的透明度 参数 Opacity代表透明度水准 用百分比表示其属性值 默认的范围是从0到100 0代表完全透明 100代表完全不透明 FinishOpacity是一个可选参数 如果想要设置渐变的透明效果 就可以用其指定结束时的透明度 取值范围也是0到100 Style参数用来设定透明区域渐变风格 其中0代表均匀渐进 1线性渐进 2代表放射渐进 3代表直角渐进 StartX和StartY代表渐变透明效果起始位置的X轴和Y轴坐标 FinishX和FinishY代表渐变透明效果结束位置的X轴和Y轴坐标 BlendTrans滤镜 语法 Filter BlendTrans Duration 作用 设置淡入淡出效果参数 Duration表示淡入或淡出的时间 演示 Blur滤镜 语法 filter Blur Add Direction Strength 作用 使对象产生一种模糊效果参数 Add参数是一个布尔值 它指定图片是否被改变成印象派的模糊效果 模糊效果是按顺时针的方向进行的 Direction参数用来设置模糊的方向 其中0度代表垂直向上 然后每45度为一个单位 Strength参数只能使用整数值 它代表有多少像素的宽度将受到模糊影响 默认是5个 Chroma滤镜 语法 Filter Chroma Color 作用 该滤镜能够使图像中的某一颜色变成透明色参数 Color指定要变成透明的颜色 DropShadow滤镜 语法 Flter DropShadow Color OffX OffY Positive 作用 设置文本或图像的阴影效果 应用在文本上时 效果更明显 参数 Color参数代表投射阴影的颜色 OffX和OffY分别是X方向和Y方向阴影的偏移量 Positive参数是一个布尔值 如果为 True 非0 滤镜从对象的非透明像素建立阴影 如果为 False 0 滤镜从对象的透明像素建立阴影 FlipH和FlipV滤镜 语法 Filter FlipH 或 Filter FlipV 作用 FlipH滤镜将元素水平翻转 FlipV滤镜将元素垂直翻转 参数 无 Glow滤镜 语法 Filter Glow Color Strength 作用 在对象的边缘产生类似发光的效果参数 Color参数指定发光的颜色 Strength设置光的强度 取值范围为1到255之间的任何整数 值越大表示光晕越大 Gray Invert Xray滤镜 语法 Filter Gray Filter Invert Filter Xray 作用 Gray滤镜把一张图片变成灰度图 Invert滤镜是把对象的可视化属性全部翻转 包括色彩 饱和度 和亮度值 Xray滤镜能够让对象反映出它的轮廓并把这些轮廓加亮 也就是所谓的X光片 参数 无 演示 Light滤镜 语法 Filter light 作用 该滤镜能够使HTML对象产生一种模拟光源的投射效果 一旦为对象定义了Light滤镜属性 那么就可以调用它的方法来设置或者改变属性 Light滤镜可用的方法有 AddAmbient加入包围的光源AddCone加入锥形光源AddPoint加入点光源Changcolor改变光的颜色Changstrength改变光源的强度Clear清除所有的光源MoveLight移动光源可以定义光源的虚拟位置 以及通过调整X轴和Y轴的数值来控制光源焦点的位置 还可以调整光源的形式 点光源或者锥形光源 指定光源是否模糊边界 光源的颜色 亮度等属性 如果动态的设置光源 可能会产生一些意想不到的效果 Mask滤镜 语法 Filter Mask Color 作用 将对象内容的透明像素用Color参数指定的颜色作一个遮罩 为对象建立一个覆盖于表面的膜 其效果就好像戴有色眼镜看物体一样 参数 Color参数指定遮罩颜色 RevealTrans滤镜 语法 filter revealtrans duration transition 作用 设置页面切换时的过渡效果参数 Duration参数设置转换完成所需的时间 单位为秒 transition用来指定切换方式 共有24种方式 取值范围是0 23 Shadow滤镜 语法 Filter Shadow Color Direction 作用 该滤镜可以在指定的方向建立对象的投影参数 Color指定投影色 Direction参数设置投影的方向 其中0度代表垂直向上 然后每45度为一个单位 Wave滤镜 语法 Filter Wave Add Freq LightStrength Phase Strength 作用 使对象产生波纹效果参数 Add参数表示是否显示原对象 0表示不显示 非0表示显示 Freq参数是波纹的频率 也就是指定在对象上一共需要产生多少个完整的波纹 LightStrength参数用于设置波纹效果的光照强度 取值范围是0 100 Phase参数用来设置正弦波的偏移量 Strength参数代表波形振幅大小 6 5深入了解CSS 6 6CSS样式表应用示例 1 设置超链接的风格在默认情况下超级链接都呈现为蓝色且有下划线 看上去不大美观 在Dreamweaver中可以通过设置CSS样式改变超链接的风格 下面步骤设置超链接的风格为无下划线 黑色 并且鼠标悬停变色 1 新建网页文件 并打开 CSS样式 面板 2 单击 新建CSS样式 按钮打开新建对话框 在 选择器类型 域中选择 高级 在 选择器 下拉列表框中选中 a link 然后单击 确定 按钮 3 在 CSS样式定义 对话框中选择 类型 属性 设置 颜色 为黑色 大小 为10像素 修饰 为无 4 单击 新建CSS样式 按钮打开新建对话框 在 选择器类型 域中选择 高级 在 选择器 下拉列表框中选中 a hover 然后单击 确定 按钮 5 在 CSS样式定义 对话框中选择 类型 属性 设置 颜色 为红色 大小 为14像素 修饰 为无 6 在网页中输入几行文字 并创建超链接 7 按F12预览页面 发现超链接没有下划线 当把鼠标指向超链接时 链接文字变大且变为红色 创建应用于整站的外部CSS样式表 用Dreamweaver在某网页中创建了一种CSS样式后 如果需要其他的网页中应用该样式 不必重新创建该CSS样式 只要将这些CSS样式都存放在外部CSS样式表文件中 便可以供任何网页文件调用 Dreamweaver中提供多种方式创建外部CSS样式表文件 以下是其中三种常用方式 1 在网页中 新建CSS样式 时选择存放在新建样式表文件中 2 选择 文件 新建 直接创建CSS文件 3 基于系统提供的CSS样式集模板创建CSS文件网站设计人员通常将CSS样式放在几个独立的外部文件中 供全站网页链接调用 以实现整个网站风格一致 并且通过修改外部CSS样式文件可简单快捷地更新全站风格 外部CSS样式表文件示例 a text decoration none a link color 1791d9 font family 宋体 text decoration none a visited color 1791d9 font family 宋体 text decoration none a active font family 宋体 text decoration none a hover border bottom 0pxdotted border left width 0px border right width 0px border top width 0px color ff6600 text decoration none body font size 12px color 666666 font family 宋体 background color ffffff scrollbar face color e4e4e4 scrollbar highlight color ffffff scrollbar shadow color a0a0a0 scrollba