Dreamweaver CS5 网页的设计与应用（第2版）第8章CSS样式.pptxVIP

第8章 CSS样式 本章简介：通过CSS的样式定义，可以将网页制作得更加绚丽多彩。本章主要对CSS的技术应用进行了讲解。通过这些内容的学习，可以使设计者轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果进行精确的控制。课堂学习目标了解CSS样式掌握CSS属性熟练运用CSS过滤器 8.1 CSS样式概述 “CSS样式”面板 CSS样式的类型8.1.1 “CSS样式”面板 “CSS样式”控制面板，它由样式列表和底部的按钮组成。样式列表用于查看与当前文档相关联的样式定义以及样式的层次结构。“CSS样式”控制面板可以显示自定义CSS样式、重定义的HTML标签和CSS选择器样式的样式定义。效果图8.2.1 类型 “类型”分类主要是定义网页中文字的字体、字号、颜色等。 “类型”选项面板 8.2.2 背景 “背景”分类用于在网页元素后加入背景图像或背景颜色。 “背景”选项面板 8.2.3 区块 “区块”分类用于控制网页中块元素的间距、对齐方式和文字缩进等属性。块元素可以是文本、图像和层等。“区块”选项面板 8.2.4 方框 CSS将网页中所有的块元素可被看成包含在盒子中，这个盒子分成4部分。“方框”属性与“边框”属性都是针对盒子中的各部分的 。 “方框”选项面板 8.2.5 边框 “边框”分类主要针对盒子边框。 “边框”选项面板 8.2.6 列表 “列表”分类用于设置项目符号或编号的外观。 “列表”选项面板 8.2.7 定位 “定位”分类用于精确控制网页元素的位置，主要针对层的位置进行控制。 “定位”选项面板 8.2.8 扩展 “扩展”分类主要用于控制鼠标指针形状、控制打印时的分页以及为网页元素添加滤镜效果，但它仅支持 IE浏览器4.0或更高的版本。 “扩展”选项面板 8.2.9 课堂案例——彩妆美舍网 使用绘制 AP Div按钮绘制层，使用CSS设置文字的样式。效果图8.3 过滤器 CSS的静态过滤器课堂案例——时尚数码技术网8.3.1 CSS的静态过滤器 CSS中有静态过滤器和动态过滤器两种过滤器。静态过滤器使被施加的对象产生各种静态的特殊效果。8.3.2 课堂案例——时尚数码技术网 使用Alpha滤镜把图像设定为透透明效果。 效果图课堂练习——抒情散文网 使用CSS命令设置文字的样式。 效果图课后习题——照片美化网 使用Blur滤镜制作照片模糊效果。 效果图