《在网页中加及动态效果.pptVIP

7 层叠样式表（CSS） 什么是CSS CSS的基本概念 CSS（Cascading Style Sheet）就是层叠样式表。是一种可以精确控制页面元素样式的技术。 CSS样式表的主要优点是提供便利的更新功能；通过使用CSS可以实现改变一个文件就可以自动更新数百个使用该样式的网页外观。 CSS有以下特点 （1）将格式和结构分离 HTML语言定义了网页的结构和各对象的功能，而层叠样式表通过将定义结构的部分和定义格式的部分分离，使我们能够对页面的布局施加更多的控制。 （2）很强的控制页面布局的能力 HTML语言对网页对象的控制很有限，如精确定位、行间距、字间距等，这些都可以通过CSS完成。 （3）同时更新许多网页，比以前更快更容易 （4）制作体积更小、下载更快的网页 CSS的类型与基本写法 CSS层叠样式表的三种类型 自定义CSS样式（也称为类样式） 类 HTML标签CSS样式 标签 高级CSS选择器样式 高级 CSS标签可以驻留在以下位置 内部（或嵌入式）CSS样式表 头部中Style……Style 内联样式CSS样式表 在标签属性内 p style=”font-size:16pt” 外部CSS样式表 *.css 类型文件 CSS的冲突 当来自不同样式中的文本属性在应用到同一段文本产生冲突时，浏览器将按照与文本关系的远近来决定到底显示哪一个属性。 在产生直接的冲突时，CSS样式具有较高的优先级。也就是说，在HTML样式与CSS样式存在矛盾时，浏览器将按照CSS样式中定义的文本属性来显示。 如图像或单元格等的大小、背景色等 建立CSS样式 建立新样式 样式位置 内部样式（本网页内） 外部样式（独立的CSS文件） 样式的类型 类：可用于任何标签 标签：对标签起作用 高级：ID、上下文选择器样式 样式定义对话框分类参数——类型 类型 “类型”类别可以定义 CSS 样式的基本字体和类型设置。 选项 字体、大小、粗细、样式、行高、修饰、颜色等 样式定义对话框分类参数——背景 背景 “背景”类别可以定义 CSS 样式的背景设置 选项 背景颜色、背景图像，重复、附件、水平位置、垂直位置 样式定义对话框分类参数——区块 区块 “区块”类别可以定义标签和属性的间距和对齐设置 选项 单词间距、字母间距、垂直对齐、文本对齐、文字缩进、空格、显示 样式定义对话框分类参数——方框 方框 “方框”类别可以为用于控制元素在页面上的放置方式的标签和属性定义设置 选项 宽和高、垂直对齐、文本对齐、文字缩进、空格、显示 样式定义对话框分类参数——边框 边框 “边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式） 选项 样式、宽度、颜色 样式定义对话框分类参数——列表 列表 “列表”类别为列表标签定义列表设置（如项目符号大小和类型） 选项 类型、项目符号图像、位置 样式定义对话框分类参数——定位 定位 “定位”类别确定与选定的 CSS 样式相关的内容在页面上的定位方式 选项 类型 绝对 使用“定位”框中输入的、相对于最近的绝对或相对定位上级元素的坐标来放置内容 相对 使用“定位”框中输入的、相对于区块在文档文本流中的位置的坐标来放置内容区块 固定 使用“定位”框中输入的坐标（相对于浏览器的左上角）来放置内容 静态 将内容放在其在文本流中的位置——这是所有可定位的 HTML 元素的默认位置 显示、Z轴、溢出、宽、高 对应层的内容 定位 指定内容块的位置和大小 样式定义对话框分类参数——扩展 扩展 “扩展”样式属性包括滤镜、分页和指针选项 选项 分页 在打印期间在样式所控制的对象之前或者之后强行分页 光标 当指针位于样式所控制的对象上时改变指针图像 过滤器 对样式所控制的对象应用特殊效果（包括模糊和反转） 扩展——光标 crosshair——十字光标 text——文本 wait——忙 default——定义 help——帮助 e-resize、w-resize——水平方向尺寸 ne-resize、sw-resize——东北方向尺寸 n-resize、s-resize——垂直方向尺寸 nw-resize、se-resize——西北方向尺寸 auto——自动 Hand——手型 inherit 扩展——过滤器（又称css滤镜） “alpha”滤镜：这个名字，在flash和photoshop经常见到。它们的作用基本类似，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。 blendtrans滤镜：它的功能也比较单一，就是产生一种精细的淡入淡出的效果。 blur滤镜：把它加载到文字上，产生风吹模糊的效果，类似立体字，这将为你在网页上制作立体字标题带来了方便。也可以