第8章级联样式表资料.ppt

;CSS就是一种叫做样式表（style sheet）的技术，也有人称之为层叠样式表（Cascading Style Sheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变整个页面的风格。 ;CSS样式表的特点如下: 将显示格式和文档结构分离 对HTML语言处理样式的最好补充 体积更小加快网页下载速度 实现动态更新、减少工作量 支持CSS的浏览器增多;;定义CSS的语句形式如下： ? selector {property:value;property:value;…} ? SELECTOR：选择符。 当多个对象具有相同的样式定义时，多个对象之间可以用逗号分隔;在CSS样式中有3种选择符分别是 HTML选择符 Class选择符 ID选择符 ;HTML选择符 HTML选择符就是HTML的标记符，例如P、BODY、A等。如果用CSS定义了他们，那么在整个网页中，该标识的属性都应用定义中的设置。HTML选择符的定义方法如下： ? tag{property:value} ;Class选择符 Class选择符可以分为两种，一种是相关的class selector，它只与一种HTML标记有关系。它的语法格式如下： ? Tag.Classname{property:value} 第二种是独立Class选择符，它可以被任何HTML标记所应用。 它的语法格式如下： ? .Classname{property:value} ;ID选择符 ID选择符其实与独立的Class选择符的功能一样，而他们的区别在于语法和用法不同。它的语法格式如下： ? #IDname{property:value} ? ID选择符的用法是在HTML标记中应用ID属性引用CSS样式;;用style标记将样式表嵌入在HTML文件的头部。style标记的属性type指明样式的类别，除了CSS样式表外，还有Netscape浏览器使用的JSS（JavaScript Style Sheets，Java脚本样式表）样式表，其样式类别为text/javascript；type的默认值为text/css。style标记内定义的前后加上注释符!--……--的作用是使不支持CSS的浏览器忽略样式表的定义。嵌入样式表的作用范围是在本HTML文件内。 ;如果多个HTML文件要共享样式表，可以将样式表定义为一个独立的CSS样式文件。HTML文件在头部用link标记链接到CSS样式文件。;这种方式是在HTML文件的头部style/style标记之间，用CSS样式表的＠import声明引入外部样式表。 格式为： ? style @import URL(外部样式文件名); … /style ? ;这种方式是在HTML标记中，将定义的样式规则作为标记style属性的属性值。样式定义的作用范围仅限于此标记范围之内。一个内嵌样式的应用如下： ? body style=font-family:宋体;font-size:12pt;background:yellow ? 要在一个HTML文件中使用内联样式，必须在该文件的头部对整个文件进行单独的样式表语言声明，声明如下： ? meta http-equiv=Content-Type content=text/css ;样式表的作用优先顺序遵循以下原则： 内联样式中所定义样式的优先级最高。 其他样式按其在HTML文件中出现或者被引用的顺序，遵循就近原则，靠近文本越近的优先级越高。 选择符的作用优先顺序为：上下文选择符、类选择符、ID选择符，优先级依次降低。 未在任何文件中定义的样式，将遵循浏览器的默认样式。;;内嵌样式是使用style标签属性直接为单个HTML元素应用的样式表(CSS)指派。而使用 style对象可以检查这些指派，并进行新的指派或更改已有的指派。要使用style对象，应该在元素对象上使用style关键字。要获得内嵌样式的当前设置，应该在style对象上使用对应的style对象的属性。 ;1．检索样式表中的属性值 在Netscape 6.0以后的版本中，使用Style对象检索属性值。 语法： ? document.getElementById(对象名称).style.属性 ? 在IE浏览器中，使用Style对象检索属性值。 语法： ? document.all(对象名称).style.属性;2．样式标签属性和样式属性;behavior;color;margin;tableLayout;3．颜色和背景属性 （1）BackgroundColor属性 BackgroundColor属性用于设置或检索对象的背景颜色。其对应的样式标签属性为background-co