第4章-part1 CSS 介简.ppt

《第4章-part1 CSS 介简.ppt》由会员分享，可在线阅读，更多相关《第4章-part1 CSS 介简.ppt（86页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章-part1 CSS 介简CSS:样式标记语言 或 表现语言一一CSS样式表样式表(CascadingStyleSheet层叠样式表层叠样式表)1.1.CSS的作用:(Cascading串联，级联）1)弥补HTML显示上的不足，提供丰富的样式；2)将HTML内容和显示样式分离；3)可以进行集中样式管理。例：2.2.样式表定义-由规则构成n n基本语法基本语法:选择符选择符 规则表规则表 由样式属性组成，由样式属性组成，各个样式属性间用各个样式属性间用分号分号隔开，每个样式属性的隔开，每个样式属性的定义格式为定义格式为:属性名：值属性名：值 样式定义中的注解：样式定义中的注解：/*字符串字

2、符串*/要要引引用用样样式式的的对对象象，它它可可以以是是一一个个或或多多个个HTMLHTML标标记记（标标记记之之间间以以逗逗号号分分开开）；也也可可以以是是类类选选择择符符、IDID选选择择符符或或上下文选择符上下文选择符。selector property:value;property:value;.使用内嵌使用内嵌CSS,css1.htm(Do it)CSS,css1.htm(Do it)CSS CSS示例示例 meta http-equiv=Content-Type content=text/html;=gb2312 style type=text/h1 font-family:h1

3、 font-family:隶书隶书,宋体宋体;color:green;color:green .text font-family:.text font-family:宋体宋体;font-size:14pt;color:red;font-size:14pt;color:red#strong font-size:20pt;color:Blue#strong font-size:20pt;color:Blue body=4 h1h1 这是一个这是一个CSSCSS示例！示例！span span 这行文字应是红色的。这行文字应是红色的。p p 文字应是红色的。文字应是红色的。梦梦 span id=之之

4、都都spanspan与与与与div-CSSdiv-CSS与与与与XHTMLXHTML沟通的桥梁沟通的桥梁沟通的桥梁沟通的桥梁n nXHTMLXHTML只是负责内容只是负责内容.文字标签与字块标签一般都有意义文字标签与字块标签一般都有意义,而而spanspan与与divdiv并没有什么意义并没有什么意义,它们被广泛的与它们被广泛的与CSSCSS联合使用联合使用.n nspanspan是内联的是内联的,代表一行代表一行.n ndivdiv代表一块代表一块.div id=梦梦 之之 都都 id,id,classclass 属性属性 -元素链接一个样式元素链接一个样式.text.text 类类(cla

5、ssclass 属性属性)的的链接链接 (类的普通用法类的普通用法 ：class.textclass.text ）#strong-id#strong-id 属性属性的的链接链接 3.3.样式引用样式引用（1）链接到外部样式表 a)将样式表定义为一个独立的CSS样式文件，扩展名为.css；b)使用该样式表的HTML文件在头部用标记链接到这个CSS样式文件即可。样式定义存放于文件样式定义存放于文件样式定义存放于文件样式定义存放于文件外部外部外部外部csscss.csscsscsscss，外部外部外部外部csscss.htmhtmhtmhtm引用该样式表。引用该样式表。引用该样式表。引用该样式表。(

6、Do it)(Do it)(Do it)(Do it)【style.cssstyle.css文件文件】：h1 font-family:“h1 font-family:“隶书隶书”,“,“宋宋体体”;color:#ff8800;color:#ff8800p background-color:yellow;color:black;font-size:12pt;p background-color:yellow;color:black;font-size:12pt;.text font-family:.text font-family:宋体宋体;font-size:14pt;color:red;fo

7、nt-size:14pt;color:red【css1.htmcss1.htm文件文件】：link rel=Stylesheet type=text/css href=css.css media=screen/链接外部链接外部CSSCSS文件文件文字是红色的。文字是红色的。底色是黄色。底色是黄色。注：注：CSSCSS样式文件不包含样式文件不包含标记！标记！REL：定义连接的文件和定义连接的文件和HTML文档之间的关系文档之间的关系；HREF：指出指出CSS样式文件样式文件；TYPE：样式的类别；：样式的类别；MEDIA：接受样式表的介质：接受样式表的介质。3.3.样式引用（续）样式引用（续）（

8、2 2）import(import(引入引入)外部样式表外部样式表n n在在HTMLHTML文件的头部引入，格式：文件的头部引入，格式：import URL(import URL(外部外部css.css);css.css);（3 3）嵌入样式表嵌入样式表n n利用利用标记将样式表嵌入到标记将样式表嵌入到HTMLHTML文件的头部文件的头部style type=text/h1 font-family:h1 font-family:隶书隶书,宋体宋体;color:#ff8800;color:#ff88003.3.样式引用（续）样式引用（续）（4）内联样式-在HTML中用style定义:方法：将标记

9、的方法：将标记的stylestyle属性值赋为所定义的样式规则。属性值赋为所定义的样式规则。n n与嵌入样式表的区别：作用域不同与嵌入样式表的区别：作用域不同n n内联样式使样式单失去了本来的意义,因此应该尽量避免使用内联样式.设有两个样式表文件设有两个样式表文件设有两个样式表文件设有两个样式表文件s1.csss1.csss1.csss1.css、s2.csss2.csss2.csss2.css和一个和一个和一个和一个HTMLHTMLHTMLHTML文件文件文件文件example_css.htmexample_css.htmexample_css.htmexample_css.htm 【文件文

10、件s1.csss1.css】：h2 font-family:h2 font-family:隶书隶书;color:#ff8800;color:#ff8800p color:black;background-color:yellow;font-size:12pt;p color:black;background-color:yellow;font-size:12pt;【文件文件s2.csss2.css】：h3 font-family:h3 font-family:宋体宋体;color:blue;font-style:italic;color:blue;font-style:italic;.text

11、 font-family:.text font-family:宋体宋体;font-size:10pt;color:red;font-size:10pt;color:red【文件文件example_css.htmexample_css.htm】：CSSCSS综合应用示例综合应用示例link=s1.css（续）（续）（续）（续）style type=text/a:visited color:#0000FF;text-decoration:nonea:visited color:#0000FF;text-decoration:nonea:link font-family:a:link font-fa

12、mily:宋体宋体;font-size:9pt;color:#0000FF;font-size:9pt;color:#0000FF;text-decoration:nonetext-decoration:nonea:hover font-family:a:hover font-family:宋体宋体;font-size:12pt;color:;font-size:12pt;color:#003333;background-color:#FFCC99;text-decoration:#003333;background-color:#FFCC99;text-decoration:nonenone

13、import URL(s2.css);import URL(s2.css);（续）（续）（续）（续）这是一个这是一个CSSCSS样式文件综合示例！样式文件综合示例！这行文字应是红色的。这行文字应是红色的。这一段的底色应是黄色。这一段的底色应是黄色。这行文字由这行文字由s2.csss2.css中的样式控制，应是斜体、蓝色中的样式控制，应是斜体、蓝色 a href=style.htm超链接超链接 CSS CSS样式使用有四种方式样式使用有四种方式:链接、引入、嵌入和局链接、引入、嵌入和局部引用部引用 二二.相关的标记和属性相关的标记和属性1.类型类型选择符选择符(TypeSelector)以以HT

14、ML的的标记作为标记作为选择符选择符的的名称名称 h1h1 color:red;color:red;body body color:color:greengreen;div div color:red;color:red;n n类选择符在标记中定义；.className(有点）classclass属性值：在体部标记中设置为类名。属性值：在体部标记中设置为类名。p class=“”abcabc n n类选择符的作用：在样式表中定义具有样式值的类。n n定义格式：定义格式：n n 标记名标记名.类名类名 规则规则1;1;规则规则2;.2;.n n .类名类名 规则规则1;1;规则规则2;.2;.可

15、以使不同的可以使不同的标记标记遵循遵循相同的相同的样样式式可以使相同的可以使相同的标记具有不同标记具有不同的样式的样式2.类选择符类选择符(ClassSelector)style type=text/.back background-.back background-color:greencolor:green;p.back1 p.back1 background-color:#666666;background-color:#666666;p.back2 p.back2 background-color:red;background-color:red;h1 line h1 line h2

16、line h2 line 本段文字的底色为本段文字的底色为#666666#666666 本段文字的底色为本段文字的底色为red red 这是另一段这是另一段相同的标记相同的标记p具有不同的样式具有不同的样式back使不同的使不同的标记标记h1,h2遵循相同的遵循相同的样样式式3.id选择符选择符（IDSelector）和和id属性属性n n定义的格式：定义的格式：#id#id名名 规则规则1;1;规则规则2;.2;.n n与类选择符的区别：与类选择符的区别：n nid id选择符只能引用一次；类选择符可以多次引用选择符只能引用一次；类选择符可以多次引用.#colorid1 color:gree

17、n;#colorid1 color:green;style type=text/#colorid1 color:green;#colorid1 color:green;ID ID选择符与选择符与IDID属性结合使用属性结合使用,可对特定标记进行样式控制可对特定标记进行样式控制.4.上下文选择符上下文选择符(ContextualSelector)=包含包含选择符选择符n n定义嵌套标记的样式定义嵌套标记的样式:由两个或多个单一选择符组成，中间用空格分隔由两个或多个单一选择符组成，中间用空格分隔.h2 span color:red;h2 span color:red;这行文字应是红色的。这行文字应

18、是红色的。这行文字应是黑色的。这行文字应是黑色的。这一段是黑色的。这一段是黑色的。5.5.伪类伪类(pseudo-classes)-(pseudo-classes)-区别标记的不同状态区别标记的不同状态,-设置特殊的效果设置特殊的效果.n n定义格式定义格式(语法语法):):选择符选择符:伪类伪类 属性属性:值值 n n锚位(anchor)伪类:a:linka:link color:#FF0000 /*color:#FF0000 /*未访问的链接未访问的链接*/a:visiteda:visited color:#00FF00 /*color:#00FF00 /*已访问的链接已访问的链接*/a:

19、hovera:hover color:#FF00FF /*color:#FF00FF /*鼠标移过的链接鼠标移过的链接*/a:activea:active color:#0000FF /*color:#0000FF /*选中的链接选中的链接*/6.群组群组选择符选择符 h1,h1,h2h2,p,p,span color:red;span color:red;这行文字应是红色的这行文字应是红色的 这行文字应是红色的这行文字应是红色的 红色的红色的三三.样式的继承和作用顺序样式的继承和作用顺序 1.1.样式继承n n相对值继承方式：即以百分比继承。相对值继承方式：即以百分比继承。p.class1f

20、ont-size:12pt;p.class2font-size:200%p.class3font-size:100%.第一段第一段第二段第二段第三段第三段.2.2.样式的作用顺序样式的作用顺序n n内联样式中所定义的样式的优先级最高；内联样式中所定义的样式的优先级最高；n n其它的样式表按其在其它的样式表按其在HTMLHTML文件中出现或被引用的文件中出现或被引用的顺序，越后出现，优先级越高；顺序，越后出现，优先级越高；n n选择符的作用优先顺序为：选择符的作用优先顺序为：上下文选择符、类选择符、上下文选择符、类选择符、id id选择符，选择符，优先级依次降低；优先级依次降低；n n未在任何文

21、件中定义的样式，未在任何文件中定义的样式，将遵循浏览器的缺省样式。将遵循浏览器的缺省样式。例：例：例：例：do itdo it 样式的作用顺序样式的作用顺序 style type=text/p color:red;font-size:22pt;p color:red;font-size:22pt;p.c1color:green;font-size:12pt;p.c1color:green;font-size:12pt;p font-size:16pt;text-align:center;p font-size:16pt;text-align:center;第一段第一段 第二第二段段 第三第三段

22、段四四.CSS属性属性 1.1.字体属性字体属性(font)(font)2.2.文本属性文本属性(text)(text)(文本排版文本排版)3.3.容器属性容器属性(box)(box)(父与子元素的排版父与子元素的排版)4.4.颜色和背景属性颜色和背景属性5.5.floatfloat与与clearclear1.字体属性（字体属性（font)n n字体名称（字体名称（font-familyfont-family）n n字号（字号（font-sizefont-size）n n字体风格（字体风格（font-stylefont-style）n n字体加粗（字体加粗（font-weightfont-we

23、ight）n n字体变化（字体变化（font-variantfont-variant）n n字体综合设置（字体综合设置（fontfont）属性属性 h3 font-family:h3 font-family:宋体宋体;font-size:22pt;font-size:22pt;color:bluecolor:blue;font-style:italic;font-style:italic;1.1 字体名称（字体名称（font-family）语法语法:font-family:font-family:|,font-family font-family 规定元素的字体系列。规定元素的字体系列。fon

24、t-family font-family 属性的值是用于某个元素的属性的值是用于某个元素的字体系列字体系列名或名或具体字体名具体字体名的一个优先表。的一个优先表。浏览器会使用它可识别的第一个值。浏览器会使用它可识别的第一个值。n n具体字体的名称：具体字体的名称：“楷体楷体”,times,times、arialarial。n n字体系列名称字体系列名称,比如：比如：“serif”serif”、“sans-sans-serif”.serif”.p font-family:“p font-family:“楷体楷体”,Times,serif,Times,serif n n提示：提示：提示：提示：使用

25、逗号分割每个值，使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。并始终提供一个类族名称作为最后的选择。1.2 字号（字号（font-size）语法语法:font-size:font-size:|xx-small|x-small|small|medium|large|x-large|xx-large xx-small|x-small|small|medium|large|x-large|xx-large larger|smaller larger|smaller 12 pt 12 pt 单位单位:pt:pt或或pxpx像素像素,in,in英寸英寸,cm,cm厘米，厘米，2em 2em

26、emem-同行字的倍数，同行字的倍数，2em=22em=2字宽，字宽，一般一般不用不用emem 200%(200%(相对父元素的字号大小相对父元素的字号大小)例：例：p.class1 font-size:12pt;/*parent*/p.class1 font-size:12pt;/*parent*/p.class2 font-size:50%/*son*/p.class2 font-size:50%/*son*/n n初始值初始值:medium:medium1.3 字体风格（字体风格（font-style）语法语法:font-style:font-style:允许值允许值:normal|it

27、alic|oblique:normal|italic|oblique 初始值初始值:normal:normal字体风格属性以三个方法的其中一个来定义字体风格属性以三个方法的其中一个来定义:normal(normal(普通普通)，italic(italic(斜体斜体),oblique(),oblique(倾斜倾斜)H1 font-style:oblique H1 font-style:oblique 1.4 字体加粗（字体加粗（font-weight）语法语法:font-weight:font-weight:n n允许值允许值:normal|bold|bolder|lighter|100|200

28、|300|400|500|:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900600|700|800|900n n初始值初始值:normal:normal 字体加粗属性用作说明字体的加粗。当其它值绝对时，字体加粗属性用作说明字体的加粗。当其它值绝对时，bolderbolder和和lighterlighter值将相对地成比例增长。值将相对地成比例增长。n n注意注意:因为不是所有的字体都有九个有效的加粗显示，一些加粗的会因为不是所有的字体都有九个有效的加粗显示，一些加粗的会在指定下组合。如果指定的加粗无效，会按以下原则选择

29、在指定下组合。如果指定的加粗无效，会按以下原则选择:n n500 500 会被会被 400400代替，反之亦是代替，反之亦是.n n字体加粗的定义例子如下字体加粗的定义例子如下:n nH1 font-weight:800 H1 font-weight:800 1.5 字体变化（字体变化（font-variant）-字字体变形体变形语法语法:font-variant:font-variant:n n允许值允许值:normal|small-caps|:normal|small-caps|其他其他n n初始值初始值:normal:normaln n字体变形属性决定了字体的显示是字体变形属性决定了字体

30、的显示是normal(normal(普通普通)还是还是small-caps(small-caps(小型大写字母小型大写字母)。当文字中所有。当文字中所有字母都是大写的时候，小型大写字母字母都是大写的时候，小型大写字母(值值)会显会显示比小写字母稍大的大写字符。稍后版本的示比小写字母稍大的大写字符。稍后版本的CSSCSS将会支持附加的变形，如收缩、扩张、小写数将会支持附加的变形，如收缩、扩张、小写数码或其它自定义的变形。码或其它自定义的变形。1.6 字体综合设置（字体综合设置（font）属性）属性 n n语法语法:font:font:n n允许值允许值:|?/?n n初始值初始值:未定义未定义

31、n n字体属性用作不同字体属性的略写，字体属性用作不同字体属性的略写，特别是行高特别是行高。例。例:P font:italic bold 12pt/14pt Times,serif P font:italic bold 12pt/14pt Times,serif 指定该段为指定该段为bold(bold(粗体粗体)和和italic(italic(斜体斜体)Times)Times或或serifserif字体，字体，1212点点大小，大小，行高为行高为1414点点。2.2.文本属性文本属性n n字符间隔（字符间隔（letter-spacingletter-spacing）h1 letter-spac

32、ing:10pt h1 letter-spacing:10pt n n文本修饰（文本修饰（text-decorationtext-decoration）n n文本横向排列（文本横向排列（text-aligntext-align）它与它与 HTMLHTML的的“ALIGN”ALIGN”属性相似属性相似 text-align text-align：left|right|center|justify left|right|center|justify leftleft左对齐左对齐,center,center文字居中，文字居中，justifyjustify两端对齐两端对齐 n n文本纵向排列（文本纵向

33、排列（vertical-alignvertical-align）n n文本缩排（文本缩排（text-indenttext-indent）n n行高（行高（line-heightline-height）2.1 letter-spacing属性属性n nletter-spacing:letter-spacing:值值值值=normal|=normal|=12pt,=12pt,pxpx,cm,cm,emem 等。等。初始值：初始值：normal normal 百分比值：不适用百分比值：不适用n n letter-spacingletter-spacing属性定义了每一个字符之间的额外属性定义了每一个

34、字符之间的额外间距，该属性值必须以长度为单位，且正负值都间距，该属性值必须以长度为单位，且正负值都是允许的。是允许的。2.2 文本修饰（文本修饰（text-decoration）text-decorationtext-decoration：值：值值值=none|underline|=none|underline|overlineoverline|line-through|blink|line-through|blink 初始值：初始值：none none 百分比值：不适用百分比值：不适用 这个属性能够定义元素中文字的这个属性能够定义元素中文字的“装饰装饰”样式，这些样式样式，这些样式总共有五种

35、形式。总共有五种形式。nonenone无无 underlineunderline下划线下划线 overlineoverline 上划线上划线 line-throughline-through删除线删除线 blinkblink闪烁闪烁 3.3.容器（盒子）属性容器（盒子）属性黑框包围的一个方块（Box）BoxBox是父元素是父元素是父元素是父元素bodybodyBorderBorder是子元素是子元素是子元素是子元素 p pContentContent是是是是p p中的文字中的文字中的文字中的文字 CONTENT CONTENT 填充填充填充填充 CSS:CSS:p margin-left:2e

36、m;margin-top:3pt p margin-left:2em;margin-top:3pt p padding-left:2em;padding-top:3pt p padding-left:2em;padding-top:3pt CSS 中有个重要的概念中有个重要的概念-盒子模型盒子模型 Box model n n盒子里由外至里依次是：盒子里由外至里依次是：盒子里由外至里依次是：盒子里由外至里依次是：n nmargin margin 外边距外边距 n nborder border 边框边框 n nPadding Padding 内边距内边距n ncontent content 内容（

37、文本，图片等内容（文本，图片等)n n外边距外边距(margin)(margin)是用来设置一个元素所占空间的边缘到父是用来设置一个元素所占空间的边缘到父是用来设置一个元素所占空间的边缘到父是用来设置一个元素所占空间的边缘到父元素之间的距离。元素之间的距离。元素之间的距离。元素之间的距离。n n边框属性边框属性边框属性边框属性 (border)(border)用来设定一个元素的边线。用来设定一个元素的边线。用来设定一个元素的边线。用来设定一个元素的边线。n n内边距内边距(padding)(padding)是用来设置元素内容到元素边框的距离。是用来设置元素内容到元素边框的距离。是用来设置元素内

38、容到元素边框的距离。是用来设置元素内容到元素边框的距离。n nCSS CSS 背景属性指的是背景属性指的是背景属性指的是背景属性指的是 content content 和和和和 padding padding 区域。区域。区域。区域。n nCSS CSS 属性中的属性中的属性中的属性中的 width width 和和和和 height height 指的是指的是指的是指的是 content content 区域的宽和高。区域的宽和高。区域的宽和高。区域的宽和高。CSS外边距外边距,内边距内边距外边距外边距属性是用来设置元素所占空间的边缘到父元属性是用来设置元素所占空间的边缘到父元属性是用来设置

39、元素所占空间的边缘到父元属性是用来设置元素所占空间的边缘到父元素之间的距离。素之间的距离。素之间的距离。素之间的距离。.d1 margin-left:1cm /*.d1 margin-left:1cm /*设定左边距的宽度设定左边距的宽度设定左边距的宽度设定左边距的宽度*/margin-right,margin-top,margin-bottommargin-right,margin-top,margin-bottom 内边距内边距属性是用来设置元素内容到元素边界的距离。属性是用来设置元素内容到元素边界的距离。属性是用来设置元素内容到元素边界的距离。属性是用来设置元素内容到元素边界的距离。.d

40、1 padding-left:1cm.d1 padding-left:1cm padding-right,padding-top,padding-bottompadding-right,padding-top,padding-bottom例子见例子见例子见例子见p67-69p67-694.4.颜色和背景属性颜色和背景属性 -为网页带来丰富的视觉效果为网页带来丰富的视觉效果n n（前景）颜色（前景）颜色（colorcolor）n n背景颜色（背景颜色（background-colorbackground-color）n n背景图象（背景图象（background-imagebackground-

41、image）n n背景重复（背景重复（background-repeatbackground-repeat）n n背景附属方式背景附属方式(background-attachment)(background-attachment)n n背景图象位置背景图象位置(background-position)(background-position)n n背景属性（背景属性（backgroundbackground）颜色（颜色（color）n n1)RGB(255,0,0)-1)RGB(255,0,0)-redredn n2)#FF0000-2)#FF0000-redred (16 (16进制进制)n

42、 n3)red -3)red -颜色名词颜色名词背景图象重复背景图象重复(doit)css目录中的目录中的background示例示例1.htm#content border:1px solid#0000FF;height:200px;background-image:url(bg.gif);#content border:1px solid#0000FF;height:200px;background-image:url(bg.gif);background-repeat:repeat;color:red background-repeat:repeat;color:red#contentx

43、 height:200px;background-image:url(bg.gif);background-repeat:repeat-x;#contentx height:200px;background-image:url(bg.gif);background-repeat:repeat-x;#contenty height:400px;background-image:url(bg.gif);background-repeat:repeat-y;#contenty height:400px;background-image:url(bg.gif);background-repeat:re

44、peat-y;这是一个这是一个backgroundbackground示例！示例！文字文字1 1 repeat=repeat=文字文字2 2 repeat-x -repeat-x -文字文字3 3 repeat-y-repeat-y-文字有多长，文字有多长，背景有多长背景有多长-repeat(default value)value=repeat|repeat-x|repeat-y|no-repeat value=repeat|repeat-x|repeat-y|no-repeatrepeat-repeat-y y加加DOCTYPE，!DOCTYPE html PUBLIC-/W3C/DTD X

45、HTML 1.0 Transitional/EN#contentx height:200px;background-image:url(bg.gif);background-repeat:repeat-x;#contentx height:200px;background-image:url(bg.gif);background-repeat:repeat-x;span id=文字文字2 2 repeat-x -repeat-x -span span 是是inlineinline元素，元素，xhtmlxhtml中它不认中它不认heightheight属性。属性。方法：方法：把把spanspan

46、改为改为div.(div.(改为改为p p不好，因为不好，因为p p有行距有行距)!DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Transitional/EN http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd image image#content border:1px solid#0000FF;height:200px;background-image:url(bg.gif);#content border:1px solid#0000FF;height:200px;background-image

47、:url(bg.gif);background-repeat:repeat;color:red;width:50%;background-repeat:repeat;color:red;width:50%;float:left;float:left;#contentx height:200px;background-image:url(bg.gif);background-repeat:repeat-x;#contentx height:200px;background-image:url(bg.gif);background-repeat:repeat-x;color:red;width:4

48、9%;color:red;width:49%;#contenty height:400px;background-image:url(bg.gif);background-repeat:repeat-y;#contenty height:400px;background-image:url(bg.gif);background-repeat:repeat-y;color:red;color:red;clear:both;clear:both;文字文字repeat=repeat=文字文字 repeat-x -repeat-x -文字文字repeat-y-repeat-y-加加 float,cle

49、ar背景附属方式背景附属方式(background-attachment)value=scroll|fixed value=scroll|fixed scroll scroll 是缺省值。是缺省值。背景图象位置背景图象位置在其容器中的位在其容器中的位置置background-positionbackground-position:left:left对齐对齐 toptop对齐对齐对齐对齐=绝对值绝对值|相对值相对值绝对值绝对值=20px|left|right|top|bottom=20px|left|right|top|bottom 绝对值是指绝对值是指背景图象的背景图象的(leftxleftx

50、,topytopy)相对值相对值=30%=30%相对值是指相对值是指背景图象的背景图象的(cneterxcneterx,centerycentery)例如：例如：background-position:30%20px;background-position:30%20px;-30%30%-70%-70%-30%20px#content height:#content height:3 300px;background-image:url(bg.gif);background-repeat:no-repeat;00px;background-image:url(bg.gif);backgroun