Dreamweaver教程第8章ppt课件

第8章CSS样式 学习目的与要求 创建CSS样式表掌握CSS样式的属性项目设置方法在文档中应用样式表 会管理样式表会应用CSS滤镜对文字和图像做出特殊效果 8 1创建CSS样式 CSS样式 层叠式样式 简称CSS 是一种比较先进的网页控制技术 主要用来指定布局 字体 颜色 背景以及其他的一些图文元素的格式 CSS样式一般为分嵌入式和外部链接式两种类型 嵌入式是在独立的文档中应用的CSS样式 外部链接式样式应用于多个文档 生成专门的 css文件 内部样式表文件 创建的样式只对当前文档起作用 这样的样式称为内部样式表文件 外部样式表文件 保存在外部但可以链接到当前文档中的样式称为外部样式表文件 8 1创建CSS样式 8 1 1新建CSS样式 1 选择菜单 窗口 CSS样式 命令 打开CSS样式面板 2 在面板右侧的下拉菜单中选择 新建CSS样式 出现 新建CSS样式 对话框 8 1创建CSS样式 8 1 2CSS样式面板1 正在 模式 1 单击CSS样式面板顶部的 正在 按钮 2 选择当前页中的一个文本元素以显示它的属性 3 在 所选内容的摘要 窗格中选择一个属性并编辑 8 1 2CSS样式面板2 全部 模式 1 单击 CSS样式 面板顶部的 全部 按钮 2 编辑样式属性 执行下列操作之一 在 全部规则 窗格中双击某条规则以显示 CSS 规则定义对话框 然后进行更改 在 全部规则 窗格中选择一条规则 在下面的 属性 窗格中编辑该规则的属性 在 全部规则 窗格中选择一条规则 然后单击 CSS 样式 面板右下角中的 编辑样式 按钮 8 1创建CSS样式 8 1创建CSS样式 8 1 2CSS样式面板3 添加属性 1 在 所有规则 窗格中选择一条属性 所有 模式 或者在 所选内容的摘要 窗格中选择一个属性 当前 模式 2 执行下列操作之一如果在 属性 窗格中选择了 只显示设置属性 视图 请单击 添加属性 链接并添加属性 如果在 属性 窗格中选择了 类别 视图或 列表 视图 则为要添加的属性填入一个值 8 1创建CSS样式 8 1 2CSS样式面板4 CSS样式面板上的按纽 类别视图 将CSS属性划分为8个类别 列表视图 按字母顺序显示CSS属性 设置属性视图 仅显示那些已设置的属性 附加样式表 打开 链接外部样式表 对话框 新建CSS规则 编辑样式 编辑当前文档或外部样式表中的样式 删除CSS样式面板中的所选规则或属性 8 1创建CSS样式 8 1 3CSS样式规则对话框 1 名称 输入样式的名称 2 选择器类型 选择创建样式的类型 有3种样式可供选择 类 创建一个应用于文本和文本块的CSS样式 标签 选择重新定义的标签 高级 对特定的HTML标签组合或含有某个ID属性的所有标签进行重新定义 3 定义在 有2个选项 仅对该文档 设置的CSS样式只对当前文档起作用新建样式表文件 保存为样式表文件 css 8 1创建CSS样式 8 1 4样式定义对话框 8 1创建CSS样式 8 1 5样式的类型1 定义类样式并应用于表格的实例 1 定义左上角的单元格边框单击新建按钮 在 选择器类型 中选择 类 在 名称 后输入 left 定义在 项选为 仅对该文档 8 1创建CSS样式 8 1 3CSS样式规则对话框在 分类 栏中 选择 边框 选项 8 1创建CSS样式 8 1 3CSS样式规则对话框 2 应用该样式在网页中插入一个2行2列的表格 表格的边框为1 将光标定位到表格第一行的第1个单元格 在文档窗口左下角的标签中选择 选中这个单元格 打开 属性 面板 单击 样式 后面的下拉列表从中选择 left 8 1创建CSS样式 8 1 3CSS样式规则对话框 3 定义右下角的单元格边框在CSS样式窗口中 单击新建按钮 在 选择器类型 中选择 类 在 名称 后输入 right 定义在 项选为 仅对该文档 在 分类 栏中 选择 边框 选项 设置 左 上 的线型为 虚线 线的宽度为 1 颜色 值为 666666 进入设计视图 将光标定位到表格的右下角的单元格内部 在文档窗口左下角的标签中选择 选中这个单元格 在属性面板中应用样式 right 8 1创建CSS样式 8 1 3CSS样式规则对话框2 标签创建新的CSS样式时 在 新建CSS样式 对话框中的 选择择器类型 选项中选择 标签 可以在 标签 下拉列表中选择相应的标签 8 1创建CSS样式 8 1 3CSS样式规则对话框3 重定义标签实例 1 定义 table 标签及应用单击新建按钮 在 选择器类型 中选择 标签 在 标签 下拉列表中选择 table 定义在 项选为 仅对该文档 在 分类 栏中 选择 边框 选项 设置表格中的边框样式 在页面的空白处单击 插入 工具栏上的 插入表格 按钮 插入一个4行2列的表格 在表格里面输入文字 设置属性 按F12浏览查看 8 1创建CSS样式 8 1 3CSS样式规则对话框4 使用高级CSS选择器在 新建CSS样式 对话框中的 类型 中选择 使用CSS选择器 可以在 选择器 选项的下拉列表中选择相应的超级链接状态 共有四个选顶可以设置文字超级链接的四种状态 a link 正常的未被访问过的链接的文本显示样式 a visited 被访问过的超级链接文本的显示样式 a hover 光标移到超级链接文本上时的显示样式 a active 超级链接文本被激活的显示样式 8 1创建CSS样式 8 1 3CSS样式规则对话框设置超链接文字的样式的具体操作 1 在 类型 中选择 使用CSS选择器 在 选择器 选项的下拉列表中选择 a link 定义在 选择 仅对该文档 2 单击 确定 按钮后 在 类别 栏中 选择 类型 选项 设置未访问过的文字的链接样式 修饰 项中将 无 选中 单击 确定 后 设置好一个链接的状态 3 设置其他的状态 4 输入页面中的链接文字 在文档窗口 看到链接的文字颜色为蓝色 8 2编辑样式 8 2 1样式对话框中参数的设定1 类型字体 指定文本的字体 大小 设置文字的尺寸 样式 设置字体的风格 行高 设置行与行之间的垂直距离 修饰 设置链接文本的显示状态 粗细 设置字体的粗细效果 变形 设置字母类文本 选项包括正常和小型大写字母 大小写 设置字母的大小写 颜色 设定文本的颜色 8 2编辑样式 8 2 1样式对话框中参数的设定2 背景 8 2编辑样式 8 2 1样式对话框中参数的设定背景颜色 设置文本所在段落的背景颜色 背景图像 设置文本所在的背景图像的平铺方式 重复 控制背景图像在网页内的排列方式 重复 在文本后面纵向和横向铺满图像 不重复 在文本的起始位置显示一次图像 横向重复 在水平方向进行图像的平铺 纵向重复 在垂直方向进行图像的平铺 附件 决定背景图像是在起始位置固定不动还是同内容一起滚动 固定 文字滚动时 背景图像保持不动 滚动 背景图像随文字的滚动而滚动 水平位置和垂直位置 指定图像相对于文本的初始横向位置和纵向位置 8 2编辑样式 8 2 1样式对话框中参数的设定3 区块 8 2编辑样式 8 2 1样式对话框中参数的设定单词间距 设置文字之间的距离 字母间距 设置文字之间或是字母之间的间距 垂直对齐 控制文字或者图像相对于其母体元素的垂直位置 文本对齐 指定文本段落的水平对齐方式 文字缩进 控制段落文本中第一行向右缩进的数值 空格 确定如何处理页面中的白色空格 普通 折叠白色空格 保留 将白色空格都当作文本用PRE标签包围起来 不换行 指定文本只有在碰到BR标签时才换行 显示 设置区块的显示方式 8 2编辑样式 8 2 1样式对话框中参数的设定4 方框 8 2编辑样式 8 2 1样式对话框中参数的设定宽和高 设置元素的宽度和高度 浮动 设置其他元素 如文本 层 表格等 在哪个边围绕元素浮动 清除 定义不允许层的边 填充 指定元素内容与元素边框之间的间距 全部相同 为应用此属性的元素的 上 右 下 和 左 侧设置相同的填充属性 边界 指定二个元素的边框之间的间距 全部相同 为应用此属性的元素的 上 右 下 和 左 侧设置相同的边距属性 8 2编辑样式 8 2 1样式对话框中参数的设定5 边框 1 边框属性宽度 可以分别设置文本边框上 右 下 左的宽度 每个选项的下拉菜单都有如下选项 细 中粗 粗 自动 值 颜色 分别设定各个边框的颜色 样式 设置边框的样式 在文档窗口中 所有的样式显示均为实线 有下列选项 无 点画线 点画线 实心线 双线凹线 书脊线 内缩线 外扩线 8 2编辑样式 8 2 1样式对话框中参数的设定5 边框 2 应用CSS边框样式实例在样式面板上单击新建按钮 设置样式的名称为 bk 类型 为 创建自定义样式 定义在 选择 仅对该文档 确定 后 在 分类 项目中选择 背景 项目 选择一幅背景图像 设置重复 不重复 附件 固定 水平位置 右对齐 垂直位置 底部 8 2编辑样式 8 2 1样式对话框中参数的设定5 边框 2 应用CSS边框样式实例在 方框 项目中设置 宽 为200像素 浮动 为 左对齐 将 填充 上 左 右设置为10像素 下设置为80像素 边界 均设置为10像素 注意 边界 选中 全部相同 复选框 在 边框 项目中设置 样式 为 虚线 边框 的宽度为1像素 设置颜色为深绿色 注意均选中 全部相同 复选框 在页面中输入文字 选中要应用样式的文字内容 在样式面板上单击 bk 文档预览 8 2编辑样式 8 2 1样式对话框中参数的设定5 边框 3 为水平线应用边框样式在网页中插入一条水平线 新建一个样式 输入样式名称为 line1 选择器类型 为 类 定义在 选择 仅对该文档 在对话框中 分类 中选择 边框 选项 只设置 上 的线型为 虚线 颜色处选择 绿色 返回到编辑窗口 为水平线应用样式 line1 存盘浏览网页 发现水平线已经变成绿色的虚线了 8 2编辑样式 8 2 1样式对话框中参数的设定6 列表 1 列表属性 8 2编辑样式 8 2 1样式对话框中参数的设定6 列表 1 列表属性类型 设置列表项目前面使用的符号 选项包括圆点 圆圈 方型 数字 小写罗马数字 大写罗马数字 小写字母和大写字母和无 项目符号图像 将选择的图像作为列表前面的符号 位置 设置列表项目的位置 选项包括内和外 它决定列表项换行时是缩进还是边缘对齐 8 2编辑样式 8 2 1样式对话框中参数的设定6 列表 2 应用CSS列表样式实例新建的名称为 css6 类型 为创建自定义样式 定义在 单击 仅对该文档 确定 后 弹出 CSS样式定义 对话框 在 分类 项目中选择 列表 项目 类型 为 方块 单击 浏览 按钮选择一幅小的图像 位置 为 内 在页面中输入文字 即时播报 并选中这部分文字 在属性面板上单击 项目列表 按钮 此时 即时播报 的前边出现一个黑色的小方块 8 2编辑样式 8 2 1样式对话框中参数的设定6 列表 2 应用CSS列表样式实例选中文字 即时播报 在样式面板上单击样式列表的名称 css6 为其应用自定义的列表样式 用同样的方法再新建一个另一个列表样式css7 选择另一幅小图像作为项目符号图像 其他属性设置同css6 在页面中输入另几段文字 并选中它们 单击属性面板上的 编号列表 按钮 这部分文字的每行的行首出现了数字编号 选中后输入的文字内容 在样式面板上单击样式列表中的名称 css7 为其应用自定义的列表样式 8 2编辑样式 8 2 1样式对话框中参数的设定7 定位定位项目用于精确控制网页中元素 特别是层 的位置参数 8 2编辑样式 8 2 1样式对话框中参数的设定7 定位类型 确定浏览器中定位的类型 绝对 相对于页面的左上角进行层的放置 固定 相对 相对于文本对象所在的位置进行层的放置 静态 将层放置在文本自身的位置 显示 确定层的初始显示条件 默认状态为继承 继承 继承层的父级的可见性属性 可见 显示这些层的内容 隐藏 隐藏这些层的内容 8 2编辑样式 8 2 1样式对话框中参数的设定7 定位Z轴 设置网页中层的顺序 溢位 层的宽度和高度设置完成后 如果加入其中的内容无法完全显示 此选项就会发生作用 可见 扩大层的面积以便显示所有内容 层向右下方扩展 隐藏 保持层的大小 剪切其超出的的部分 滚动 不论层是否超出都为层加入滚动条 自动 只有层超出时才会为层加入滚动条 置入 指定层的具体位置 包括下 下 左 右四个子属性 裁切 把元素区域剪切成各种形状 8 2编辑样式 8 2 1样式对话框中参数的设定 8 2编辑样式 8 2 1样式对话框中参数的设定8 扩展分页 为打印的页面设置分页符 选项包括之前和之后 光标 在下拉列表中设置光标指定某个元素时 指针的显示类型 滤镜 对由样式控制的对象使用滤镜效果 包括模糊 透明 发光及混合等 8 2编辑样式 8 2 2样式的导入与导出1 导入 1 单击样式面板右上角的箭头 从弹出的菜单中选择 附加样式表 弹出 链接外部样式表 对话框 选择要导入的CSS文件 确定 后文件中的样式就导入到当前文档中了可以在样式面板上看到链接的样式表文件 8 2编辑样式 8 2 2样式的导入与导出1 导入 2 使用标记 把该标记置于 之间 指明要链接的样式文件 以 css为后缀后保存成一个独立的文本文件 一个样式文件中可包含多个样式 这样的方式可在目前的网页中使用外部样式表内的样式 其代码为 8 2编辑样式 8 2 2样式的导入与导出2 导出 1 在样式面板中选中样式表名称 单击样式面板右上角的箭头 或者单击右键 选择 导出 命令 输入要保存的样式表文件的名称并选择保存目录 这个样式表就保存成一个外部CSS文件 可以被其他文件链接使用 2 选择菜单 文件 导出 CSS样式 在弹出的对话框中选择样式表的存储路径和存储的文件名 单击 保存 按钮即将其导出成一个独立的CSS文件 8 3样式的应用 8 2 2样式的导入与导出 1 选中文字 单击属性面板中 样式 后的向下箭头 选取要应用的样式的名称 2 在标签区选中标签 在此处单击鼠标右键 即选取了鼠标所在的段落 再选择快捷菜单中的 设置类 选取要应用的样式 3 在编辑窗口选中要应用的对象 在CSS面板上要应用的样式名称处单击鼠标右键 在弹出的快捷菜单中选择 套用 选项 也可应用该样式 4 选取要应用样式的对象 在选取的对象上单击鼠标右键 选择 CSS样式 选择要应用样式的名称 8 4滤镜 8 4 1CSS滤镜1 Blur滤镜让文字或图片拥有立体的效果 1 语法Blur add 值1 direction 值2 strength 值3 2 参数add 设置是否要在已经应用Blur过滤器上的HTML元素上显示原来的模糊方向 direction 用来表示模糊的方向 strength 用来表示图像模糊的半径大小 3 滤镜的使用同一个网页中可以使用不同参数的Blur滤镜 8 4滤镜 8 4 1CSS滤镜2 DropShadow滤镜 1 语法DropShadow color 值1 offx 值2 offy 值3 positive 值4 2 作用该滤镜主要是用来产生重叠效果的 3 参数color 用来设置阴影的颜色 offx 阴影相对于原对象在水平方向上的偏移量 offy 阴影相对于原对象在垂直方向上的偏移量 positive 指定阴影的透明程度 8 4滤镜 8 4 1CSS滤镜3 Shadow滤镜Shadow滤镜是用于产生下落式阴影效果 color 阴影字的颜色 可以是英文名称或是颜色的十六进制代码 Direction 设置模糊的方向 值从0度 360度 8 4滤镜 8 4 1CSS滤镜4 Alpha滤镜 1 语法 Alpha Opacity 值1 FinishOpacity 值2 Style 值3 StartX 值4 StartY 值5 FinishX 值6 FinishY 值 2 参数Opacity 设置透明度 FinishOpacity 制作出透明渐进的效果 Style 设置渐变风格 StartX和StartY 设置水平和垂直的渐进起始位置 FinishX和FinishY 设置水平和垂直的渐进结束位置 8 4滤镜 8 4 1CSS滤镜5 FlipH FlipV滤镜语法 fliph flipv作用 分别是水平反转和垂直反转 6 Gray Invert Xray滤镜 1 语法 gray invert xrayGray滤镜是把一张图片变成灰度图 Invert滤镜是把对象的可视化属性全部翻转 包括色彩 饱和度 亮度值 Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮 也就是所谓的X光片 8 4滤镜 8 4 1CSS滤镜7 Wave滤镜 对图像和文字产生抖动效果 1 语法 wave add 值1 freq 值2 lightstrength 值3 phase 值4 strength 值5 2 参数Add 设置是否在已经使用了Wave过滤器的元素对象上显示原对象 Freq 是波纹的频率 Lightstrength 对于波纹加强光影的效果 Phase 设置正弦波的起始位置 Strength 用来表示振幅的大小 8 4滤镜 8 4 1CSS滤镜8 Light滤镜 模拟光源的投射效果 1 语法 light 2 参数AddAmbient 加入包围的光源 AddCone 加入锥形光源 AddPoint 加入点光源 Changcolor 改变光的颜色 Changstrength 改变光源的强度 Clear 清除所有的光源 MoveLight 移动光源 8 4滤镜 8 4 1CSS滤镜9 Glow滤镜 1 语法Glow Color 值 Strength 值 2 参数Color 效果的颜色值 Strength 设定光晕的强度 数值越大 强度越大 8 4滤镜 8 4 2滤镜实例1 Blur滤镜实例 1 设置Blur滤镜单击 窗口 CSS样式 打开CSS面板 在面板右侧的下拉菜单中选择 新建CSS样式 命令 或者单击面板右下角的新建CSS样式图标 出现新建样式的对话框 在对话框中输入样式的名称 css1 单击 确定 后 弹出 css1的样式定义 对话框 在 分类 列表框中选择 扩展 在 滤镜 下拉列表中选择 Blur 设置其参数为 Blur Add true Direction 135 Strength 8 单击 确定 按钮 完成样式 css1 的创建 8 4滤镜 8 4 2滤镜实例1 Blur滤镜实例 2 把Blur加载到文字上单击插入面板上的插入层按钮 在页面上插入一个层 在层内插入文字 微风吹过湖面 在属性面板上设其属性值为 宋体 36号字 加粗 颜色值为 3300FF 单击层标记选中层 此时层的周围有8个控制点 如图8 29所示 单击CSS面板上的样式列表的名称 css1 为层应用样式 css1 此时在状态栏上会看到应用了样式的层标签 8 4滤镜 8 4 2滤镜实例1 Blur滤镜实例 3 把Blur加载到图像上单击插入面板上的插入图像按钮 在页面中插入3幅图像 在图像的属性面板上设置3幅图像的统一尺寸为宽200像素 高200像素 选中第1幅图像 单击CSS面板上样式列表的名称 css1 同样的办法为另两幅图像应用 css1 样式 8 4滤镜 8 4 2滤镜实例2 DropShadow滤镜实例 1 单击 窗口 CSS样式 打开CSS窗口 2 在面板右侧的下拉菜单中选择 新建CSS样式 命令 新建样式 css1 3 在弹出的对话框中 在 分类 列表框中选择 扩展 在 滤镜 下拉列表中选择 DropShadow 设置其参数为 DropShadow Color 66FFFF OffX 3 OffY 3 Positive ture 8 4 2滤镜实例2 DropShad