CSS层叠式样式表.ppt

《CSS层叠式样式表.ppt》由会员分享，可在线阅读，更多相关《CSS层叠式样式表.ppt（44页珍藏版）》请在三一办公上搜索。

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

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

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

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

5、采用CSS技术来显示XML文档的做法还是有局限性的。,3.1.2 CSS技术简介,CSS样式表是一个以.css为文件扩展名的纯文本文件，可以使用“记事本”等文本编辑器来建立CSS样式表文件。为了引用创建好的样式表文件来格式化显示XML文档的内容，必须将相应的样式表文件链接到这个XML文档中。只需在xml文档中增加下面的链接语句即可：,3.1.2 CSS技术简介,3.2 CSS基本语法,1CSS语句的基本格式【基本格式】选择符 属性1:属性值1;属性2:属性值2,【注释】选择符（selector）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号“”括起来的若干

6、对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。花括号中的每一个属性名与相应的属性值之间须用冒号“:”分隔；而各对属性之间则须用分号“;”隔开。,3.2 CSS基本语法,Pbackground-color:red;font-size:12pt;color:black,上面分别设置了背景色、字体大小以及字体颜色等。为了看起来直观一些，还可以写成：P background-color:red;font-size:12pt;color:black,下面是样式表的一个简单的例子：,3.2 CSS基本语法,3.2 CSS基本语法,2、CSS中的注释 样式表文件也可以包含注释语句，添加

7、注释文字有助于样式表更具可读性。注释语句由斜线加上星号“/*”作为开始，以星号加斜线“*/”作为结束，在这两个特定标记之间可以输入任何想要说明的文字。,3CSS中字母的大小写 对于IE 浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问题。如果想使用CSS来显示XML文档，就应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。,3.2 CSS基本语法,3.2 CSS基本语法,4、CSS中属性的继承 通常情况下，在CSS中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了不同的格式属性。

8、,注：不能使用中文作为元素名称。,5在CSS使用中文 如果要在CSS中使用中文简体字符集，需要在CSS文件的第一行加上如下指令：charset gb2312;,3.2 CSS基本语法,1、CSS的链接使用一般链接指令 一般可以在XML文档的开头使用xml:stylesheet处理指令将指定的CSS样式表链接进来。【格式】【注释】?xml:stylesheet表示当前XML文档在显示时需要使用样式单并告诉IE不使用默认的树状结构。type=“text/css”表示使用CSS类型的样式单；href=url用来指定样式单文件的URL。,3.3 CSS选择符与链接,【参见例子:book.xml,css

9、forbook.css】,3.3 CSS选择符与链接,选择符可以是*或者元素名2使用多个元素与多个规则 如果想把一组属性应用于多个元素，即对同一标记指定特定样式，可以用逗号将选择符中所有元素分开，然后再定义属性的具体值。【参见例子:book01.xml;css_book01.css】,3、使用CLASS属性 要求同一个标记在文档的不同地方使用不同样式，使用class属性时要用到”.”【参见例子:book02.xml;css_book02.css】如果XML文档中有一个标记没有定义样式，则该标记将使用父标记的样式，即继承,3.3 CSS选择符与链接,3.3 CSS选择符与链接,4、使用ID属性

10、ID和Class在应用上相似，但ID侧重于定义一个元素的独有特性，class侧重于定义一类元素的公有特性。在使用方法上二者区别不大，定义ID时使用“”【参见例子:book03.xml;css_book03.css】,3.3 CSS选择符与链接,5、使用import指令 允许在样式表中使用 import 指令来引入一个或多个独立保存的样式表，即将这些样式表包含的规则添加到当前样式表中来。【格式】import url(StyleSheetURL);,【注释】StyleSheetURL 表示想要引入的样式表文件的URL，可以是本地或网络上样式表文件的绝对路径或相对路径。本指令必须放置在CSS样式表的

11、开头，且尾部的分号“；”不能少，URL后面采用（）。【参见例子:book04.xml;css_book04.css】,3.3 CSS选择符与链接,3.3 CSS选择符与链接,6、!important声明 如果把!important声明和属性连结起来，该属性将不被覆盖。【参见例子:book05.xml;css_book05.css】,7、使用STYLE 属性 使用HTML的style标记直接将样式语句写在XML文档内部 由于使用HTML标记来实现XML的嵌套样式，所以必须指定所用style标记的出处：xmlns:HTML=“”（xmlns是指名域空间技术）,【参见例子:book07.xml】,3

12、.3 CSS选择符与链接,8、样式应用说明如果没有为子元素设置特定的样式规则，将会自动继承父元素的规则。如果在样式表中并没有为某个元素设置样式规则，也没有父元素的样式规则可以继承，则浏览器将使用自己设定的规则。如果在同一个层级中，某个元素的属性被赋予了冲突的属性值，则浏览器将会采用所处理的最后属性设定。可以使用!important 关键字来特别声明该规则是重要的和必需使用的。,3.4 将CSS与XML结合,1、外部样式文件【参见例子:book06.xml;css_book06.css】2、将样式语句嵌入到XML文件中【参见例子:book07.xml】3、混合方式指定样式综合使用以上2种方法来给

13、XML添加样式【参见例子:book08.xml】,4、使用多个样式文件一个XML文档能够调用多个的样式文件 若发生冲突，则以后面包含进来的文件定义的样式为主,3.5 CSS属性与属性值,1属性关键字2色彩属性值 与色彩设置有关的属性包括color、background-color和border-color等，其中应用最多的是color属性。可以使用英文的颜色名称，也可以使用任何一种RGB 格式来作为色彩属性值。（1）使用英文色彩名称（2）使用各种RGB表示方式,颜色单位,16个关键字:aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，oli

14、ve，purple，red，silver，teal，white，yellow。,3.5 CSS属性与属性值,3尺寸属性值（1）绝对尺寸值：in、mm、cm、pt（2）相对尺寸值：px、em、ex（3）百分比尺寸值：,3.5 CSS属性与属性值,em(em，元素的字体的高度)ex(x-height，字母 x 的高度)px(像素，相对于屏幕的分辨率)有效的绝对单位:in(英寸，1英寸=2.54厘米)cm(厘米，1厘米=10毫米)mm(毫米)pt(点，1点=1/72英寸)pc(帕，1帕=12点),3.5 CSS属性与属性值,3.5 CSS属性与属性值,4、设置显示属性 元素的display属性控制了

15、浏览器显示该元素文字的基本方法。可为display属性指定下面4种属性值中的任何一种。block：将元素以块方式显示，通过换行与其 他元素分开显示；inline：在同一行显示元素；none：隐藏元素，使元素在页面中不可见；list-item：以列表方式显示元素。,3.5 CSS属性与属性值,5、常用设置字型属性font-family属性:决定字体的字型如arialfont-size属性：决定字体大小如large或数值font-style属性：决定字体风格，normal/italicfont-weight属性:决定字体粗细如bold、lightfont-variant属性：用于设置打印时英文字体

16、的大小写变化，normal(普通)还是small-caps(小型大写字母)font属性：综合字体属性,element font-style:italic;font-size:20pt;font-family:楷体_gb2312;,【示例】,element font:20pt 楷体_gb2312 italic；,作用与上面例子等价：,3.5 CSS属性与属性值,font-family 属性的参数值可以有几个，在指定font-family 属性的时候，可以同时指定几个字符集。这样，在浏览器找不到第一个字符集的时候可以按顺序使用第二个字符集显示字体,elementfont-family:楷体_gb2

17、312,宋体,黑体;,【例如】,【字体字型font-family 属性】,3.5 CSS属性与属性值,【设置为大写字母font-variant 属性】,3.5 CSS属性与属性值,font-variant 属性用于设置打印时英文字体的大小写变化,【font-variant 属性说明】normal:表示在打印中大写字母没有变化，该参数是font-variant 属性的默认值 small-caps:表示设定用大写字母代替文本中的小写字母。font-variant 属性值设置为small-caps 将会用比主体文本字号小一些的大写字母代替小写字母,6、设置布局属性设置元素位置与大小 margin属性

18、:边界属性，设置元素的边界 padding属性：补白属性，一个元素的补白是边框和元素的内容之间的间隔的数值,3.5 CSS属性与属性值,【参见例子:css1.xml】,3.5 CSS属性与属性值,7、设置边框属性border-style属性：用于设置一个元素边框的样式如dottedborder-color属性：用于设置边框的颜色border-width属性：用于设置边框的宽度，可取值为thin、medium、thick 或指定尺寸border属性,【参见例子:book06.xml,css_book06.css】,8、设置背景属性 background-color属性：用于对指定元素设置背景颜色

19、 background-image属性：用于对指定元素设置背景图案 background-repeat属性：在背景图案小于指定元素的情况下，是否使用重复填充图案 background-position属性:用于指定背景图案的起始位置 background-attachment属性:用于指定设置的背景图案在元素滚动时是否一起滚动,3.5 CSS属性与属性值,9、设置文本属性letter-spacing属性word-spacing属性vertical-align属性text-align属性text-indent属性line-height属性text-transform属性text-decorati

20、on属性,【注释参见后页】,3.5 CSS属性与属性值,设置字符间隔，可以增加或减少字符之间的间距设置字符间隔。其使用方法与letter-spacing 类似设置或检索对象内容的纵向对齐方式作用于块元素，用来设置块中文本的对齐方式，取值为：left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)设置第一行缩进距离。如nametext-indent:2em，表示第一行缩进两个字的长度控制文本连续行之间的距离，可以用来调整文本垂直线的距离设置显示文本的字母大小写的显示形式。取值关键字为：capitalize，首字母大写；uppercase，所有字母都大写；lowercase，所有字母都小写；none，不改变字母的大小写状态声明文本是否有划线，常用来装饰链接。取值关键字为：overline，有上划线；line-through，有穿过文本的删除线；underline，有下划线；none，没有任何划线,练习,制作由CSS 样式文件设计的全班同学通讯录网页。（以五个同学为例子）,