DreamweaverCS3中文版实例教程 08 CSS样式

《DreamweaverCS3中文版实例教程 08 CSS样式》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第8章CSS样式本章简介：层叠样式表（CSS）是W3C组织新近批准的一个辅助HTML设计的新特性，能保持整个HTML的统一外观。网页样式表的功能强大、操作灵活，用CSS改变一个文件就可以改变数百个文件的外观，而且个性化的表现更能吸引访问者。课堂学习目标CSS样式的概念CSS样式样式的类型与创建编辑样式CSS的属性过滤器8.1CSS样式的概念CSS是CascadingStyleSheet的缩写，一般译为“层叠样式表”或“级联样式表”。层叠样式表是对HTML3.2之前版本语法的变革，将某些HTML标签属性简化。层叠样式表是HTML的一部分，它将对象引入到HTML中，可以通过脚本程

2、序调用和改变对象的属性，从而产生动态效果。8.2CSS样式“CSS样式”控制面板CSS样式的类型8.2.1“CSS样式”控制面板使用“CSS样式”控制面板可以创建、编辑和删除CSS样式，并且可以将外部样式表附加到文档中。打开“CSS样式”控制面板样式表的功能8.2.2“CSS样式”控制面板层叠样式表是一系列格式规则，它们控制网页各元素的定位和外观，实现HTML无法实现的效果。在DeamweaverCS3中可以运用的样式分为重定义HTML标签样式、自定义样式、使用CSS选择器3类。重定义HTML标签样式CSS选择器样式自定义样式8.3样式的类型与创建创建重定义HTML标签样式创

3、建CSS选择器创建和应用自定义样式创建和引用外部样式8.3.1创建重定义HTML标签样式当重新定义某HTML标签默认格式后，网页中的该HTML标签元素都会自动变化。因此，当需要修改网页中某HTML标签的所有样式时，只需重新定义该HTML标签样式即可。启用新建CSS规则对话框重新定义HTML标签样式8.3.2创建CSS选择器若要为具体某个标签组合或所有包含特定Id属性的标签定义格式，只需创建CSS选择器而无需应用。一般情况下，利用创建CSS选择器的方式设置链接文本的4种状态，它们分别为鼠标指针点击时的状态“a:active”、鼠标指针经过时的状态“a:hover”、未点击时的状

4、态“a:link”和已访问过的状态“a:visited”。重定义链接文本的状态某个特定的网页对象定义样式8.3.3创建和应用自定义样式若要为不同网页元素设定相同的格式，可先创建一个自定义样式，然后将它应用到文档的网页元素上。创建自定义样式应用样式8.3.4创建和引用外部样式如果不同网页的不同网页元素需要同一样式时，可通过引用外部样式来实现。首先创建一个外部样式，然后在不同网页的不同HTML元素中引用定义好的外部样式。创建外部样式引用外部样式8.4编辑样式网站设计者有时需要修改应用于文档的内部样式和外部样式，如果修改内部样式，则会自动重新设置受它控制的所有HTML对象的格式；如

5、果修改外部样式文件，则自动重新设置与它链接的所有HTML文档。8.5CSS的属性课堂案例——时尚彩妆网类型背景区块方框边框列表定位扩展8.5.1课堂案例——时尚彩妆网使用“表格”按钮插入表格效果。使用“CSS样式”设置翻转效果的链接。效果图8.5.2类型“类型”分类主要是定义网页中文字的字体、字号、颜色等。“类型”选项面板8.5.3背景“背景”分类用于在网页元素后加入背景图像或背景颜色。“背景”选项面板8.5.4区块“区块”分类用于控制网页中块元素的间距、对齐方式和文字缩进等属性。块元素可以是文本、图像和层等。“区块”选项面板8.5.5方框“方框”分类用于控制网页中块元素的内

6、容距区块边框的距离、区块的大小、区块间的间隔等。块元素可为文本、图像和层等。“方框”选项面板8.5.6边框“边框”分类主要针对块元素的边框。“边框”选项面板8.5.7列表“列表”分类用于设置项目符号或编号的外观。“列表”选项面板8.5.8定位“定位”分类用于精确控制网页元素的位置，主要针对层的位置进行控制。“定位”选项面板8.5.9扩展“扩展”分类主要用于控制鼠标指针形状、控制打印时的分页以及为网页元素添加滤镜效果。“扩展”选项面板8.6过滤器课堂案例——办公用品网页可应用过滤的HTML标签CSS的静态过滤器CSS的动态过滤器8.6.1课堂案例——办公用品网页使用“Alpha

7、滤镜”制作图片半透明效果。效果图8.6.2可应用过滤的HTML标签CSS过滤器不仅可以施加在图像上，而且可以施加在文字、表格和图层等网页元素上；但并不是所有的HTML标签都可以施加CSS过滤器，只有BODY（网页主体）、BUTTON（按钮）、DIV（层）、IMG（图像）、INPUT（表单的输入元素）、MARQUEE（滚动）、SPAN（段落内的独立行元素）、TABLE（表格）、TD（表格内单元格）、TEXTAREA（表单的多行输入元素）、TFOOT（当作注脚的表格行）、TH（表格的表头）、THEAD（表格