第11章 CSS样式制作动感文字.ppt_第1页
第11章 CSS样式制作动感文字.ppt_第2页
第11章 CSS样式制作动感文字.ppt_第3页
第11章 CSS样式制作动感文字.ppt_第4页
第11章 CSS样式制作动感文字.ppt_第5页
已阅读5页,还剩27页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

课堂讲解上机实战 第11课CSS样式 课堂讲解 CSS样式简介创建CSS样式设置CSS样式管理CSS样式应用CSS滤镜效果扩展的CSS支持 CSS样式简介 CSS CascadingStyleSheets 样式又叫层叠样式 使用它可以对网页中的布局元素 如表格 字体 颜色 背景 链接效果和其他图文效果实现更加精确的控制 CSS样式不仅可以在一个页面中使用 而且可以用于其他多个页面 创建CSS样式 自定义CSS样式HTML标签样式CSS选择器样式 自定义CSS样式 自定义CSS样式可以对任何文本块或文本区域进行且需要用户手动进行应用 HTML标签样式 该样式是对现有的HTML标记进行重新定义 当创建或改变该样式时 所有应用了该样式的文本格式都会自动更新 CSS选择器样式 该样式是对某些特定的标记组合进行重新定义 如所有包含了特定ID属性的标记 设置完成此样式后Dreamweaver会自动应用该样式 设置CSS样式 类型设置背景设置区块设置方框设置边框设置列表设置定位设置扩展设置 类型设置 背景设置 背景 设置包括设置背景颜色 选择背景图像 设置背景图像是否重复及重复的方式 背景图像是否滚动 背景图像相对于应用样式元素的位置 区块设置 区块 指网页中文本 图像和层等替代元素 主要用于控制块中元素的间距和对齐方式等 方框设置 方框 设置可以定义控制元素在页面上的放置方式和属性等 边框设置 边框 设置包括定义元素周围边框的样式 宽度及颜色等 列表设置 列表 设置主要用于控制列表内各项元素的属性 如项目符号类型 项目符号图像和项目符号位置 定位设置 定位 设置主要用于控制网页元素 特别是层的位置 扩展设置 扩展 设置主要用于为打印的页面设置分页和为网页元素设置视觉效果 管理CSS样式 修改CSS样式删除CSS样式复制CSS样式重命名层叠样式应用CSS样式表自定义CSS样式的应用链接外部CSS样式 修改CSS样式 创建层叠样式后 可以修改样式中的某些参数 删除CSS样式 在 CSS样式 面板中 选择要删除的样式名称 单击面板底部的 删除 按钮即可将样式删除 复制CSS样式 复制一个已经创建完成的CSS样式 再对其参数进行修改 即可创建一个全新的CSS样式 这样可以提高工作效率 重命名层叠样式 自定义CSS样式的应用 在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的 只有自定义层叠样式需要用户手动操作 链接外部CSS样式 通过链接外部CSS样式可将其他网页中的样式应用到当前网页中 应用CSS滤镜效果 CSS滤镜是CSS的一个扩展 能把可视化的滤镜和转换效果添加到一个标准的HTML元素上 使应用样式的对象产生模糊 反转 发光等特殊效果 在Dreamweaver8中 可直接在对话框中添加滤镜的参数 而不用编写复杂的代码 应用CSS滤镜效果 1 打开网页文档 2 执行文本 CSS样式 新建命令 3 打开 新建CSS规则 对话框 在对话框中 选择器类型 设置为 类 在 名称 下拉列表中输入 gy 定义在 设置为 仅对该文档 4 单击 确定 按钮 打开 gy的CSS规则定义 对话框 在对话框中的 分类 列表框中选择 扩展 选项 在 滤镜 下拉列表中选择GLOW Color strength 选项 应用CSS滤镜效果 5 将选项中Color设置为 CC3300 Strength设置为150 6 单击 确定 按钮 新建样式 选中要应用样式的文字所在的单元格 在 属性 面板中的 样式 下拉列表中选中新建的样式 Color设置边缘光晕的颜色 可以是颜色英文名称或以十六进制数设定 Strength设置边缘光晕的强度大小 设置从1到255 数值越大强度越大 应用CSS滤镜效果 Dreamweaver中CSS滤镜只能应用于有局域限制的对象 如表格 单元格 图片等 而不能直接用于文字 所以要将需要增加特效的文字事先放在表格中 然后让表格应用CSS样式 从而使文字产生特殊效果 应用CSS滤镜效果 Shadow滤镜可以使文字产生阴影效果 1 打开网页文档 2 执行文本 CSS样式 新建命令 3 打开 新建CSS规则 对话框 在对话框中 选择器类型 设置为 类 在 名称 下拉列表中输入 yy 定义在 设置为 仅对该文档 4 单击 确定 按钮 打开 yy的CSS规则定义 对话框 在对话框中的 分类 列表框中选择 扩展 选项 在 滤镜 下拉列表中选择Shadow Color Direction 选项 应用CSS滤镜效果 5 将选项中Color设置为 FF0000 Direction设置为120 6 单击 确定 按钮 新建样式 选中要应用样式的文字所在的单元格 在 属性 面板中的 样式 下拉列表中选中新建的样式 Shadow滤镜可以使文字产生阴影效果 Shadow滤镜的格式Shadow Color Direction Color设置为投影的颜色 可以是颜色英文名称或以十六进制数设定 Direction设置阴影的方向 从0度开始 并以每45度为一个单位 直到360度 制作滚动图片效果 1 打开网页文档 2 选中第1幅图像 切换到拆分视图 在相应的位置输入以下代码 3 选中最后一幅图像 在相应的位置输入代码 扩展的CSS支持 在Dreamweaver8中 CSS面板设计成了统一的面板 我们在此面板中可以快速确认样式 编辑样式 查看应用于页面元素的样式 上机实战 本课上机实战主要练习某公

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论