第6章层叠样式表

1、第第6章章 层叠样式表层叠样式表CSS XML为存储结构化数据提供了强大的方法，但是它没有提供关于数据如何显示的信息，这实际上是XML的优点：数据的结构完全与数据表示无关。第第6章章 层叠样式表层叠样式表CSSlCSS入门lCSS语法lCSS选择器lCSS属性lCSS链接6.1 CSS简介简介6.1.1 CSS基础知识lCSS是用于为XML数据定义显示参数的一种技术，它利用简单的规则来控制元素内容在浏览器中的表现方式。lCSS最初是被开发来为HTML文档指定显示的，同时也适合于XML数据。l样式表中的显示规范与XML数据分离，意味：l相同的数据通过应用不同的样式表可以以不同的方式显示；l同样，

2、相同的样式表可以应用到多个XML文件。6.1 CSS简介简介lXML和HTML所采用的CSS语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。lCSS层叠样式表：实现网页风格设计，包括页面的布局、字体、颜色、背景等l对一个站点的风格进行统一规定： 采用CSS文件l只规定某个页面的风格：采用内部文档头l规定某些HTML标志具有特殊样式：直接插入方式lCSS版本有CSS1、CSS2、CSS36.1 CSS入门入门lCSS具有如下特点：l丰富的样式定义l易于使用和修改l多页面应用l层叠l页面压缩 6.1.2 CSS的创建与应用l建立XML文档l创建样式表文件l链接样式表到XML文

3、档6.1 CSS入门6.1.2 CSS的创建与应用的创建与应用lCSS的基本语法lCSS元素： CSS的结构单元lCSS规则：通过属性和属性值来设定l属性：指定元素某一方面的特性l属性值：指定元素特性的具体特征l属性名： CSS的关键字6.1.2 CSS的使用的使用l样式表：必须符合CSS规则标志标志标志属性标志属性1：属性值；标志属性：属性值；标志属性2：属性值；：属性值；l标志不带尖括号标志不带尖括号l “标志属性：属性值标志属性：属性值” ： 一一对应一一对应l当属性名由两个或两个以上单词构成时，单词之间用当属性名由两个或两个以上单词构成时，单词之间用“-”隔开例，隔开例，backgro

4、und-colorl一个属性可以有多个属性值。例如一个属性可以有多个属性值。例如P1font-size:16pt;font-family:宋体宋体;font-style:italic可直接表示为：可直接表示为：P1font:16pt 宋体宋体 italic一个无一个无CSS样式表样式表XML文件文件【例6.1】这是一个没有应用层叠样式表的XML文档，code6_1.xml 望庐山瀑布 唐.李白 日照香炉升紫烟 遥看瀑布挂前川 飞流直下三千尺 疑是银河落九天一个无一个无CSS样式表样式表XML文件文件一个使用一个使用CSS样式表样式表XML文件文件l在XML文档的开头部分写一个关于样式单的如下声

5、明语句：l也可以使用完整的URL指定CSS样式表文件，像下面这个例子：一个使用一个使用CSS样式表样式表XML文件文件charsetgb2312;namedisplay:block;font-family:黑体;font-size:20pt;letter-spacing:10pt;text-align:center;writerdisplay:block;font-family:魏碑;font-size:10pt;font-weight:bold;letter-spacing:10pt;line-height:40pt;text-align:center;color:Black;content

6、display:block;font-family:隶书;font-size:20pt;font-weight:bold;line-height:30pt;letter-spacing:10pt;text-align:center;color:Black;一个使用一个使用CSS样式表样式表XML文件文件6.2 基本的基本的CSS语法语法lCSS语句的基本格式如下： 选择器 属性1:属性值1;属性2:属性值2; l选择器（selector）：用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号“ ”括起来的若干对属性名与相应的属性值，用来对选择器所指定的元素设置具

7、体的显示样式。l注意：花括号中的每一个属性名与相应的属性值之间须用冒号“:”分隔；而各对属性之间则须用分号“;”隔开。6.2 基本的基本的CSS语法语法lCSS中的注释l样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。lCSS中字母的大小写l对于IE 浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问题。6.3 CSS选择器选择器lCSS选择器：用于指定样式规则所应用元素的名称，由一个或多个元素名或特定的标识构成，紧跟其后面的是用花括号“”括起来的若干个属性名与相应的属性值对，用来对选择器所指定的元素设置具体的显示样式

8、。l浏览器在遇到这些元素时，就使用定义好的样式来显示它们。l花括号中每一个属性名与相应的属性值之间必须用冒号“ ：”分隔。 6.3 CSS选择器选择器例如，下面的规则中的name就是选择器。 name display:block; font-weight:700; l上面的代码将文档中的name元素的显示格式设置为：在块中单独显示一行、文字的大小为700px。要注意的是我们可以把上述的代码写成一行里，如下所示： name display:block; font-weight:700;l但是为了提高代码的可读性，建议分多行编写。 6.3 CSS选择器选择器lCSS中的每一条格式设置语句都是由选择

9、器开始的，选择器有如下三种常用的形式：l一个或多个元素（一个或多个元素（Tag）选择器）选择器 例，下面的格式设置语句同时应用于poem、name、writer和content多个不同的元素： poem,name,writer, content display:block 本例将多种元素全部包含在单一的规则中进行设置，而不是将它们分散在不同的规则中设置，可以让CSS样式表变得更短，并且更容易理解和维护。6.3 CSS选择器选择器l类（Class）选择器l不管是HTML还是XML文档，有些内容是可以分类处理的。l对于某一类的内容可以定义不同的样式进行显示。l这样就可以在相应的CSS文件中对相同名

10、称、不同类Class的属性的元素分别设定不同的规则，从而增加样式设置的灵活性。 例如，有一个段落是粗体的，而另一个段落则为正常的字体，可以把Class属性加到两个元素或其中一个元素上，然后为给定的Class中的元素编写一个规则。6.3 CSS选择器选择器l类选择器的定义方法有两种：（1）与元素不相关的类选择器的定义方法： .Class property1: value; property2: value; propertyN: value l这种类选择器定义时在Class的名称前面加了一个“.”，后面的定义和Tag选择器相同。6.3 CSS选择器选择器（2）与元素相关的类选择器的定义方法： T

11、ag.Class property1: value; property2: value; propertyN: value l这种类选择器是在定义时使用Tag.Class的方式表示该Class是与元素相关的选择器，后面的定义和前面的选择器相同。 下面是类选择器的相关代码示例（p150 实例6-2） p.right text-align: right center text-align: center 上面一行定义HTML标记的类选择器，这种情况将只定义标记p的样式，而第2行代码则具有通用性，可用于任何标记的样式定义。6.3 CSS选择器选择器3. 标识（ID）选择器l在HTML或XML文档中，

12、往往需要唯一地标识一个元素，即赋予它一个ID标识，以便在对整个文档进行处理时能够较快地找到这个元素。lCSS也可以将ID标识作为选择器进行样式设定。 例如，要将某张列表中的一个元素变成粗体，来与同类进行对照，从而达到强调它的目的这种情况下，可编写作用于此元素ID属性的规则。6.3 CSS选择器选择器l标识选择器的定义方法也有两种：（1）与元素不相关的标识选择器的定义方法 #ID property1: value; property2: value; propertyN: value l这种标识选择器是定义时在ID的名称前面加了一个“#”，后面的定义和类选择器相同。6.3 CSS选择器选择器（2

13、）与元素相关的标识选择器的定义方法： Tag#ID property1: value; property2: value; propertyN: value l这种标识选择器是在定义时使用Tag#ID的方式表示该ID是与元素相关的选择器，后面的定义和前面的选择器相同。6.3 CSS选择器选择器下面是ID选择器的相关代码示例： #intro font-size:80%; p#headLineont-size:100%;l上面的代码中#intro采用第1种方法定义ID选择器号，将可用于所有字体大小的定义；p#headLine采用第2种方法定义ID选择器号，将只用于匹配id=“headLine”的段

14、落元素。lID选择器局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 6.4 设置设置CSS属性属性6.4.1 显示属性的设置l 元素的“display”属性控制了浏览器显示该元素文字的基本方法。可为“display”属性指定下面4种属性值中的任何一种。lBlock:将元素以块方式显示，通过换行与其他元素分开显示；lInline:在同一行显示元素；lnone:隐藏元素，使元素在页面中不可见；llist-item:以列表方式显示元素。6.4.2 设置字体属性设置字体属性lFont属性集： 设置指定字体的风格、大小、亮度等参数。lfont-family：字体字型lfont-styl

15、e：字体风格lfont-weight：字体亮度（粗细程度）lfont-variant：字体全为大写字母lfont-size：字体大小lfont-stretch：字体的压缩或拉伸方式l若CSS中需要使用各种中文字体，则CSS文件的第一行加语句： charset”gb2312”;表表6.2 font属性的常见子属性属性的常见子属性font属性属性说说 明明font-family指定字体的字型指定字体的字型font-style指定字体的风格指定字体的风格font-weight指定字体的亮度指定字体的亮度font-variant指定字体全为大写字母指定字体全为大写字母font-size指定字体的大小指

16、定字体的大小font-stretch指定字体的压缩或拉伸方式指定字体的压缩或拉伸方式 font属性的用法属性的用法l与常见的CSS属性设置类似lfont属性使用示例如下：elementfont-style:italic;font-size: 20pt; font-family: 楷体_gb2312;字体字型字体字型font-family属性属性lfont-family属性：用于指定字体名称，属性值使用逗号分隔的字体名称。如果字体名称中出现空格，必须使用双引号将字体括起来，如“Times New Roma”。lfont-family属性可用的值：取决于用户系统中已经安装了的字体，在Windows

17、系统的安装目录下单位的“fonts”文件夹中保存了系统安装的所有字体。lfont-family属性的参数值：可以有几个，在指定font-family属性时，可同时指定几个字符集。这样，在浏览器找不到第1个字符集的时候可以按顺序使用第2个字符集显示字体。字体风格字体风格font-style属性属性font-style属性说 明Normal表示不使用斜体，该参数是font-style属性的默认值Italic表示使用斜体显示文字Oblique表示使用倾斜幅度不大的斜体显示文字字体亮度字体亮度font-weight属性属性 设置字体的粗体程度设置字体的粗体程度font-weight属性属性说说 明明N

18、ormal表示使用标准字体（没有加深色彩），该参数是font-variant属性的默认值Bold表示使用标准的黑体文本Bolder表示使用比标准黑体还要深的颜色显示文字（为相对参数）Lighter表示使用比标准黑体稍浅的颜色显示文字（为相对参数）设置为大写字母设置为大写字母font-variant属性属性 font-variant属性属性说说 明明Normal表示在打印中大写字母没有变化，该参数是font-variant属性的默认值small-caps表示设定用大写字母代替文本中的小写字母。font-variant属性值设置为small-caps将会用比主体文本字号小一些的大写字母代替小写字母

19、设置字体大小设置字体大小font-size属性属性font-size属性属性说说 明明整数+“pt” 表示使用指定的像素大小显示字体，“pt”表示像素（如20pt、35pt）整数+“%”表示当前元素使用字体大小是前一个元素大小的百分倍数（如40%、150%）Large表示使用比父元素大一号的字体x-small表示使用字体比small字体小1.2倍xx-small表示使用字体比x-small字体小1.2倍x-large表示使用字体比large字体大1.2倍xx-large表示使用字体比x-large字体大1.2倍Medium表示使用标准字体大小显示6.4.3 设置色彩和背景图像属性设置色彩和背景

20、图像属性l定义前景色：colorl定义背景色：backgruondl设置背景颜色： backgruond-colorl设置背景图案： backgruond-imagel设置背景图案重复方式： backgruond-repeatl设置背景图案滚动方式： backgruond-attachmentl设置背景图案起始位置： backgruond-position1 定义前景色定义前景色color属性颜色十进制RGB十六进制RGBRGB百分数纯红rgb(255,0,0)#FF0000rgb(100%,0%,0%)纯蓝rgb(0,0,255)#0000FFrgb(0%,0%,100%)纯绿rgb(0,2

21、55,0)#00FF00rgb(0%,100%,0%)白色rgb(255,255,255)#FFFFFFrgb(100%,100%,100%)黑色Rgb(0,0,0)#000000rgb(0%,0%,0%)浅紫Rgb(255,204,255)#FFCCFFrgb(100%,80%,100%)浅灰Rgb(153,153,153)#999999rgb(60%,60%,60%)褐色Rgb(153,102,51)#996633rgb(60%,40%,20%)粉红Rgb(255,204,204)#FFCCCCrgb(100%,80%,80%)橙色Rgb(255,204,0)#FFCC00rgb(100%

22、,80%,0%)color属性的用法属性的用法charsetgb2312;namedisplay:block; font-size:22pt; color:blue;writerdisplay:block; color:red;contentAdisplay:block; color:#FOF;contentBdisplay:block; color:rgb(100%,50%,50%);contentCdisplay:block; color:rgb(000,000,256);contentDdisplay:block; color:rgb(000,256,256); color属性的用法属性

23、的用法2 定义背景色定义背景色background属性集background属性属性说说 明明background-color用于对指定元素设置背景颜色background-image用于对指定元素设置背景图案background-repeat在背景图案小于指定元素的情况下，是否使用重复填充图案background-attachment用于指定设置的背景图案在元素滚动时是否一起滚动background-position用于指定背景图案的起始位置设置背景颜色设置背景颜色background-colorl#RGB：3位十六进制数l#RRGGBB：6位十六进制数lrgb（RRR，GGG，BBB）：3

24、个3位十进制数lrgb（R%，G%，B%）：用3个百分数表示l颜色名称：表示颜色的英文名称 设置背景图案设置背景图案background-imagelbackground-image：定义背景图形。取值为none、url，当取值为none时表示不用图形作背景，url表示提供图形文件的URL地址。l直接用图像文件名称（如image001.gif），这里是指和CSS样式表文件在同一目录下的文件。设置背景图案重复方式设置背景图案重复方式background-repeatlrepeat：使用背景图案完全填充元素大小的空间lrepeat-x：使用背景图案在水平方向从左到右填充元素大小的空间。lrepea

25、t-y：使用背景图案在竖直方向从上到下填充元素大小的空间。lno-repeat：不使用背景图案重复填充元素。设置背景图案滚动方式设置背景图案滚动方式background-attachmentlscroll：表示在文字页面滚动时，背景一起滚动lFixed：表示在文字页面滚动时，背景固定不滚动设置背景图案起始位置设置背景图案起始位置background-positionltop：表示背景图案位于指定元素的顶部lcenter：表示背景图案位于指定元素的中部lbottom：表示背景图案位于指定元素的底部lleft：表示背景图案位于指定元素的左部lright：表示背景图案位于指定元素的右部6.4.4 设

26、置边框属性设置边框属性l在CSS中，提供了方框边界属性来对元素中文本的版面进行设置l设置元素在文件中的位置l在元素周围添加边框，并设置边框的样式，大小l控制相邻元素的位置l设置边框属性l设置边框样式：border-stylel设置边框宽度：border-widthl设置边框颜色：border-color6.4.5 设置布局属性设置布局属性l设置定位属性l设置页面边界属性l设置上边距：margin-topl设置下边距：margin-bottoml设置左边距：margin-leftl设置右边距：margin-right6.4.5 设置布局属性设置布局属性l设置填充属性：元素与边框的距离l设置上填充

27、：padding-topl设置下填充：padding-bottoml设置左填充：padding-leftl设置右填充：padding-right设置边框属性设置边框属性border-styleborder-style属性属性描述描述None不显示边框，为缺省值Dotted点线Dashed虛线Solid实线Double双线Groove3D陷入线Ridge3D山脊狀线Inset使页面有沉入感Outset使页面有浮出感6.4.5 设置布局属性设置布局属性l设置填充属性：元素与边框的距离l设置上填充：padding-topl设置下填充：padding-bottoml设置左填充：padding-left

28、l设置右填充：padding-right设置大小属性设置大小属性l设置边框大小的属性为width、heightl取值为auto：表示根据元素大小自动调整width、height的取值。l指定大小l父元素宽度的百分比设置定位属性设置定位属性定位属性定位属性描述描述float设置文本相对于元素的位置。取值为：left、right、noneleft下一个文本位于元素的左边right下一个文本位于元素的右边none缺省值，下一个文本紧接着显示出来clear设置浮动元素相对于元素的位置。取值为：left、right、none、bothleft浮动元素位于元素的左边right浮动元素位于元素的右边both

29、浮动元素位于元素的两侧 6.4.5 设置布局属性设置布局属性l设置页面边界属性l设置上边距：margin-topl设置下边距：margin-bottoml设置左边距：margin-leftl设置右边距：margin-right6.4 设置设置CSS属性属性6.4.6 背景属性的设置lbackground-color属性lbackground-image属性lbackground-repeat属性lbackground-position属性lbackground-attachment属性6.4 设置设置CSS属性属性6.4.7 文本属性的设置lletter-spacing属性lword-spac

30、ing属性lvertical-align属性ltext-align属性ltext-indent属性lline-height属性ltext-transform属性ltext-decoration属性文本属性文本属性文本属性文本属性说说 明明letter-spacing设置字母间隔，可以增加或减少字母之间的间距Word-spacing设置文字间隔。其使用方法和letter-spacing类似vertical-align确定一个内部元素的相对于它的上级元素或相对与元素行纵向位置text-align作用于块元素，用来设置块中文本的对齐方式，取值为：left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)text-indent设置第一行缩进距离。如：nametext-indent:2em,表示第一行缩进两个字