第3章 CSS-层叠式样式表.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,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,数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。,CSS,最初是被开发用来为,HTML,文档指定显示的，同时也适合于,XML,数据。样式表中的显示规范与,XML,数据分离，这意味着相同的数据通过应用不同的样式表可以不同的方式显示。同样，相同的样式表可以应用到多个,XML,文件中。,3.1 CSS,简介,3.1.1 CSS,的概念,CSS(Cascading,Style Sheet),层叠样式表,，也称为,级联样式表,，用来进行网页风格设计。,在网页制作时采用,CSS,技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页面的网页的外观和格式。,(1),在几乎所有的浏览器上都可以使用。,(2),以前一些必须通过图片转换实现的功能，现在只要用,CSS,就可轻松实现，更快地下载页面。,(3),使页面的字体变得更漂亮，更容易编排。,(4),可以轻松地控制页面的布局。,(5),可以将许多网页的风格、格式同时更新，不用再一页一页地更新。可以将站点上所有的网页风格都使用一个,CSS,文件进行控制，只要修改这个,CSS,文件中相应的行，那么整个站点的所有页面都会随之发生变动。,【,它具有以下特点,】,3.1.2 CSS,技术简介,CSS,即层叠样式表或级联样式表，是目前在浏览器上按一定格式显示,XML,文档内容的主要方法之一。,CSS,样式表中包含了一组设置元素显示样式的规则，最初被用来控制,HTML,文档内容的显示格式，同样能够用来控制,XML,文档内容的显示格式。,XML,和,HTML,所采用的,CSS,语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线等等。,3.1.2 CSS,技术简介,创建专门的样式表文件，把控制元素显示格式的相关指令放在其中，使其与,XML,文档的数据内容分开，可以大大提高控制,XML,文档显示方式的灵活性，并可使得样式表本身更加容易维护。,相对于,XSL,（可扩展样式表语言）技术而言，采用,CSS,技术来显示,XML,文档的做法还是有局限性的。,3.1.2 CSS,技术简介,CSS,样式表是一个以,.,css,为文件扩展名的,纯文本文件,，可以使用“记事本”等文本编辑器来建立,CSS,样式表文件。,为了引用创建好的样式表文件来格式化显示,XML,文档的内容，必须将相应的样式表文件链接到这个,XML,文档中。只需在,xml,文档中增加下面的链接语句即可：,3.1.2 CSS,技术简介,3.2 CSS,基本语法,1,CSS,语句的基本格式,【,基本格式,】,选择符,属性,1:,属性值,1;,属性,2:,属性值,2 ,【,注释,】,选择符（,selector,）用来指定该规则所适用的元素，由一个或多个,元素名,或特定的,标识,构成；,紧跟其后的是用花括号“,”,括起来的若干对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。,花括号中的每一个属性名与相应的属性值之间须用冒号“,:,”,分隔；而各对属性之间则须用分号“,;,”,隔开。,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,中的注释,样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语句由斜线加上星号“,/*,”,作为开始，以星号加斜线“,*,/,”,作为结束，在这两个特定标记之间可以输入任何想要说明的文字。,3,CSS,中字母的大小写,对于,IE,浏览器而言，,CSS,中字母的大小写是不加区分的,。但当,CSS,应用于,XML,文档时，忽略字母的大小写将会带来一定的问题。如果想使用,CSS,来显示,XML,文档，,就应该让文档中各种元素的名称都完全不同,，而不仅仅是字母大小写的不同。,3.2 CSS,基本语法,3.2 CSS,基本语法,4,、,CSS,中属性的继承,通常情况下，,在,CSS,中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了不同的格式属性。,注：,不能使用中文作为元素名称。,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,cssforbook.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,属性,ID,和,Class,在应用上相似，但,ID,侧重于定义一个元素的独有特性，,class,侧重于定义一类元素的公有特性,。在使用方法上二者区别不大，定义,ID,时使用“,”,【,参见例子,:book03.xml;css_book03.css】,3.3 CSS,选择符与链接,5,、使用,import,指令,允许在样式表中,使用,import,指令来引入一个或多个独立保存的样式表,，即将这些样式表包含的规则添加到当前样式表中来。,【,格式,】,import,url,(,StyleSheetURL,),;,【,注释,】,StyleSheetURL,表示想要引入的样式表文件的,URL,，可以是本地或网络上样式表文件的绝对路径或相对路径。,本指令必须放置在,CSS,样式表的开头，且尾部的分号“,；,”不能少，,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,=“,www.w3.org/profiles/XHTML-transitional,”,（,xmlns,是指名域空间技术）,【,参见例子,:book07.xml】,3.3 CSS,选择符与链接,8,、样式应用说明,如果没有为子元素设置特定的样式规则，将会自动,继承,父元素的规则。,如果在样式表中并没有为某个元素设置样式规则，也没有父元素的样式规则可以继承，则浏览器将使用自己设定的规则。,如果在同一个层级中，,某个元素的属性被赋予了冲突的属性值，则浏览器将会采用所处理的,最后属性,设定。,可以使用,!important,关键字来特别声明该规则是重要的和必需使用的。,3.4,将,CSS,与,XML,结合,1,、外部样式文件,【,参见例子,:,book06.xml;css_book06.css】,2,、将样式语句嵌入到,XML,文件中,【,参见例子,:,book07.xml】,3,、混合方式指定样式,综合使用以上,2,种方法来给,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,，,olive,，,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,属性控制了浏览器显示该元素文字的基本方法。可为,display,属性指定下面,4,种属性值中的任何一种。,block,：,将元素以块方式显示，通过换行与其,他元素分开显示；,inline,：,在同一行显示元素；,none,：,隐藏元素，使元素在页面中不可见；,list-item,：,以列表方式显示元素。,3.5,CSS,属性与属性值,5,、常用设置字型属性,font-family,属性,:,决定字体的字型如,arial,font-size,属性：决定字体大小如,large,或数值,font-style,属性：决定字体风格，,normal/italic,font-weight,属性,:,决定字体粗细如,bold,、,light,font-variant,属性：,用于设置打印时英文字体的大小写变,化，,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:,楷体,_gb2312,宋体,黑体,;,【,例如,】,【,字体字型,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,属性,:,边界属性，,设置元素的边界,padding,属性：补白属性，,一个元素的补白是,边框和元素的内容之间的间隔的数值,3.5 CSS,属性与属性值,【,参见例子,:,css1.xml】,3.5,CSS,属性与属性值,7,、设置边框属性,border-style,属性：,用于设置一个元素边框的样式,如,dotted,border-color,属性：,用于设置边框的颜色,border-width,属性：,用于设置边框的宽度，可取值为,thin,、,medium,、,thick,或指定尺寸,border,属性,【,参见例子,:book06.xml,css_book06.css】,8,、设置背景属性,background-color,属性：,用于对指定元素设置背景颜色,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-decoration,属性,【,注释参见后页,】,3.5 CSS,属性与属性值,设置字符间隔，可以增加或减少字符之间的间距,设置字符间隔。其使用方法与,letter-spacing,类似,设置或检索对象内容的纵向对齐方式,作用于块元素，用来设置块中文本的对齐方式，取值为：,left(,左对齐,),、,right(,右对齐,),、,center(,居中,),、,justify(,两端对齐,),设置第一行缩进距离。如,nametext-indent:2em,，表示第一行缩进两个字的长度,控制文本连续行之间的距离，可以用来调整文本垂直线的距离,设置显示文本的字母大小写的显示形式。取值关键字为：,capitalize,，首字母大写；,uppercase,，所有字母都大写；,lowercase,，所有字母都小写；,none,，不改变字母的大小写状态,声明文本是否有划线，常用来装饰链接。取值关键字为：,overline,，有上划线；,line-through,，有穿过文本的删除线；,underline,，有下划线；,none,，没有任何划线,练习,制作由,CSS,样式文件设计的全班同学通讯录网页。（以五个同学为例子）,