层叠样式表(CS).docVIP

层叠样式表（CSS） “层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的 、 、 、 、 、 、 等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。 CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。此外，不同浏览器显示的结果可能有不同。 如何链接HTML文件与层叠样式表 它有4种方法： 在HTML文件的 区块嵌入层叠样式表的定义。 将层叠样式表定义在单独的文本文件，然后将之导入或链接至HTML文件。 在HTML文件的标签属性style中加入样式定义 在HTML文件中套用样式类别。 在HTML文件的 区块嵌入层叠样式表的定义 meta http-equiv Content-Type content text/html; charset gb2312 无标题文档 style type text/css !-- body font-family: 宋体; font-size: 14px; color: #0000FF; -- 将层叠样式表导入或链接至HTML文件 只有IE浏览器支持。先看下面导入样式表： 样式表2 !- @import url body.css ; -- 将样式表定义在独立的文本文件body.css中，然后嵌入HTML文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 其BODY.CSS文件内容： BODY font-family: 宋体; font-size 30; color:blue 再看链接样式表： 样式表3 LINK REL StyleSheet HREF body.css TYPE text/css 将样式表定义在独立的文本文件body.css中，然后链接至 HTML 文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 3．在HTML文件中套用样式类别 您也可以在样式表文件中定义不同的样式类别（Style Class），然后在HTML文件中套用不同的样式类别。 样式表4 !- P.opening font-family:宋体; font-size:30 ; color:Maroon P.content font-family:宋体; font-size:20; color:Olive P.end font-family:宋体; font-size:20; color:black .note1 color:Green .note2 color:Blue -- P CLASS opening 蝶恋花 P CLASS content 庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。 雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。 P CLASS end 宋nbsp;nbsp;欧阳修 DIV CLASS note1 注释1：章台路意指歌妓聚居之所。 注释2： SPAN CLASS note2 “冶游生春露” ,冶游、游冶即春游。 4．在HTML文件中加入样式定义 在HTML文件中加入样式定义，必须用到Style属性。举例如下： 样式表5 P STYLE font-family:宋体;font-size:30;color:Maroon 蝶恋花 P STYLE font-family:宋体;font-size:20;color:Olive 庭院深深深几许？杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。 雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。 P STYLE font-family:宋体;font-size:20;color:black 宋nbsp;nbsp;欧阳修 DIV STYLE color:Green 注释1：章台路意指歌妓聚居之所。 注释2： SPAN STYLE color:Blue “冶游生春露” ，冶游、游冶即春游。 二、如何定义层叠样式表： 我们先来简单的说说层叠样式表的结构： 样式区块：指的是 … 标记和 !-- -- 注释标记所成的区块。加上注释标记的原因是考虑到万一碰到不支持样式表的浏览器，那么样式表定义会被当成注释，而不会产生错误。 选择器（Selector）：指的是html组件，也可以理解为html里的标记，例如：P就是一个选择器，所代表的意义为段落。 声明（Declaration）：指的是HTML组件的样式，例如颜色、字体、对体方式等。例如P color:”blue” 的意义是声名段落文字为蓝色（Blue）。请注意：若设置由英文字母、数字（0~9）、