第9章 CSS+DIV技术.ppt

第9章 CSS+DIV技术 本章目录 9.1 CSS简介 9.2 样式定义 样式定义的格式 选择符的分类 选择符的分类 选择符的分类 9.3 样式定义 嵌入样式表 链接外部样式表 引入外部的样式表 内嵌样式 CSS样式的优先级 CSS样式的优先级 9.4 Style对象 9.4 Style对象 9.4 Style对象 9.5 CSS属性 字体属性 字体属性 字体属性 文本属性 文本属性 文本属性 文本属性 文本属性 颜色和背景属性 颜色和背景属性 颜色和背景属性 颜色和背景属性 颜色和背景属性 颜色和背景属性 容器属性 容器属性 列表属性 列表属性 列表属性 列表属性 鼠标属性 鼠标属性 定位和显示 定位和显示 定位和显示 CSS滤镜 CSS滤镜 CSS滤镜 CSS滤镜 9.6 CSS+DIV美化与布局页面 div标记与span标记 div标记与span标记 div标记与span标记 div标记与span标记 div与span的区别 div与span的区别 div与span的区别 用CSS+DIV实现指定尺寸无边框无滚动条窗口 用CSS+DIV实现指定尺寸无边框无滚动条窗口 用CSS+DIV实现指定尺寸无边框无滚动条窗口 习题 下面是对颜色和背景属性的详细讲解。 （1）color设定颜色 语法： color：color-value HTML语言使用十六进制的RGB颜色值对颜色进行控制，即颜色可以通过英文名称或者十六进制来表现。如标准的红色，可以用RED作为名称来表现，也可以用#FF0000作为十六进制来表现。能够使用的预设颜色命名总共有140种，常用的有16种：Black、Olive、Teal、Red、Blue、Maroon、Navy、Gray、Lime、Fuchsia、White、Green、Purple、Silver、Yellow和Aqua。 （2）background-color设定背景颜色 语法： background-color：color-value （3）background-image设定背景图像 语法： background-image：none | url(url) none：无背景图。 url(url)：使用绝对或相对地址指定背景图像。不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置的图像名称。 页面中可以用JPG或者GIF图片作为背景图，这与向网页中插入图片不同，背景图像放在网页的最底层，文字和图片等都位于其上。 （4）background-repeat设定背景图像平铺 语法： background-repeat：repeat | repeat-x | repeat-y | no-repeat 背景图像平铺属性值如表9.8所示。 （5）background-attachment设定背景图像是否跟随页面内容滚动 语法： background-attachment：scroll | fixed scroll：背景图像跟随页面内容滚动。 fixed：背景图像固定。 （6）background- position设定背景图像位置 语法： background- position：[value] | [top| center| bottom] | [left| center| right] 背景图像位置属性可以确定背景图像的绝对位置，这是HTML标记不具备的功能。该属性只能用于块级元素和替换元素（包括img，input，textarea，select和object）。背景图像位置属性值如表9.9所示。 （7）background设定背景综合属性 语法： background：background-color ||background-image ||background-repeat ||background-attachment ||background- position 如果使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：transparent none repeat scroll 0% 0%。 CSS颜色和背景属性的应用非常广泛，弥补HTML显示属性的不足，使页面显示更加完美。 例9.2 下面的示例是颜色和背景属性的综合应用，读者会看到CSS属性美化页面的效果，程序代码如下。 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleCSS颜色和背景属性的应用/title style type=text/css !-- body{background-image:url(air.jpg); backgro