第3章层叠式样式表精选文档.ppt
《第3章层叠式样式表精选文档.ppt》由会员分享,可在线阅读,更多相关《第3章层叠式样式表精选文档.ppt(44页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第3章层叠式样式表章层叠式样式表本讲稿第一页,共四十四页 XML XML 为存储结构化数据提供了强大的方法,为存储结构化数据提供了强大的方法,但是它没有提供关于数据如何但是它没有提供关于数据如何显示的信息,这实际上是显示的信息,这实际上是XML XML 的优点(数据的优点(数据的结构完全与数据表示无关)。当有必要表的结构完全与数据表示无关)。当有必要表示格式化示格式化XML XML 文件中的数据时,格式化的详文件中的数据时,格式化的详细信息放置在细信息放置在CSS CSS 中。中。【教学提示教学提示】本讲稿第二页,共四十四页 理解理解CSS 的概念的概念 掌握掌握CSS 的方法的方法 掌握掌
2、握CSS 与与XML 结合的方法结合的方法【教学目标教学目标】【参见例子参见例子:对比例子对比例子first_exp.xml,second_exp.xml,second_exp.css】本讲稿第三页,共四十四页3.1 CSS 简介简介 在前面的知识中曾经介绍过,单纯的在前面的知识中曾经介绍过,单纯的XML XML 文档文档只是为数据提供结构,但是它没有涉及数据如何显示,只是为数据提供结构,但是它没有涉及数据如何显示,CSS CSS 是用于为是用于为XML XML 数据定义显示参数的一种技术,它利数据定义显示参数的一种技术,它利用简单的规则来控制元素内容在浏览器中的表现方式。用简单的规则来控制元
3、素内容在浏览器中的表现方式。本讲稿第四页,共四十四页 CSS CSS 最初是被开发用来为最初是被开发用来为HTML HTML 文档指定显示的,文档指定显示的,同时也适合于同时也适合于XML XML 数据。样式表中的显示规范与数据。样式表中的显示规范与XML XML 数据分离,这意味着相同的数据通过应用不同的样式数据分离,这意味着相同的数据通过应用不同的样式表可以不同的方式显示。同样,相同的样式表可以应表可以不同的方式显示。同样,相同的样式表可以应用到多个用到多个XML XML 文件中。文件中。3.1 CSS 简介简介本讲稿第五页,共四十四页3.1.1 CSS 3.1.1 CSS 的概念的概念
4、CSS(Cascading Style Sheet)CSS(Cascading Style Sheet)层叠样式表层叠样式表,也称为也称为级联样式表级联样式表,用来进行网页风格设计。,用来进行网页风格设计。在网页制作时采用在网页制作时采用CSS CSS 技术,可以有效地对技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,简单的修改,就可以改变同一页面的不同部分,或者不同页面的网页的外观和格式。或者不同页面的网页的外观和格式。本
5、讲稿第六页,共四十四页3.1.2 CSS3.1.2 CSS技术简介技术简介CSSCSS即层叠样式表或级联样式表,是目即层叠样式表或级联样式表,是目前在浏览器上按一定格式显示前在浏览器上按一定格式显示XMLXML文档文档内容的主要方法之一。内容的主要方法之一。CSSCSS样式表中包含了一组设置元素显示样样式表中包含了一组设置元素显示样式的规则,最初被用来控制式的规则,最初被用来控制HTMLHTML文档内文档内容的显示格式,同样能够用来控制容的显示格式,同样能够用来控制XMLXML文档内容的显示格式。文档内容的显示格式。本讲稿第八页,共四十四页XMLXML和和HTMLHTML所采用的所采用的CSS
6、CSS语法是相通的,语法是相通的,都是通过一组特定的属性设置来规定都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的某个元素内容的显示格式。可设置的元素显示属性包括:文字的字型、字元素显示属性包括:文字的字型、字体、大小和颜色,元素内容在页面中体、大小和颜色,元素内容在页面中的位置、是否分段、对齐方式,是否的位置、是否分段、对齐方式,是否添加边框、背景、下划线等等。添加边框、背景、下划线等等。3.1.2 CSS3.1.2 CSS技术简介技术简介本讲稿第九页,共四十四页n 创建专门的样式表文件,把控制元素显创建专门的样式表文件,把控制元素显示格式的相关指令放在其中,使其与示格式的相
7、关指令放在其中,使其与XMLXML文文档的数据内容分开,可以大大提高控制档的数据内容分开,可以大大提高控制XMLXML文档文档显示方式的灵活性,并可使得样式表本身更加显示方式的灵活性,并可使得样式表本身更加容易维护。容易维护。n 相对于相对于XSLXSL(可扩展样式表语言)技术而言,(可扩展样式表语言)技术而言,采用采用CSSCSS技术来显示技术来显示XMLXML文档的做法还是有局文档的做法还是有局限性的。限性的。3.1.2 CSS3.1.2 CSS技术简介技术简介本讲稿第十页,共四十四页n CSS CSS样式表是一个以样式表是一个以.css.css为文件扩展名的为文件扩展名的纯纯文本文件文本
8、文件,可以使用,可以使用“记事本记事本”等文本编辑等文本编辑器来建立器来建立CSSCSS样式表文件。样式表文件。n 为了引用创建好的样式表文件来格式化显为了引用创建好的样式表文件来格式化显示示XMLXML文档的内容,必须将相应的样式表文文档的内容,必须将相应的样式表文件链接到这个件链接到这个XMLXML文档中。只需在文档中。只需在xmlxml文档中文档中增加下面的链接语句即可:增加下面的链接语句即可:?xml:stylesheet?3.1.2 CSS3.1.2 CSS技术简介技术简介本讲稿第十一页,共四十四页3.2 CSS3.2 CSS基本语法基本语法1 1CSSCSS语句的基本格式语句的基本
9、格式【基本格式基本格式】选择符选择符 属性属性1:1:属性值属性值1;1;属性属性2:2:属性属性值值2 2 本讲稿第十二页,共四十四页【注释注释】选择符(选择符(selector)用来指定该规则所适用的元素,)用来指定该规则所适用的元素,由一个或多个由一个或多个元素名元素名或特定的或特定的标识标识构成;构成;紧跟其后的是用花括号紧跟其后的是用花括号“”括起来的若干对属性名括起来的若干对属性名与相应的属性值,用来对选择符所指定的元素设置具与相应的属性值,用来对选择符所指定的元素设置具体的显示样式。体的显示样式。花括号中的每一个属性名与相应的属性值之间须用冒花括号中的每一个属性名与相应的属性值之
10、间须用冒号号“:”分隔;而各对属性之间则须用分号分隔;而各对属性之间则须用分号“;”隔开。隔开。3.2 CSS3.2 CSS基本语法基本语法本讲稿第十三页,共四十四页Pbackground-color:red;font-size:12pt;color:black Pbackground-color:red;font-size:12pt;color:black 上面分别设置了背景色、字体大小以及字体颜色等。上面分别设置了背景色、字体大小以及字体颜色等。为了看起来直观一些,还可以写成:为了看起来直观一些,还可以写成:P background-color:red;P background-color
11、:red;font-size:12pt;font-size:12pt;color:black color:black 下面是样式表的一个简单的例子:下面是样式表的一个简单的例子:3.2 CSS3.2 CSS基本语法基本语法本讲稿第十四页,共四十四页3.2 CSS3.2 CSS基本语法基本语法2 2、CSSCSS中的注释中的注释 样式表文件也可以包含注释语句,添加注释文样式表文件也可以包含注释语句,添加注释文字有助于样式表更具可读性。注释语句由斜线加字有助于样式表更具可读性。注释语句由斜线加上星号上星号“/*/*”作为开始,以星号加斜线作为开始,以星号加斜线“*/”作作为结束,在这两个特定标记之
12、间可以输入任何想为结束,在这两个特定标记之间可以输入任何想要说明的文字。要说明的文字。本讲稿第十五页,共四十四页3 3CSSCSS中字母的大小写中字母的大小写 对于对于IE IE 浏览器而言,浏览器而言,CSSCSS中字母的大小写中字母的大小写是不加区分的是不加区分的。但当。但当CSSCSS应用于应用于XMLXML文档时,文档时,忽略字母的大小写将会带来一定的问题。如果忽略字母的大小写将会带来一定的问题。如果想使用想使用CSSCSS来显示来显示XMLXML文档,文档,就应该让文档中各就应该让文档中各种元素的名称都完全不同种元素的名称都完全不同,而不仅仅是字母大,而不仅仅是字母大小写的不同。小写
13、的不同。3.2 CSS3.2 CSS基本语法基本语法本讲稿第十六页,共四十四页3.2 CSS3.2 CSS基本语法基本语法4 4、CSSCSS中属性的继承中属性的继承 通常情况下,通常情况下,在在CSSCSS中为某个元素所设置的中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子显示格式属性会影响到该元素所包含的所有子元素,除非这些子元素重新设置了不同的格式元素,除非这些子元素重新设置了不同的格式属性。属性。本讲稿第十七页,共四十四页注:注:不能使用中文作为元素名称。不能使用中文作为元素名称。5 5在在CSSCSS使用中文使用中文 如果要在如果要在CSSCSS中使用中文简体字符集,需中
14、使用中文简体字符集,需要在要在CSSCSS文件的文件的第一行第一行加上如下指令:加上如下指令:charset gb2312;charset gb2312;3.2 CSS3.2 CSS基本语法基本语法本讲稿第十八页,共四十四页1 1、CSSCSS的链接使用一般链接指令的链接使用一般链接指令 一般可以在一般可以在XMLXML文档的开头使用文档的开头使用xml:stylesheetxml:stylesheet处理指处理指令将指定的令将指定的CSSCSS样式表链接进来。样式表链接进来。【格式格式】【注释注释】?xml:stylesheet?xml:stylesheet表示当前表示当前XMLXML文档在
15、显示时需要使文档在显示时需要使用样式单并告诉用样式单并告诉IEIE不使用默认的树状结构。不使用默认的树状结构。type=type=“text/csstext/css”表示使用表示使用CSSCSS类型的样式单;类型的样式单;href=urlhref=url用来指定样式单文件的用来指定样式单文件的URLURL。3.3 CSS3.3 CSS选择符与链接选择符与链接【参见例子参见例子:book.xml,:book.xml,cssforbook.csscssforbook.css】本讲稿第十九页,共四十四页3.3 CSS3.3 CSS选择符与链接选择符与链接选择符可以是选择符可以是*或者元素名或者元素名
16、2 2使用多个元素与多个规则使用多个元素与多个规则 如果想把一组属性应用于多个元素,即对同一标如果想把一组属性应用于多个元素,即对同一标记指定特定样式,可以用记指定特定样式,可以用逗号逗号将选择符中所有元素将选择符中所有元素分开,然后再定义属性的具体值。分开,然后再定义属性的具体值。【参见例子参见例子:book01.xml;css_book01.css:book01.xml;css_book01.css】本讲稿第二十页,共四十四页3 3、使用、使用CLASSCLASS属性属性 要求同一个标记在文档的不同地方使用不同样式,要求同一个标记在文档的不同地方使用不同样式,使用使用classclass属
17、性时要用到属性时要用到”.”【参见例子参见例子:book02.xml;css_book02.css:book02.xml;css_book02.css】如果如果XMLXML文档中有一个标记没有定义样式,则文档中有一个标记没有定义样式,则该标记将使用父标记的样式,即该标记将使用父标记的样式,即继承继承3.3 CSS3.3 CSS选择符与链接选择符与链接本讲稿第二十一页,共四十四页3.3 CSS3.3 CSS选择符与链接选择符与链接4 4、使用、使用IDID属性属性 IDID和和ClassClass在应用上相似,但在应用上相似,但IDID侧重于定义侧重于定义一个元素的独有特性,一个元素的独有特性,
18、classclass侧重于定义一类侧重于定义一类元素的公有特性元素的公有特性。在使用方法上二者区别不。在使用方法上二者区别不大,定义大,定义IDID时使用时使用“”【参见例子参见例子:book03.xml;css_book03.css:book03.xml;css_book03.css】本讲稿第二十二页,共四十四页3.3 CSS3.3 CSS选择符与链接选择符与链接5 5、使用、使用importimport指令指令 允许在样式表中允许在样式表中使用使用 import import 指令来引入一个或指令来引入一个或多个独立保存的样式表多个独立保存的样式表,即将这些样式表包含的规,即将这些样式表包
19、含的规则添加到当前样式表中来。则添加到当前样式表中来。【格式格式】import url(StyleSheetURL)import url(StyleSheetURL);本讲稿第二十三页,共四十四页【注释注释】StyleSheetURL 表示想要引入的样式表文件的表示想要引入的样式表文件的URL,可以是本地或网络上样式表文件的绝对路径或,可以是本地或网络上样式表文件的绝对路径或相对路径。相对路径。本指令必须放置在本指令必须放置在CSS样式表的开头,且尾部的分号样式表的开头,且尾部的分号“;”不能少,不能少,URL后面采用()。后面采用()。【参见例子参见例子:book04.xml;css_boo
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 层叠 式样 精选 文档
限制150内