第3章 css-层叠式样式表

《第3章 css-层叠式样式表》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章CSS－层叠式样式表XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点（数据的结构完全与数据表示无关）。当有必要表示格式化XML文件中的数据时，格式化的详细信息放置在CSS中。【教学提示】理解CSS的概念掌握CSS的方法掌握CSS与XML结合的方法【教学目标】【参见例子:对比例子first_exp.xml,second_exp.xml,second_exp.css】3.1CSS简介在前面的知识中曾经介绍过，单纯的XML文档只是为数据提供结构，但是它没有涉及数据如何显示，CSS是用于为XML数据

2、定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。CSS最初是被开发用来为HTML文档指定显示的，同时也适合于XML数据。样式表中的显示规范与XML数据分离，这意味着相同的数据通过应用不同的样式表可以不同的方式显示。同样，相同的样式表可以应用到多个XML文件中。3.1CSS简介3.1.1CSS的概念CSS(CascadingStyleSheet)层叠样式表，也称为级联样式表，用来进行网页风格设计。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修

3、改，就可以改变同一页面的不同部分，或者不同页面的网页的外观和格式。(1)在几乎所有的浏览器上都可以使用。(2)以前一些必须通过图片转换实现的功能，现在只要用CSS就可轻松实现，更快地下载页面。(3)使页面的字体变得更漂亮，更容易编排。(4)可以轻松地控制页面的布局。(5)可以将许多网页的风格、格式同时更新，不用再一页一页地更新。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。【它具有以下特点】3.1.2CSS技术简介CSS即层叠样式表或级联样式表，是目前在浏览器上按一

4、定格式显示XML文档内容的主要方法之一。CSS样式表中包含了一组设置元素显示样式的规则，最初被用来控制HTML文档内容的显示格式，同样能够用来控制XML文档内容的显示格式。XML和HTML所采用的CSS语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线等等。3.1.2CSS技术简介创建专门的样式表文件，把控制元素显示格式的相关指令放在其中，使其与XML文档的数据内容分开，可以大大提高控制XML文档显示方式

5、的灵活性，并可使得样式表本身更加容易维护。相对于XSL（可扩展样式表语言）技术而言，采用CSS技术来显示XML文档的做法还是有局限性的。3.1.2CSS技术简介CSS样式表是一个以.css为文件扩展名的纯文本文件，可以使用“记事本”等文本编辑器来建立CSS样式表文件。为了引用创建好的样式表文件来格式化显示XML文档的内容，必须将相应的样式表文件链接到这个XML文档中。只需在xml文档中增加下面的链接语句即可：3.1.2CSS技术简介3.2CSS基本语法1

6、．CSS语句的基本格式【基本格式】选择符{属性1:属性值1;属性2:属性值2…}【注释】选择符（selector）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号“{}”括起来的若干对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。花括号中的每一个属性名与相应的属性值之间须用冒号“:”分隔；而各对属性之间则须用分号“;”隔开。3.2CSS基本语法P{background-color:red;font-size:12pt;color:black}上面分别设置了背景色、字体大小以及字体颜色等。为了看

7、起来直观一些，还可以写成：P{background-color:red;font-size:12pt;color:black}下面是样式表的一个简单的例子：3.2CSS基本语法3.2CSS基本语法2、CSS中的注释样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语句由斜线加上星号“/*”作为开始，以星号加斜线“*/”作为结束，在这两个特定标记之间可以输入任何想要说明的文字。3．CSS中字母的大小写对于IE浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问题。如果想使用C

8、SS来显示XML文档，就应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。3.2CSS基本语法3.2CSS