第3章 CSS－层叠式样式表.pptxVIP

第3章 CSS－层叠式样式表; XML 为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何 显示的信息，这实际上是XML 的优点（数据的结构完全及数据表示无关）。当有必要表示格式化XML 文件中的数据时，格式化的详细信息放置在CSS 中。; 理解CSS 的概念 掌握CSS 的方法 掌握CSS 及XML 结合的方法;3.1 CSS 简介; CSS 最初是被开发用来为HTML 文档指定显示的，同时也适合于XML 数据。样式表中的显示规范及XML 数据分离，这意味着相同的数据通过应用不同的样式表可以不同的方式显示。同样，相同的样式表可以应用到多个XML 文件中。;3.1.1 CSS 的概念;(1) 在几乎所有的浏览器上都可以使用。 (2) 以前一些必须通过图片转换实现的功能，现在只要用CSS 就可轻松实现，更快地下载页面。 (3) 使页面的字体变得更漂亮，更容易编排。 (4) 可以轻松地控制页面的布局。 (5) 可以将许多网页的风格、格式同时更新，不用再一页一页地更新。可以将站点上所有的网页风格都使用一个CSS 文件进行控制，只要修改这个CSS 文件中相应的行，那么整个站点的所有页面都会随之发生变动。;3.1.2 CSS技术简介;XML和HTML所采用的CSS语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线等等。; ; CSS样式表是一个以.css为文件扩展名的纯文本文件，可以使用“记事本”等文本编辑器来建立CSS样式表文件。 为了引用创建好的样式表文件来格式化显示XML文档的内容，必须将相应的样式表文件链接到这个XML文档中。只需在xml文档中增加下面的链接语句即可： ?xml:stylesheet type=text/css href= css1.css?;3.2 CSS基本语法;【注释】 选择符（selector）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成； 紧跟其后的是用花括号“{ }”括起来的若干对属性名及相应的属性值，用来对选择符所指定的元素设置具体的显示样式。 花括号中的每一个属性名与相应的属性值之间须用冒号“ :”分隔；而各对属性之间则须用分号“;”隔开。;P{background-color:red;font-size:12pt;color:black} ;3.2 CSS基本语法;3．CSS中字母的大小写 对于IE 浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问题。如果想使用CSS来显示XML文档，就应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。;3.2 CSS基本语法;注：不能使用中文作为元素名称。;1、CSS的链接－使用一般链接指令 一般可以在XML文档的开头使用xml:stylesheet处理指令将指定的CSS样式表链接进来。 【格式】 ?xml:stylesheet type=text/css href= url ? 【注释】 ?xml:stylesheet 表示当前XML文档在显示时需要使用样式单并告诉IE不使用默认的树状结构。 type=“text/css”表示使用CSS类型的样式单； href= url 用来指定样式单文件的URL。;3.3 CSS选择符及链接;3、使用CLASS属性 要求同一个标记在文档的不同地方使用不同样式，使用class属性时要用到”.” 【参见例子:book02.xml;css_book02.css】 如果XML文档中有一个标记没有定义样式，则该标记将使用父标记的样式，即继承;3.3 CSS选择符及链接;3.3 CSS选择符及链接;【注释】 StyleSheetURL 表示想要引入的样式表文件的URL，可以是本地或网络上样式表文件的绝对路径或相对路径。 本指令必须放置在CSS样式表的开头，且尾部的分号“ ；”不能少，URL后面采用（）。 【参见例子:book04.xml;css_book04.css】;3.3 CSS选择符及链接;7、使用STYLE 属性 使用HTML的style标记直接将样式语句写在XML文档内部 HTML:style /HTML:style 由于使用HTML标记来实现XML的嵌套样式，所以必须指定所用style标记的出处： xmlns:HTML=“ /profiles/XHTML-transitional” （xmlns是指名域空间技术）;3.3 CSS选择符及链接;3.4 将C