第6章 层叠样式表

第6章 层叠样式表

教学提示：XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。当有必要表示格式化XML文件中的数据时，格式化的详细信息放置在层叠样式表CSS中。

教学目标：理解层叠样式表CSS的概念，掌握层叠样式表CSS的方法，掌握CSS与XML结合的方法，学会综合运用CSS。 6.1 CSS简介 6.2 设置字体属性

6.3 设置色彩和背景图象属性 6.4 设置边界属性 6.5 CSS2新增功能 6.6 综合实例 小 结 习 题

6.1 CSS简介

在前面知识中曾经介绍过，单纯的XML文档只是为数据提供结构，但是它没有涉及数据如何显示，CSS 是用于为XML数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。

CSS最初是被开发来为HTML文档指定显示的，同时也适合于XML数据。样式表中的显示规范与XML数据分离，这意味着相同的数据通过应用不同的样式表可以以不同的方式显示。同样，相同的样式表可以应用到多个XML文件。下面，就来学习一种XML很常用的样式表：CSS样式表。 6.1.1 CSS的概念

CSS（Cascading Style Sheet）层叠样式表，也称为级联样式表，是用来进行网页风格设计的。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。它具有以下特点：

（1）在几乎所有的浏览器上都可以使用。

（2）以前一些必须通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

（3）使页面的字体变得更漂亮，更容易编排。 （4）可以轻松地控制页面的布局 。

（5）可以将许多网页的风格格式同时更新，不用再一页一页地更新。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。层叠样式表放在页面中，通过浏览器的解释执行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。甚至对一些非常老的浏览器，也不会产生页面混乱的现象。

CSS的样式规定，大到一个网站，小到一个HTML标志，使用的形式不同，则层叠样式表能规定的范围也有所不同，如果要对一个站点的一些风格进行统一规定，那么用CSS文件就必不可少了，如果想使样式表只规定某个页面的风格，那么内部文档头就能胜任这项工作，如果还想使某些HTML标志有特殊的样式规定，则要用到直接插入式。这三种存在方式就可以使整个网站在风格统一的前提下，又各有特色，富于变化，将变化与统一这个矛盾的两面有机地结合起来，这就是CSS能够实现的功能。

现在已经发表的CSS版本是CSS1和CSS2，W3C组织已经基本完成了CSS3标准的制定，但目前还未发表。当前大部分主流浏览器及其他网页制作工具都建立了对于CSS1和CSS2的支持。1998年推出的CSS2比CSS1在功能上强大了很多，扩展的属性和方法使得网页的表现手法更为丰富多彩。 6.1.2 CSS的使用

1. CSS基本语法

在XML语言中，组成文档的单元是一个个的元素，所以元素的概念对于XML来说非常重要。而在CSS中，几乎看不到XML语法的任何痕迹（当然，CSS本来就不是为XML设计）。然而，CSS也有自己的组成结构，而且也有类似XML中元素的结构单元。在这里，暂且就叫这种结构单元为CSS元素。

CSS的规则是通过属性与属性值来共同设定。属性名称是CSS的关键字，如font-family(字体)、font-size(文字大小)、display(显示属性)、color(颜色)等。属性用语指定元素某一方面的特性，而属性值则用于指定元素的特性的具体特征。

样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法： 标志{标志属性1:属性值1;标志属性2:属性值2;标志属性3:属性值3;...}

其中标志不带尖括号，如P、Div、Table等，而不是

、以及。

标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以\隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成

backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写。

下面是样式表的一个简单的例子：

P{background-color:red;font-size:12pt;color:black}

上面我们分别设置了背景色，字体大小，以及字体颜色等。为了看起来直观一些，上边的例子还可以写成: P{background-color:red； font-size:12pt； color:black}

在CSS中，有些属性可以表示多个属性的值，如字体设置，有font-family(字体)、font-size(文字大小)、font-style(字体风格)，这些可用一个font属性来表示,如: P1{font-size:16pt； font-family:'宋体'； font-style:italic}

可直接用 P1{font:20pt 宋体 italic}来表示。

本文来源：https://www.bwwdw.com/article/gkjv.html