chap03 css样式表

《chap03 css样式表》由会员分享，可在线阅读，更多相关《chap03 css样式表（19页珍藏版）》请在金锄头文库上搜索。

1、第3章 CSS样式表 上一章介绍了 AJAX 技术的实现语言JavaScript，这一章介绍实现 AJAX 的另外一种关键技术，它就是 CSS 样式表。为了能够正确地浏览 AJAX 应用，CSS 是一种 AJAX 程序员所需要掌握的重要技术。 CSS 提供的从内容中分离应用样式和设计的机制， 以及它可以用最少的代码动态地为元素设置预定义的外观，使得它在 AJAX 应用中有着至关重要的作用。下面就介绍一些有关 CSS 的知识。 3.1 概述概述 CSS 是 Cascading Stytle Sheet 的简称，翻译成中文就是层叠样式表，简称样式表。它是一种用户增强控制页面样式并允许将样式信息与页

2、面内容分离的标记性语言。 它可以很容易地控制页面中的 HTML 元素的背景与颜色、元素框的样式、定位、文字字体等属性的设置。 3.1.1 CSS 的发展历程 在上世纪 90 年代初，当 HTML 被发明用于表示页面文档的时候，CSS 就出现了。当时CSS 的表示形式并不统一，不同的浏览器结合了它们各自的样式语言。而且最初的 CSS 不是提供给程序员来使用的， 而是提供给读者的， 读者可以使用样式语言来调节网页的显示方式。 最初的 HTML 版本只含有很少的显示属性，但随着 HTML 的成长，为了满足程序员的设计需求，HTML 提供了很多显示功能。随着这些功能的增加外来定义样式的语言越来越显得没

3、有意义了。 但是 CSS 也有自己的发展优势。CSS 是第一个提出“层叠”的思想的，在 CSS 中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。 基于这个优势 CSS 才没有被扔进历史的垃圾箱中。以下几年发生的事情推动了 CSS 的发展。 1994 年哈坤利和伯特波斯决定一起合作设计 CSS。 1994 年哈坤在芝加哥的一次会议上第一次展示了 CSS 的建议。 1995 年哈坤与波斯一起再次展示这个建议。此时刚刚成立的 W3C 对 CSS 的发展

4、很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。 1996 年底，CSS 已经完成。 1996 年 12 月 CSS1.0 出版发行。 1997 年初，W3C 内组织了专门管 CSS 的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题。 1998 年 5 月 CSS2.0 出版发行。 2003 年 CSS3.0 出版发行。 目前，尽管 CSS 已经发展到了 3.0 版本，还没有一个浏览器能够支持它，而基本上所有的浏览器都支持 2.0 版本的 CSS 协议规则。 3.1.2 CSS 的作用 W3C 把 DHTM

5、L 分为三个部分来实现：脚本语言(包括 JavaScript、Vbscript 等)、支持动态效果的浏览器(包括 Internet Explorer、Netscape Navigator 等)和 CSS 样式表。程序员可以用 CSS 精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。使用 CSS 能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 CSS 的作用可以概括为以下几点： 内容与表现分离。 表现的统一，可以使网页的表现非常统一，并且容易修改。 减少重复的代码的编写。 增加网页的浏览速度。 减少硬盘容

6、量。 3.1.3 CSS 的种类 CSS 按其在 HTML 文档中的位置可以分为三种： (1) 内嵌样式表 内嵌样式表的 CSS 是写在 HTML 标签里面的，只对当前的标签起作用。例如： 以上代码中 style 就是样式表的定义，表示表格一列的宽度为 84px。 (2) 内部样式表 内部样式表是写在 HTML 的和里面， 由和标记， 内部样式表只对所在的网页有效。例如： 这段代码是一个完整的 HTML 文件，在标记和之间的和标记内定义了样式表，该样式表定义了树展开和收起的样式。 树状菜单的简单实现 根结点 子结点 1 子结点 2 子结点 3 子结点 4 (3) 外部样式表 为了能够让很多页面

7、共享同样的样式表，可以把样式表的定义写在一个扩展名为.css 的文件里，然后在每个需要使用该样式表的页面添加对该样式表文件的引用。例如： 这段代码是一个 HTML 文档的片段，在其中引用了 Style.css 样式表文件。 客户资料 客户资料管理 . 3.2 CSS 的语法的语法 CSS 也是一种语言，也有着自己语法结构，下面就简要介绍一下 CSS 的语法。 3.2.1 CSS 的基本构成 最基本的 CSS 是由三个部分构成： 选择符(selector)、 属性(properties)和属性的取值(value),格式如下： 选择符属性：值，即：selectorproperty: value 一

8、般情况下，选择符是要为之定义样式的 HTML 标记，例如 BODY、P、TABLE，可以通过此方法定义相应标记的属性和值，属性和值之间用冒号隔开，例如： body color: black 以上代码中，选择符 body 是指页面主体部分，color 是控制文字颜色的属性，black 是颜色的值，该代码的效果是使页面中的文字为黑色。 如果属性的值是多个单词组成， 必须在值上加引号， 例如字体的名称经常是几个单词的组合，示例代码如下： p font-family: “sans serif“ 以上代码定义段落的字体为 sans serif。 如果需要对一个选择符指定多个属性时，则要使用分号将所有的属

9、性和值分开，例如： p text-align: center; color: red 以上代码表示段落居中排列，并且段落中的文字为红色。 当然为了使定义的样式表方便阅读，也可以采用分行的书写格式，例如： p text-align: center; color: black; font-family: arial 以上代码表示段落排列居中，段落中文字为黑色，字体是 arial。 还可以把具有相同属性和值的选择符组合起来书写， 用逗号将选择符分开， 这样可以减少样式重复定义，例如： h1, h2, h3, h4, h5, h6 color: green 以上代码的含义是每个标题元素的文字都为绿色，

10、 它和分开定义每个标题元素的字体为绿色的效果一样，显然这样写节省代码。 其实选择符并不一定是 HTML 标记，选择符的的种类有其它几种，现列举如下： (1) 类选择符 用类选择符能够把相同的元素分类定义不同的样式， 定义类选择符时， 在类的名称前面加一个点号，点号前加上相应的 HTML 标记。 例如：想要两个不同的段落，一个段落向右对齐，一个段落居中，可以先定义两个类： p.right text-align: right p.center text-align: center 然后用不在不同的段落里，只要在 HTML 标记里加入上面定义的 class 参数即可，代码如下： 这个段落向右对齐的

11、这个段落是居中排列的 类的名称可以是任意英文单词或以英文开头与数字的组合， 但类的命名最好能够说明类功能。 此外，在定义类选择符时，可以省略 HTML 标记，这样可以把几个不同的元素定义成相同的样式，例如： .center text-align: center 以上代码定义的类 center 表示文字居中。 这样的类可以被应用到任何元素上。 而且这种用法在 CSS 程序中比较常见。 (2) ID 选择符 在 HTML 文档中 ID 参数指定了某个单一元素，ID 选择符是用来对这个单一元素定义单独的样式。 定义 ID 选择符要在 ID 名称前加上一个“#”号。和类选择符相同，定义 ID 选择符的

12、属性也有两种方法。 可以采用形如下面代码的样式来定义 ID 选择符： 这段代码定义的 ID 属性将匹配所有 id=“intro“的元素。 #intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent 也可以采用如下面代码的样式来定义 ID 选择符： 这段代码定义的 ID 属性只匹配 id=“intro“的段落元素。 p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent I

13、D 选择符的应用和类选择符类似，只要把 CLASS 换成 ID 即可。例如： 但是 ID 选择符局限性很大， 只能单独定义某个元素的样式， 一般只在特殊情况下使用。 (3) 包含选择符 包含选择符是可以单独对某种元素包含关系(元素 1 里包含元素 2)定义的样式表，这种方式只对在元素 1 里的元素 2 定义，对单独的元素 1 或元素 2 无定义，例如： table a font-size: 12px 以上代码的含义是在表格内的链接改变了样式，文字大小为 12 象素，而表格外的链接的文字则不接受该样式的定义。 在 CSS 程序中也可以加入注释文字，注释的文字被包含在“/*”和“*/”之间，例如：

14、 /*定义表格内链接的样式*/ table a font-size: 12px 3.2.2 样式表的层叠性 在前面讲过层叠性是样式表的一大特性。 所谓层叠性就是就是继承性， 样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。 事实上， 所有在元素中嵌套的元素都会继承外层元素指定的属性值， 有时会把很多层嵌套的样式叠加在一起， 除非另外更改。 例如：在 DIV 标记中嵌套 P 标记，代码如下： div color: red; font-size:9pt 这个段落的文字为红色 9 号字 以上代码定义的样式表会使 P 元素里的内容会继承 DIV 定义的属性。 有些情况下内部选

15、择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档 BODY 一样的上边界值。 当样式表继承遇到冲突时，总是以最后定义的样式为准。 不同的选择符定义相同的元素时， 要考虑到不同的选择符之间的优先级， 三种主要选择符优先顺序是：ID 选择符、类选择符和 HTML 标记选择符。这是因为 ID 选择符是最后加上元素上的，所以优先级最高，其次是类选择符。 如果想超越这三者之间的关系，可以用!important 提升样式表的优先权，例如： p color: #FF0000!important .blue color: #0000FF #id1 c

16、olor: #FFFF00 如果同时对页面中的一个段落加上这三种样式，它最后会依照被!important 申明的HTML 标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的 ID 选择符为黄色文字。 3.2.3 伪类 在 CSS 中，伪类是一个比较重要的概念，很多特效可以利用伪类来实现。伪类可以看做是一种特殊的类选择符，是能被支持 CSS 的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 伪类的定义格式如下： 选择符:伪类 属性: 值，即：selector:pseudo-class property: value 伪类和类不同，是 CSS 已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式。 最常用的是 4 种 a(链接)元素的伪类，它表示动态链接在 4 种不同的状态：link(未访问的链