08章CSS

（第2版）CS6第8章CSS样式本章简介：层叠样式表（CSS）是W3C组织新近批准的一个辅助HTML设计的新特性，能保持整个HTML的统一外观。网页样式表的功能强大、操作灵活，用CSS改变一个文件就可以改变数百个文件的外观，而且个性化的表现更能吸引访问者。课堂学习目标掌握CSS样式的概念掌握CSS样式面板的使用方法掌握CSS样式选择器的应用掌握样式的类型和创建方法掌握CSS样式的属性掌握过滤器的使用方法8.1CSS样式的概念CSS是CascadingStyleSheet的缩写，一般译为“层叠样式表”或“级联样式表”。层叠样式表是对HTML3.2之前版本语法的变革，将某些HTML标签属性简化。层叠样式表是HTML的一部分，它将对象引入到HTML中，可以通过脚本程序调用和改变对象的属性，从而产生动态效果。8.2CSS样式“CSS样式”控制面板CSS样式的类型8.2.1“CSS样式”控制面板使用“CSS样式”控制面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。打开“CSS样式”控制面板样式表的功能“CSS样式”面板8.2.2“CSS样式”控制面板层叠样式表是一系列格式规则，它们控制网页各元素的定位和外观，实现HTML无法实现的效果。在DeamweaverCS6中可以运用的样式分为重定义HTML标签样式、自定义样式、使用CSS选择器3类。重定义HTML标签样式CSS选择器样式自定义样式8.3样式的类型与创建创建重定义HTML标签样式创建和应用自定义样式创建和引用外部样式8.3.1创建重定义HTML标签样式当重新定义某HTML标签默认格式后，网页中的该HTML标签元素都会自动变化。因此，当需要修改网页中某HTML标签的所有样式时，只需重新定义该HTML标签样式即可。启用新建CSS规则对话框重新定义HTML标签样式“CSS样式”面板8.3.2创建和应用自定义样式若要为不同网页元素设定相同的格式，可先创建一个自定义样式，然后将它应用到文档的网页元素上。创建自定义样式应用样式8.3.3创建和引用外部样式如果不同网页的不同网页元素需要同一样式时，可通过引用外部样式来实现。首先创建一个外部样式，然后在不同网页的不同HTML元素中引用定义好的外部样式。创建外部样式引用外部样式8.4编辑样式网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有HTML对象的格式；如果修改外部样式文件，则自动重新设置与它链接的所有HTML文档。8.5CSS的属性课堂案例——爱越野网页类型背景区块方框边框列表定位扩展过渡8.5.1课堂案例—时尚彩妆网使用“表格”按钮，插入表格效果；使用“属性”面板，为文字添加空链接；使用“CSS样式”命令，设置翻转效果的链接。效果图8.5.2类型“类型”分类主要是定义网页中文字的字体、字号、颜色等。“类型”选项面板8.5.3背景“背景”分类用于在网页元素后加入背景图像或背景颜色。“背景”选项面板8.5.4区块“区块”分类用于控制网页中块元素的间距、对齐方式和文字缩进等属性。块元素可以是文本、图像和层等。“区块”选项面板8.5.5方框“方框”分类用于控制网页中块元素的内容距区块边框的距离、区块的大小、区块间的间隔等。块元素可为文本、图像和层等。“方框”选项面板8.5.6边框“边框”分类主要针对块元素的边框。“边框”选项面板8.5.7列表“列表”分类用于设置项目符号或编号的外观。“列表”选项面板8.5.8定位“定位”分类用于精确控制网页元素的位置，主要针对层的位置进行控制。“定位”选项面板8.5.9扩展“扩展”分类主要用于控制鼠标指针形状、控制打印时的分页以及为网页元素添加滤镜效果。“扩展”选项面板8.5.10过渡“过渡”分类主要用于控制动画属性的变化，以响应触发器事件，如悬停、单击和聚焦等。“过渡”选项面板8.6过滤器课堂案例——汽车配件网页可应用过滤的HTML标签CSS的静态过滤器CSS的动态过滤器8.6.1课堂案例—汽车配件网页使用“图像”按钮，插入图片；使用Gray滤镜，制作图片黑白效果。效果图8.6.2可应用过滤的HTML标签CSS过滤器不仅可以施加在图像上，而且可以施加在文字、表格和图层等网页元素上，但并不是所有的HTML标签都可以施加CSS过滤器，只有BODY（网页主体）、BUTTON（按钮）、DIV（层）、IMG（图像）、INPUT（表单的输入元素）、MARQUEE（滚动）、SPAN（段落内的独立行元素）、TABLE（表格）、TD（表格内单元格）、TEXTAREA（表单的多行输入元素）、TFOOT（当作注脚的表格行）、TH（表格的表头）、THEAD（表格的表头行）、TR（表格的一行）等HTML标签上可以施加CSS过滤器。8.6.3CSS的静态过滤器CSS中有静态过滤器和动态过滤器两种过滤器。静态过滤器使被施加的对象产生各种静态的特殊效果。IE浏览器4.0版本支持13种静态过滤器。Alpha过滤器Blur过滤器hroma过滤器DropShadow过滤器FlipH和FlipV过滤器Glow过滤器Gray过滤器Invert过滤器Light过滤器Mask过滤器Shadow过滤器Wave过滤器Xray过滤器8.6.4CSS的动态过滤器动态过滤器也叫转换过滤器。DreamweaverCS6提供的动态过滤器可以设定产生翻换图片的效果。BlendTrans过滤器RevealTrans过滤器课堂练习—爱插画网页使用“Alpha”滤镜，改变图像的透明度。效果图课后习题—葡萄酒网页使用“CSS样式”命令，改变文字的大小和行距。效果图