网页设计基础第五章

1、第5章 CSS基础应用第5章 CSS基础应用CSS是Cascading Style Sheets的缩写，中文意思为层叠式样式表，简称样式表。使用CSS可以快速对网页中的元素的样式进行精确控制。与前面使用HTML标签控制网页外观不同，使用CSS来定义网页的外观样式可以实现内容和表现的相对分离，提高页面浏览速度并有效减少网页制作和维护的工作量。此外，CSS还提供了很多利用HTML无法控制和实现的显示效果。5.1 CSS简介在HTML中，用、这样的标签来表达“这里是段落”、“这里是表格”之类的信息，并可以通过浏览器来显示出这些元素。为了使HTML标签在浏览器中显示时能有不同的表现形式，就需要不断地将

2、新的HTML标签和属性（如字体标签和颜色属性）添加到HTML规范中。给HTML增加很多的属性，并通过这些添加的属性来控制网页的显示效果，使得网页中的HTML代码变得很臃肿。5.1 CSS简介CSS解决了利用HTML进行网页排版和显示不同效果时代码臃肿的问题。CSS是一种定义样式（如字体、颜色和位置）的语言，用于描述如何格式化和显示网页中的信息。CSS样式可直接存储在HTML网页中，也可存储为独立的样式表文件。不管以哪种方式保存，样式表都包含将样式应用于特定类型元素的样式规则。在外部使用时，样式规则放在外部样式表文档中，文件扩展名为.css。5.1 CSS简介样式规则可应用于网页中的各种元素，如

3、文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。CSS中的“层叠（cascading）”表示样式规则应用于HTML文档元素的方式。具体地说，CSS中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现层叠效果。可将CSS的层叠机制看成一种类似继承的关系，在这种继承关系中，父亲的特征传递给子女，但子女有更特殊的特征。基本样式规则适用于整个样式表，但可被更具体的样式规则覆盖。5.1 CSS简介综上所述，简单地说，HTML的标签主要是定义网页元素的内容，而CSS决定如何显示HTML元素，就像HTML的字体标签和颜色属性所起的作用

4、那样。由于允许同时控制多重页面的样式和布局，CSS可以称得上是Web设计领域中的一个突破。网站开发者能够为每个HTML元素定义CSS样式，并将其应用于希望的任意多个页面中。如果需要进行全局更新，只需简单地改变样式，网站中的所有元素就会自动地更新。5.1.1 CSS语法要想使用CSS对网页的布局、字体、颜色、背景和其他显示效果进行精确地控制，需要先掌握CSS的基本语法。1.CSS语法格式CSS语法由selector（选择符）、property（属性）和value（值）3部分构成，语法格式如下：selectorproperty:valueselector通常是希望定义的HTML元素或标签，prop

5、erty是希望改变的属性，每个属性都有一个值。属性和值用冒号分开，由花括号括起来，这样就组成了一个完整的样式声明（declaration）。例如，bodycolor:blue表示将body元素内的前景色（文字颜色）定义为蓝色。其中，body是选择符，花括号内的部分是样式声明，color为属性，blue为值。1.CSS语法格式如果属性的值是由多个单词组成的，则必须将值用引号引起来，例如：pfont-family:sans serif当需要对一个选择符的多个属性指定值时，使用分号将所有的属性和值分开，例如: ptext-align:center;color:red 为了提高CSS样式代码的可读性，

6、也可以分行写成下面的形式：Ptext-align:center;color:red2.选择符CSS语法中的选择符包括以下几种类型，这里除了基本的HTML元素或标签之外，还有一些其他类型。1）类型选择符类型选择符以文档语言对象类型（element）为选择符。对于HTML文档来说就是网页，而文档语言对象类型就是HTML中的元素或标签，类型选择符的语法格式如下：EsRules例如，pfont-size:2px;定义的样式是设置所有段落标签中文字的字号为12px，其中的段落标签p就是类型选择符。2）类选择符类选择符能够把相同的元素分类定义为不同的样式，定义类选择符时，需要在定义的类的名称前面加一个点号

7、。类选择符的语法格式如下：E.CLASSsRules例如，要对两个段落进行设置，一个段落设置为右对齐，一个段落设置为居中，可以先定义两个类：p.righttext-align:rightp.centertext-align:center以后要将类用在不同的段落中时，只需在HTML标签中加入定义的class参数：2）类选择符类选择符还有一种用法，即在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式，例如，.center text-align: center表示定义.center的类选择符为文字居中排列。这样的类可以被应用到任何元素上。下面使h1元素（标题1）和p元素（段落）都

8、归为.center类，使两个元素的样式都跟随.center这个类选择符，语句如下：这种省略HTML标签的类选择符是最常用的CSS选择符类型，使用这种方法，用户可以很方便地在任意元素上套用预先定义好的类样式。3）ID选择符ID选择符以“#”来定义。ID选择符可以为标有特定ID的HTML元素指定特定的样式。由于同一HTML文档中元素的ID是唯一的，所以ID只能在一个页面中出现一次。ID选择符的语法格式如下：#IDsRules例如，#red color:red;表示定义元素的颜色为红色，#green color:green;表示定义元素的颜色为绿色下面的HTML代码中，id属性为red的p元素显示为

9、红色，而id属性为green的p元素显示为绿色。 这个段落是红色。这个段落是绿色。由于ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。4）包含选择符如果需要单独对某种元素的包含关系定义样式表，如元素1中包含元素2，只对在元素1中的元素2进行定义，对单独的元素1或元素2无定义，那么可以使用包含选择符，其语法格式为：E1 E2sRules例如，table afont-size:12px表示改变在表格内的链接样式文字大小为12像素，而表格外的链接的文字仍为默认大小。5）选择符分组为了减少样式的重复定义，可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，其语法格式如

10、下：E1,E2,E3sRules例如：h1, h2, h3, h4, h5, h6 color: green表示该选择符分组中包含的所有标题元素，每个标题元素的文字都为绿色。其效果完全等效于：h1 color: green h2 color: greenh3 color: green h4 color: greenh5 color: green h6 color: green5.1.2 层叠性层叠性就是继承性，CSS的继承规则是外部的元素样式会保留下来给这个元素所包含的其他元素继承。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例

11、如，在标签中嵌套标签，并对div进行如下样式定义：divcolor: red;font-size:9pt例如，HTML文档中存在如下代码时：这个段落的文字为红色9号字5.1.2 层叠性p元素中的内容会继承div定义的属性，在段落中的文字将均为红色9号字。这就是层叠的概念或者说是继承的概念。需要注意的是，有些情况下内部选择符不继承其外部选择符的值。例如，上边框的属性值是不会继承的，但理论上这些都是特殊的个别现象，用户只需要记住几个特别不会进行继承的属性值的就行了。另外，当样式表层叠或继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了p元素的颜色：div color: red; font-

12、size:9ptp color: blue5.1.2 层叠性那么上面代码中段落的文字应该为蓝色9号字。其中，段落中的文字大小为9号字是继承div属性的，而color属性则依照最后p中定义的属性进行显示。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。在ID选择符、类选择符和类型选择符中，因为ID选择符是最后加到元素上的，所以优先级最高，其次是类选择符，最后是类型选择符。5.1.3 注释在CSS中可以插入注释来说明代码的意思。注释有利于以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*”开头，以“*/”结尾，例如：/*定义段落样式表*/Ptext-

13、align: center; /*文本居中排列 */ccs color: black; /*文字为黑色 */font-family: arial /*字体为arial */在网页中嵌入的样式表有4种，分别是：链接的外部样式表、内部样式表、嵌入样式表和导入的样式表。在将这4种CSS文件插入HTML文件时，CSS文件的定义可以放置在HTML文件的头部、主体和外部。其中，内部样式表定义在HTML文件头部，嵌入样式表定义在HTML文件主体，外部样式表、导入样式表定义在HTML文件的外部。5.1.4 在网页中插入CSS插入链接的外部样式表先要把样式表保存为一个单独的文件，然后在HTML文件中使用标签链接

14、，这个标签必须放到HTML代码的中。插入链接的外部样式表的语法格式如下：1.链接的外部样式表其中，rel=“stylesheet”是指在HTML文件中使用的是外部样式表，type=“text/css”指明该文件的类型是样式表文件；href用于设置样式表文件的地址，可以为绝对地址或相对地址。外部样式表文件中不能包含有任何HTML标签，并且CSS要和HTML文件一起发布到服务器上，这样在浏览器中打开网页时，浏览器会按照HTML网页所链接的外部样式表来显示。1.链接的外部样式表一个链接的外部样式表文件可以应用于多个HTML文件中。当改变这个样式表文件时，所有链接了该样式表的网页都随之改变。因此链接的

15、外部样式表常用在制作大量相同样式的网页中，因为使用这种方法不仅能够减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。同时，在浏览网页时一次性将样式表文件下载，减少了代码的重复下载。1.链接的外部样式表插入内部样式表是通过标签把样式表的内容直接定义在HTML文件的标签内。插入内部样式表的语法格式如下：2.内部样式表其中，标签用来说明所要定义的样式，type=“text/css”说明这是一段样式表代码。标签的加入是为了防止一些不支持CSS的浏览器将之间的CSS代码当成普通的字符串显示在网页中。插入内部样式表就是将所有的CSS样式表信息都列于HTML文件的头部，这些样式就可以在这个HTML

16、文件内部进行调用。如果想对网页一次性插入样式表，则可选用该方法。2.内部样式表插入嵌入样式表是在HTML代码的主体，即内的标签或元素中直接加入样式表。用这种方法可以很直观地对某个元素直接定义样式。插入嵌入样式表的语法格式如下：3.嵌入样式表其中，HTML标签就是页面中标记HTML元素的标签，如、等。sytle参数后面引号中的内容就相当于样式表花括号中的内容，style参数可以应用于HTML文件中的标签，以及除了、和之外的任意网页元素。嵌入样式表的效果只能控制某个标签，所以比较适用于指定网页中某一小段文字的显示风格或某个元素的样式。3.嵌入样式表插入导入的外部样式表是指在样式表的区域内引用一个外

17、部的样式表文件，和插入外部样式表的方法类似，但导入时需要使用import进行声明，一般都放在内来使用。插入导入的外部样式表的语法格式如下：import url(外部样式表文件地址)；4.导入的外部样式表在这里，import语句后的“；”是不可省略的，另外外部样式表文件的扩展名必须为.css，样式表地址同样既可以是绝对地址也可以是相对地址。某些浏览器可能会不支持导入的外部样式表，所以此方法没有链接的样式表常用。4.导入的外部样式表网页中存在最多的元素就是文字，如何高效地控制文字的表现形式是网页设计人员非常关心的问题。设置文字的字体属性是CSS最常见的用途之一。CSS的字体属性可以用于设置字体系列

18、（font-family）、字体大小（font-size）、字体加粗（font-weight）、字体风格（font-style）和字体变形（font-variant）等。5.2 设置文本字体字体系列也就是平常所说的字体，如宋体、黑体、楷体等。在CSS中可以通过设置font-family属性来设置在网页中采用哪种字体系列，其语法格式如下：font-family:字体1,字体2,字体3应用font-family属性可以一次定义多个字体，在浏览器读取字体时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体，则会自动读取第二种字体，若第二种字体也找不到，则自动读取第三种字体，

19、这样依次类推。如果定义的所有字体都找不到，则选用计算机系统的默认字体。5.2.1 字体系列在定义英文字体时，如果英文字体名称是由多个单词组成的，并且单词之间有空格，那么一定要将字体名用引号引起来。例如，font-family:“Times News Roman”。如果在浏览器所在的计算机上找不到指定字体，则按顺序选择字体进行显示，如果所有指定字体都找不到，则用默认字体进行显示。5.2.1 字体系列【例5-1】定义标题2的字体为黑体，定义段落p的字体的先后顺序是隶书、楷体、宋体。样式的代码如下：h2font-family:黑体pfont-family:隶书,楷体,宋体网页中的元素应用该样式表后，

20、在浏览器中的显示效果如图5-1所示。图5-1 设置字体系列网页中文字字体大小的一致性和协调性直接决定了访问者访问网页时的直接视觉感受。通过CSS中字体大小属性font-size的设置，可以精确设置网页中字体的大小。设置字体大小的语法格式如下：font-size:绝对尺寸|相对尺寸|关键字|百分比5.2.2 字体大小绝对尺寸是指字体大小不会受其他元素的影响而变化，如显示分辨率、父元素字体大小等。使用绝对尺寸设置字体大小时，需要指定单位。常见的绝对尺寸单位包括in（英寸）、px（像素）、pt（点或磅值）等，最常用的单位是px。如果没有指定单位，浏览器会默认以px为单位。相对尺寸是指字体大小会继承该

21、元素属性的前一个属性值。绝对尺寸和相对尺寸也可以使用关键字来定义字体大小。5.2.2 字体大小绝对尺寸的关键字有7个，分别是xx-small（极小）、x-small（较小）、small（小）、medium（标准）、large（大）、x-large（较大）、xx-large（极大）。相对尺寸有两个关键字larger（较大）和smaller（较小）。相对尺寸larger是指在它上一个关键字基础上扩大一级，而smaller是指缩小一级。百分比是以父元素字体的大小为参考值，在父元素字体大小的基础上增大或缩小的百分比。5.2.2 字体大小【例5-2】利用绝对尺寸定义类样式p1的字体大小为0.2英寸，类样

22、式p2的字体大小为16px，类样式p3的字体大小为18pt。样式代码如下：.p1font-size:0.2in.p2font-size:16px.p3font-size:18pt网页中元素应用该样式后，在浏览器中的显示效果如图5-2所示。图5-2 用font-size设置字体大小利用关键字定义类样式p1的字体大小为xx-small，类样式p2的字体大小为x-small，类样式p3的字体大小为small，类样式p4的字体大小为medium，类样式p5的字体大小为large，类样式p6的字体大小为x-large，类样式p7的字体大小为xx-large。样式代码如下：.p1font-size: xx

23、-small .p2font-size:x-small.p3font-size:small .p4font-size:medium.p5font-size:large .p6font-size:x-large.p7font-size:xx-large网页中元素应用这些样式的显示效果如图5-3所示。【例5-3】图5-3 使用关键字设置字体大小在CSS中，使用font-weight属性可设置字体加粗效果，相当于HTML中的或标签。设置字体加粗效果的语法格式如下：font-weight: normal | bold | bolder | lighter | numberfont-weight的属性值

24、normal代表正常粗细，bold表示粗体，bolder表示加粗体，lighter表示比正常字体还细的细体，number表示按照数值来进行加粗，数值有100900共9个级别，数值越大字体越粗，而前面的bold值相当于数值700。5.2.3 字体加粗定义5个字体加粗的样式类.p1.p5。样式代码如下：.p1font-weight: normal .p2font-weight: lighter .p3font-weight: bold.p4font-weight: bolder .p5font-weight: 900网页中元素应用这些样式后，在浏览器中的显示效果如图5-4所示。【例5-4】图5-4

25、 设置字体加粗效果在HTML中可以使用标签将字体设置为斜体，而在CSS中使用font-style属性来设置字体的斜体效果。设置字体风格的语法格式如下：font-style:normal | italic | oblique其中，normal表示正常显示文字，italic表示斜体显示文字，oblique表示比斜体italic倾斜角度更大的一种斜体显示方式。5.2.4 设置斜体定义3个字体加粗的样式类.p1.p3。样式代码如下：.p1font-style: normal.p2font-style: italic.p3font-style: oblique网页中元素应用这些样式后，在浏览器中的显示效

26、果如图5-5所示。【例5-5】图5-5 设置斜体效果设置字体变形，就是设置英文字体是否显示为小型的大写字母。在CSS中使用font-variant属性设置英文字体变形效果。设置字体变形的语法格式如下：font-variant：normal|small-caps其中，normal表示正常字体，small-caps表示英文字体显示为小型大写字母。5.2.5 字体变形定义2个字体风格的样式类.p1和.p2，分别代表正常字体和将英文字体显示为小型大写字母。样式代码如下：.p1font-variant: normal.p2font-variant: small-caps网页中元素应用这些样式后，在浏览器

27、中的显示效果如图5-6所示。【例5-6】图5-6 设置英文字体变形效果font是一种复合属性，可以同时对字体的多个属性进行设置，包括字体系列、字体大小、字体风格、字体加粗和字体变形。设置字体多个属性的语法格式如下：font:font-family|font-size|font-style|font-weight|font-variantfont属性用于在设置多个字体属性时进行略写，直接写字体属性的属性值，属性值和属性值之间用空格隔开。5.2.6设置字体的多个属性定义样式.p1，代表字体为黑体，字体大小为18px，字体风格为斜体，字体加粗并将英文字体显示为小型大写字母等多个样式属性。样式代码如下

28、：.p1 font: small-caps bold italic 18px 黑体网页中元素应用这些样式后，在浏览器中的显示效果如图5-7所示。【例5-7】图5-7 设置字体的多个属性CSS中的文本样式是指文本段落的样式。通过设置文本样式的相关属性，可以改变文本缩进、文本对齐、字间隔、文本装饰，行间距等。通常这些外观样式很难通过HTML进行控制，而CSS的文本样式解决了相应的问题。5.3 设置文本样式text-indent属性用来控制文本段落首行缩进的距离。当该属性没有设置属性值时，默认值为不进行文本缩进。设置段落缩进的语法格式如下：text-indent:长度|百分比其中，缩进的长度包括长度

29、值和长度单位，长度单位可以使用之前提到的px（像素）、pt（点或磅值）等所有的单位。百分比则是相对上一级元素的宽度而定的。5.3.1 文本段落缩进定义样式.p1.p3，设置文本段落首行缩进的距离为30px、30pt和10%。样式代码如下：.p1 text-indent:30px.p2 text-indent:30pt.p3 text-indent:10%网页中元素应用这些样式后，在浏览器中的显示效果如图5-8所示。【例5-8】图5-8 设置文本段落缩进text-align属性用来控制文本对齐的方式，其功能类似于Word中的段落对齐方式。设置文本对齐方式的语法格式如下：text-align: l

30、eft | right | center | justify其中，left、right、center、justify分别表示左对齐、右对齐、居中对齐和两端对齐。该属性可以应用于HTML中的任何块级标签，如、等。5.3.2 文本对齐方式定义样式.p1设置文本的水平对齐方式为左对齐，样式.p2为右对齐，样式.p3为居中对齐，样式.p4为两端对齐。样式代码如下：.p1text-align: left.p2text-align: right.p3text-align: center.p4text-align: justify网页中的元素应用这些样式后，在浏览器中的显示效果如图5-9所示。【例5-9】图

31、5-9 设置文本对齐方式word-spacing属性用于设置文本的字间距，其语法格式如下：word-spacing: normal |长度其中，normal是默认设置，表示间距正常。长度包括长度值和长度单位，长度值为正，表示加大字间距；长度值若为负值，表示缩小字间距。5.3.3 文本字间距定义样式.p1设置字（单词）间距为标准间距，样式.p2设置字（单词）间距为10px。样式代码如下：.p1 word-spacing: normal .p2 word-spacing: 10px 网页中元素应用这些样式后，在浏览器中的显示效果如图5-10所示。【例5-10】图5-10 设置文本字间隔5.3.4

32、文本修饰效果text-decoration属性用于对文字添加一些常用的修饰效果，如设置下划线和删除线等。设置文字修饰效果的语法格式如下：text-decoration: underline | overline | line-through | blink | nonetext-decoration属性共有5个属性值。underline表示对文字添加下划线，就像HTML中的元素一样；overline表示给文本添加上划线；line-through表示对文本添加删除线；blink实现文本闪烁效果，这个效果只有Netscape等少数浏览器支持；none表示关闭所有文本修饰，以文本默认的方式显示，也是

33、属性的默认值。若要去掉超链接的下划线就可以使用属性值none。 定义样式.p1设置文字修饰为添加下划线，样式.p2设置文字修饰为添加上划线，样式.p3设置文字修饰为添加删除线，样式.p4设置为关闭所有文本修饰。样式代码如下：.p1 text-decoration: underline.p2 text-decoration: overline.p3 text-decoration: line-through.p4 text-decoration: none网页中元素应用这些样式后，在浏览器中的显示效果如图5-11所示。【例5-11】图5-11 设置文字修饰line-height属性用于设置文本的

34、行间距，其语法格式如下：line-height: normal | 数字 | 长度 | 百分比其中，normal表示使用浏览器默认的行间距，一般由字体大小属性来决定；数字表示行高为该元素字体大小与该数字相乘的结果；长度表示行距由长度单位和长度值确定；百分比表示行距是该元素字体大小的百分比。5.3.5 行间距定义样式.p1设置文字行间距为默认行间距，样式.p2文字行间距为字体大小的1.2倍，样式.p3文字行间距为20px，样式.p4文字行间距为字体大小的160%。样式代码如下：.p1 line-height: normal .p2 line-height: 1.2.p3 line-height:

35、 20px .p4 line-height: 150%网页中元素应用这些样式后，在浏览器中的显示效果如图5-12所示。【例5-12】图5-12 设置行间距网页中的每个元素都有一个前景色和背景色。前景色和背景色决定整个网页的色彩基调和访问者直观的视觉及心理感受。此外，在CSS中，不仅允许应用纯色作为背景，也允许使用背景图像，并且可以利用其特有的一些属性创建丰富的背景效果。5.4 设置颜色和背景在HTML中设置字体颜色使用的是标签的color属性，而在CSS中直接使用color属性设置字体颜色。color属性不仅可以用来设置字体颜色，还可以用来设置网页中每个元素的前景色。用color属性设置的颜色

36、一般都标记为内容的前景色。设置前景色的语法格式如下：color:关键字|RGB值5.4.1 颜色其中，“关键字”表示用颜色的英文名称来设置颜色。例如，red代表红色，black代表黑色，属性值中的RGB值有多重表示方式，如十六进制的RGB值和RGB函数值。下面以红色为例来说明具体的颜色表示。#FF0000是十六进制的RGB值，表示红色。这是一种RGB值的表示方式#FF是十六进制RGB值的缩写，表示红色。RGB（255，0，0）是RGB函数值，表示红色。它常用在一些动态颜色效果的网页中，这里RGB函数取值范围为0255。RGB（100%，0%，0%）也是RGB函数值，表示红色。这里RGB函数取值

37、范围为0%100%。5.4.1 颜色利用关键字red定义样式.p1设置文字颜色为红色，利用RGB颜色值定义样式.p2设置文字颜色为蓝色。样式代码如下：.p1color: red .p2color: #0000ff网页中元素应用这些样式后，在浏览器中的显示效果如图5-13所示。【例5-13】图5-13 设置前景色（文字颜色）在HTML中设置网页的背景颜色可使用标签的bgcolor属性。在CSS中使用background-color属性不仅可以设置网页的背景颜色，还可以设置文字、表格、段落等标记的背景颜色，设置背景颜色的语法格式如下：background-color: 关键字| RGB值 | tr

38、ansparent其中，transparent表示透明色，是背景颜色的初始值。5.4.2 背景颜色利用关键字red定义样式.p1设置背景颜色为红色，利用RGB颜色值定义样式.p2设置背景颜色为蓝色，两个样式的文字颜色均为白色。样式代码如下：.p1 color: white; background-color: red .p2 color: white; background-color: #0000ff网页中元素应用这些样式后，在浏览器中的显示效果如图5-14所示。【例5-14】图5-14 设置背景色在CSS中使用background-image属性来设置元素的背景图像，其语法格式如下：bac

39、kground-image: url | none其中，url表示要插入的背景图像的路径，路径可以为绝对路径或相对路径，图片格式一般以gif、jpg和png格式为主；none为默认值，表示不设置背景图像。5.4.3 背景图像1.插入背景图像定义样式.p1设置利用相对路径插入背景图像bg.gif，样式.p2利用相对路径插入背景图像bg.gif。样式代码如下：.p1background-image:url(imagesbg.gif).p2background-image:url(c:websiteimagesbg.gif)网页中元素应用这些样式后，在浏览器中的显示效果如图5-15所示。在这里，二者

40、的效果相同，只不过图片路径的写法不同，一般建议网页设计中使用相对路径。【例5-15】图5-15 设置背景图片使用background-image属性设置网页的背景图像时，背景图像总是在水平和垂直方向重复显示，并平铺于整个页面窗口。如果将background-image属性和background-repeat属性结合使用，就可以方便地控制背景图像的平铺方式。设置背景图像平铺方式的语法格式如下：background-repeat: repeat | repeat-x | repeat-y | no-repeat其中，repeat表示背景图像在水平和垂直方向进行平铺，是该属性的默认值；属性值repe

41、at-x表示背景图像在水平方向平铺；属性值repeat-y表示背景图像在垂直方向平铺；属性值no-repeat表示背景图像不进行重复。2.设置背景图像平铺方式定义样式.p1.p4，分别表示背景图像在水平和垂直方向上进行平铺，在水平方向上和在垂直方向上进行平铺和不进行平铺。样式代码如下：.p1background-image:url(bg.gif);background-repeat: repeat .p2background-image:url(bg.gif); background-repeat: repeat-x .p3 background-image:url(bg.gif); back

42、ground-repeat: repeat-y .p4 background-image:url(bg.gif); background-repeat: no-repeat 网页中元素应用这些样式后，在浏览器中的显示效果如图5-16所示。【例5-16】图5-16 设置背景图像平铺方式在网页中插入背景图像时，如果设置背景图像属性为no-repeat（不重复），那么该图片会默认显示在背景区域的左上角。通过背景定位background-position属性可以改变背景图像的插入位置，使背景图像出现在需要的位置。设置背景图像位置的语法格式如下：background-position:百分比|长度|关键

43、字3.设置背景图像的位置利用属性值百分比和长度设置图片位置时，需要指定水平位置和垂直位置的值，并且用空格隔开。水平位置的参考点是网页页面的左边，垂直位置的参考点是页面的上边。例如，background-position: 45% 60%表示背景图像的水平位置是左起45%，垂直位置是上起60%；background-position:150px 120px表示背景图像的水平位置是左起150px，垂直位置是上起120px。关键字在水平方向上主要有left、center、right，分别表示居左、居中和居右；关键字在垂直方向上主要有top、center、bottom，分别表示顶端、居中和底端。水平方

44、向和垂直方向的关键字可以相互搭配使用。3.设置背景图像的位置定义样式.p1.p3，设置背景图像在不进行平铺时，分别出现在左上角，距左边界45%、距上边界60%和距左边界30px、距上边界20px处。样式代码如下：.p1background-image:url(bg.gif); background-repeat: no-repeat; background-position: left top.p2background-image:url(bg.gif); background-repeat: no-repeat; background-position: 45% 60%.p3backgrou

45、nd-image:url(bg.gif); background-repeat: no-repeat; background-position: 150px 120px 网页中元素应用这些样式后，在浏览器中的显示效果如图5-17所示。【例5-17】图5-17 设置背景图像的位置边框属性包括边框样式、边框宽度和边框颜色，主要用来设置网页中各个元素的边框。这里的元素可以是一个段落、一张图片或一个表格等。每一个网页都可以看做是一个大的方框，而这个大方框又由不同的网页元素构成许多小的方框。5.5 设置边框在CSS中，为设置边框外观，提供了边框样式属性。利用边框样式属性，可以设置单个边框的样式，设置各条

46、边框样式的语法格式如下：border- style:属性值border-top-style:属性值border-left-style:属性值border-right-style:属性值border-bottom-style:属性值边框属性的常用值包括默认值none（不显示边框）、dotted（点线）、dashed（短线）、solid（实线）和double（双线）等属性。5.5.1 边框样式定义样式.p1设置4个边框均为实线边框，样式.p2定义上边框为实线边框、左边框为点线边框、右边框为短线边框、底边框为双线边框。样式代码如下：.p1border- style：solid.p2border-to

47、p-style:solid;border-left-style: dotted;border-right-style: dashed; border-bottom-style: double网页中元素应用这些样式后，在浏览器中的显示效果如图5-18所示。【例5-18】图5-18 设置边框样式在CSS中，利用边框宽度属性来控制边框的宽度，其有5个属性值，设置边框宽度的语法格式如下：border-top-width：关键字|长度border-left-width：关键字|长度border-right-width：关键字|长度border-bottom-width：关键字|长度边框宽度关键字包括默认

48、值medium（正常边框）、thin（细边框）和thick（粗边框）三种，长度包括长度值和长度单位，这和前面介绍过的使用长度值的各种属性的用法相同。5.5.2 边框宽度定义样式.p1设置4个边框宽度均为thick（粗边框），样式.p2设置上边框的宽度为1px，左边框为thin（细边框）、底边框为thick（粗边框）、右边框的宽度为10px。样式代码如下：.p1border-style:solid; border-width:normal.p2border-style:solid; border-top-width: 1px;border-left-width: thin; border-bot

49、tom-width:thick;border-right-width:10px;网页中元素应用这些样式后，在浏览器中的显示效果如图5-19所示。【例5-19】图5-19 设置边框宽度设置边框的颜色，同样可以选择设置单条边框颜色或者统一设置4个边框的颜色。可以选用的边框颜色属性有5个，设置边框颜色的语法格式如下：border-color：颜色关键字|RGB值border-top-color：颜色关键字|RGB值border-left-color：颜色关键字|RGB值border-right-color：颜色关键字|RGB值border-bottom-color：颜色关键字|RGB值这里的颜色属性值和前面介绍的颜色属性值相同，可以使用颜色关键字或RGB值。5.5.3 边框颜色定义样式.p1设置4个边框颜色均为蓝色，样式.p2设置上边框颜色为红色、左边框为蓝色、下边框为黑色、右边框为绿色。样式代码如下：.p1border-style:solid;border-width:thick;border-color:blue;.p2border-style:solid;border-width:thick;border-top