网页设计-任务十一使用css美化网页

《网页设计-任务十一使用css美化网页》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目五美化网页网页设计DreamweaverCS3项目教程项目五美化网页技能目标在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果。掌握标签样式、高级样式、类样式的区别与应用范围。知识目标熟练掌握CSS样式表的创建与编辑。掌握CSS样式表的基本语法和定义位置。理解CSS样式表的标签样式、高级样式、类样式的定义方法。掌握一些CSS样式表的基本滤镜效果。理解DreamweaverCS3新增加的Spry组件功能。任务十一使用CSS美化网页项目五美化网页5.1.1使用CSS美化网页5.1.2问题探究—CSS层叠样式表5.1.3知识拓展—动态链接CSS样式5.1.4知识

2、拓展—CSS滤镜任务十一使用CSS美化网页项目五美化网页工作任务CSS样式表用来控制一个网页文档中某文本区域外的一组格式属性，它的使用简化了网页代码，加快下载速度，减少上传的代码量，尽可能地避免了大量的重复操作，从而大大提高了网页排版的效率，而且也为网页制作者统一网站的整体风格提供了便利。通过该任务的实施完成，用户能够灵活利用CSS各种规则样式的创建来改变页面效果，体验并理解CSS将内容与格式分离的内涵，制作出更加美观赏心悦目的网页效果。任务十一使用CSS美化网页—构建任务项目五美化网页工作流程打开站点中已设计好的页面。定义页面标题文本的样式。建立自定义的链接样式。定义C

3、SS样式并应用到网页对应元素。制作特殊边框效果。为图片设计CSS滤镜效果。导出CSS样式。新建网页文件导入刚导出的CSS文件，体验CSS的“一次创建，多次使用”。任务十一使用CSS美化网页—构建任务项目五美化网页网页预览效果任务十一使用CSS美化网页—构建任务项目五美化网页CSS是CascadingStyleSheet（层叠样式表）的缩写，是网页设计中定义各种样式的一套规范，CSS采用“先定义，后使用”的原则，简化了网页的格式代码，可以将多个样式同时应用于一个页面或网页中的同一个元素，实现网页设计的标准化、结构化，同时也减少了代码的上传数量、加快了下载和显示速度、优化了工

4、作流程。任务十一使用CSS美化网页—问题探究项目五美化网页CSS样式表基本语法CSS样式表是对HTML语法的一次重大革新，它位于文档的区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。将样式规则加入到HTML文档中的方法有很多，但最简单的启动方式是使用HTML的Style组件。如下代码定义了标签使用的字号和颜色。body{font-size:12px;color:#993399;}任务十一使用CSS美化网页—问题探究项目五美化网页style是引入样式表最通用的方式。

5、>之间可以包含多个styles，也可以通过link将外部CSS文档与html文档相关联，也可以通过@import指令引入多个外部CSS文档；type属性则表明这部分代码用来定义样式表。其中body和.font1是样式的类型和名称，{}之内的属性定义了该样式的规则。CSS样式表的核心特点是将规则应用到元素集上的能力。它的应用主要有三种形式：组合多种属性自定义样式、对某种标签重新设置属性、对某种标签的特定属性进行设置。其应用又分为两个步骤来进行，首先定义CSS样式规则，这些规则可以直接插入到网页的HTML代码段中，也可以单独保存在CSS文档中；然后将规则应用到

6、相应的页面元素上，例如文本、列表、图像、表格、框架、表单等。任务十一使用CSS美化网页—问题探究项目五美化网页创建CSS样式表规则采用两种方法实施1、使用菜单命令从主菜单选择“文本/CSS样式/新建”命令，或者在页面空白处单击鼠标右键，在弹出的菜单中选择“CSS样式/新建”，都可以启动“新建CSS规则”对话框，如图5-10所示。设置选择器类型设置规则名称设置定义方式。任务十一使用CSS美化网页—问题探究项目五美化网页2、使用CSS样式面板CSS样式面板集成在浮动面板组，处于隐藏状态。用户可在菜单上选择“窗口/CSS样式”（或快捷键Shift+F11），打开如图5-8所示的

7、CSS样式面板。任务十一使用CSS美化网页—问题探究项目五美化网页CSS编辑器在“新建CSS规则”对话框中设置好相应选项，并单击“确定”按钮保存新创建的CSS文件后，即弹出“CSS规则定义”对话框，对规则的内容进行详细的设置，如图5-11所示。图中包含了W3C组织规定的所有CSS的属性，包括类型、背景、区块、方框五、列表、定位、扩展等八个部分，用户可以对这八种类别定制详细样式的格式。任务十一使用CSS美化网页—问题探究项目五美化网页CSS样式表定义方式定义好CSS规则后，就可以在网页中直接使用这些规则。“新建CSS规则”对话框