第9章样式表解析.pptVIP

9.1css基础 1. css样式表的基本概念 style样式：控制文档中某一文本区域外观的一组格式属性。 cascading ：表示向同一个元素应用多种样式的能力。 css（cascading　style　sheets）：指一个包含样式和格式规范的文本文件，它们可以精确控制 Web 页面内容的外观，而且一次可控制若干个文档的所有样式。样式属性一旦改变，应用该样式的文本也随着改变。Css可以改变的性质有：字体、字号、文字间的空间、对齐属性、列表、颜色、背景、边距、定位、特效、鼠标经过等。 为什么称样式表为层叠的呢？ 打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质。即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，大家会发现层叠的具体含义及一些妙用的。 2.css的5个优点： A、通用兼容。防止文字大小因浏览器的设置而改变，影响页面布局。 B、便于对网页整体风格进行控制。 C、网页提速。格式和内容分开，提高网页内容和格式的设置速度。页面内容位于自身的文档中，而定义该内容表现形式的css规则可以位于自身文档的head标签之内（即内部的css规则），也可以位于另一个文件中（即外部的css规则）。 D、方便美化页面。更好的控制页面外观，由精确的布局定位到特定的字体和文本样式。能为页面提供更多的效果，也许这些效果仅使用html根本无法控制。 E、便于批量更新。当css的样式被更新或被修改后，所有应 用了该样式的文档都会被自动更新。 大型网站（163、263、sohu等）的内容和各种网页文本较繁多，通过使用css就可以快速准确地对整个站点或多数页面的字体和格式进行定义和更改。 3. css面板 打开css面板的3种方法： 通过窗口－css样式 shift+f11 单击属性检查器中的“css”按钮 两种模式介绍 当前模式：显示当前文档中所选内容的css属性 所有模式：显示当前文档中定义的规则和附加到当前文档的样式表中定义的所有规则的列表。 下部的各个按钮简介。 css面板的功能： 在CSS样式面板中可以查看与当前文档相关联的样式定义以及样式的层次结构。 可以使用CSS样式面板附加外部CSS样式表，创建、编辑和删除CSS样式。 注意：由于css可以直观的管理css。adobe建议用css面板作为创建和编辑css的主要工具。用户可以自己创建层叠样式表，还可以dw附带的层叠样式表 （3）对于高级样式（也称ID、伪类选择器） 当为ID选择器（也称标识选择符）时，是指为某个标签组合或所有包含特定ID属性的标签定义格式。给这类选择器取名字时必须以#号开头，标识它是一个ID选择器类型，每个该类的样式只能在同一个网页中应用一次； 当选中伪类选择器时，可以在“选择器”下拉列表中选择需要的伪类选择器。dw系统提供的伪类选择器包括 a:active、a:hover、 a:link 和 a:visited四种； a:link 设定正常（默认）状态下链接文字的样式。 a:active? 设定鼠标单击时链接文字(选中超链接)的外观。 a:visited? 设定访问过的链接的外观。 a:hover? 设定鼠标移至链接文字之上时文字的外观。 例如下面的超级链接效果： 2、背景样式的设置 在“背景”属性中可以设置背景颜色，背景图像，重复（默认设置），水平位置，垂直位置，附件（背景图像是在原始位置还是随内容一起滚动）等属性。 一般对BODY（页面）、 TABLE（表格）、 DIV（区域）的设置。 在HTML中，背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS之后，有了更加灵活的设置。 在CSS规则定义”对话框左侧选择“背景”项，可以在右边区域设置CSS样式的背景格式。  实例链接 6、列表样式设置：?CSS中有关列表的设置丰富了列表的外观，可以为项目符号指定自定义图像。在“CSS规则定义”对话框左侧选择“列表”项，可以在右边区域设置列表的类型、项目符号图像、位置等格式。 外部:设置列表项文本是否换行和缩进。 内部:设置文本是否换行到左边距。 实例链接 7、定位样式设置 ??? “定位”项实际上是对层的设置，在“定位”属性中可以设置类型、宽、高、显示、Z轴、溢位、置入、裁切等。但是因为DW提供了可视化的层制作功能，所以此项设置在实际操作中几乎不会使用。 8、扩展样式的设置 ??? CSS样式还可以实现一些扩展功能，这些功能集中在扩展面板上。这个面板主要包括3种效果：分页、光标和过滤器。在CSS规则定义”对话框左侧选择“扩展”项，可以在右边区域设置CSS