1 / 56

网页设计与制作教程

网页设计与制作教程. 机械工业出版社同名教材 配套电子教案 2005.8. 第 3 章 高效定制网页样式 ——CSS. 3.1 CSS 简介 3.2 在网页中插入样式表的方法及定义 3.3 多重样式表的层叠 3.4 样式表的属性单位 3.5 样式表的常用属性. 3.1 CSS 简介.

nevina
Télécharger la présentation

网页设计与制作教程

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计与制作教程 机械工业出版社同名教材 配套电子教案 2005.8

  2. 第3章 高效定制网页样式——CSS 3.1 CSS简介 3.2 在网页中插入样式表的方法及定义 3.3 多重样式表的层叠 3.4 样式表的属性单位 3.5 样式表的常用属性

  3. 3.1 CSS简介 CSS（Cascading Style Sheets）中文翻译为层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、色彩以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。

  4. 3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表 1. 在HTML文档中定义样式表 可以在HTML文档的<html>和<body>标记之间插入一个<style>...</style>，在其中定义样式。其格式为： <style type="text/css"> <!-- 选择符1{属性:属性值; 属性:属性值 ...} /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值 ...} ... 选择符n{属性:属性值; 属性:属性值 ...} --> </style> 【例3-1】【例3-2】

  5. 3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表 2. 用class选择符定义样式 用类选择符能够把相同的标记分类定义为不同的样式。其格式为： <style type="text/css"> <!-- 标记1.类名称1{属性:属性值; 属性:属性值 ...} 标记2.类名称2{属性:属性值; 属性:属性值 ...} ... 标记3.类名称n{属性:属性值; 属性:属性值 ...} --> </style> 【例3-3】

  6. 3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表 3. 用id选择符定义样式 id选择符是用来对某个单一元素定义单独的样式。定义id选择符时要在id名称前加上一个“#”号。与类选择符相同，定义id选择符也有两种方法。 用id选择符定义样式的格式为： <style type="text/css"> <!-- #id名1{属性:属性值; 属性:属性值 ...} #id名2{属性:属性值; 属性:属性值 ...} ... #id名n{属性:属性值; 属性:属性值 ...} --> </style>

  7. 3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表 还有一种用法，在选择符中加上HTML“标记”名，其格式为： <style type="text/css"> <!-- 标记1#id名1{属性:属性值; 属性:属性值 ...} 标记2#id名2{属性:属性值; 属性:属性值 ...} ... 标记n#id名n{属性:属性值; 属性:属性值 ...} --> </style> 【例3-4】

  8. 3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表 4. 使用span选择符 span在样式表中作为一个选择符使用，而且它也能接受style、class和id。span元素加入到HTML中，它允许网页制作者给出样式，但无须附加在一个HTML的结构标记上。 span是一个内嵌元素，所以它可以作为HTML中的元素使用。span没有结构的意义，它纯粹是应用样式，所以当样式表失效时它就失去任何作用。 【例3-5】

  9. 3.2 在网页中插入样式表的方法及定义 3.2.1 内部样式表 5. 使用div选择符 div在功能上与span相似，最主要的差别在于div（division，部分的简称）是一个块级标记。div可以包含段落、标题、表格甚至其它部分。这使div便于建立不同集成的类，如章节、摘要或备注。 【例3-6】

  10. 3.2 在网页中插入样式表的方法及定义 3.2.2 行内样式 行内样式（Inline styles）也称内嵌样式，是在HTML标记中插入style属性，再定义要显示的样式，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单的对某个标记单独定义样式。但是，利用这种方法定义样式时，作用范围只可控制该标记。其格式为： <标记 style="属性:属性值; 属性:属性值 ..."> style属性可以应用于除basefont、param和script之外的任意body标记（包括body本身）。 【例3-7】

  11. 3.2 在网页中插入样式表的方法及定义 3.2.3 链入外部样式表文件 链入外部样式表（Linked styles）就是当浏览器读取到HTML文档的样式表链接标记时，将向所链接的外部样式表索取样式。样式表保存为一个样式表文件（.css），然后在网页中用<link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>...</head>区内。其格式为： <head> ... <link rel="stylesheet" href="外部样式表文件名.css" type="text/css"> ... </head> 【例3-8】

  12. 3.2 在网页中插入样式表的方法及定义 3.2.4 导入外部样式表文件 导入外部样式表（Imported styles）就是当浏览器在读取HTML文件时，复制一份样式表到这个HTML文件中。导入外部样式表是指在内部样式表的<style>里导入一个外部样式表文件。其格式为： <style type="text/css"> <!-- @import url("外部样式表的文件名1.css"); @import url("外部样式表的文件名2.css"); 其他样式表的声明 --> </style> 【例3-9】

  13. 3.3 多重样式表的层叠 根据规定，样式表的优先级别从到到低为：行内样式、内部样式、链接样式、导入样式和缺省浏览器样式。浏览器将按照上述顺序执行样式表的规则。 样式表的层叠性就是继承性，样式表的继承规则是，外部的元素样式会保留下来继承给这个元素所包含的其他元素。所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。遇到冲突的地方会以最后定义的为准。

  14. 3.4 样式表的属性单位 3.4.1 长度、百分比单位 1. 长度单位 长度单位有相对长度单位和绝对长度单位两种类型。 相对类型是指相对于该属性前一个属性的单位值为基础，来完成目前的设置。 绝对类型使用的单位，将不会随着显示设备的不同而改变，换句话说，属性值使用绝对单位时，不论在哪种设备上显示都是一样的，如屏幕上的1cm与打印机上的1cm是一样长的。 相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。 一个长度的值由可选的正号“+”或负号“-”，接着一个数字，后跟标明单位的两个字母组成。在一个长度值之中不能有空格。

  15. 3.4 样式表的属性单位 3.4.1 长度、百分比单位 2. 百分比单位 百分比单位也是一种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或是其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。 一个百分比值由可选的正号“+”或负号“-”，接着一个数字，后跟百分号“%”。例如： p{ line-height: 150% } /* 本段文字的高度为标准行高的1.5倍 */ hr{ width: 80% } /* 线段长度是相对于浏览器窗口的80% */ 注意，不论使用哪种单位，在设置时，数值与单位间不要加空格。

  16. 3.4 样式表的属性单位 3.4.2 色彩单位 在HTML标记中只提供了两种设置色彩的方法：十六进制数和色彩名称。CSS则提供了三种定义色彩的方法：十六进制数、rgb函数（整数或百分数）和色彩名称。 1. 用十六进制数方式表示色彩值 要使用RGB概念指定色彩时，使用一个#号，加上6个十六进制的数字表示，表示方法为：#RRGGBB。其中前两个数字代表红光强度（Red），中间两个数字代表绿光强度（Green），后两个数字代表蓝光强度（Blue）。以上三个参数的取值范围为：00～FF，参数必须是两位数。对于只有一位的，应在前面补零。这种方法共可表示256×256×256种色彩，即16M种色彩。而红色、绿色、黑色、白色的十六进制设置值分别为：#ff0000、#00ff00、#0000ff、#000000、#ffffff。例如：div { color: #ff0000 }

  17. 3.4 样式表的属性单位 3.4.2 色彩单位 2. 用rgb函数方式表示色彩值 在CSS中，可以用rgb函数设置出所要的色彩。语法为：rgb(R,G,B)。R为红色值，G为绿色值，B为蓝色值。三个参数可取正整数值或百分数值，正整数值的取值范围为：0～255；百分数值的取值范围为色彩强度的百分比：0.0%～100.0%。例如： div { color: rgb(132,20,180) } div { color: rgb(12%,200,50%) } 3. 用色彩名称方式表示色彩值 在CSS中也提供了与HTML一样的用色彩名称表示色彩的方式。CSS只提供了16种色彩名称，见表2-1。例如： div {color: red }

  18. 3.5 样式表的常用属性 3.5.1 字体属性（Font Properties） 1. 字体（font-family） 语法：font-family : 字体名称 参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。 说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名称。 示例： body { font-family: "gill sans", "new baskerville", serif } h2 { color: red; margin: 10px; font-family: 华文新魏, 楷体_GB2312 }

  19. 3.5 样式表的常用属性 3.5.1 字体属性（Font Properties） 2. 字号（font-size） 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 参数：绝对尺寸根据对象字体进行调节。可选xx-small | x-small | small | medium | large | x-large | xx-large 相对尺寸是相对于父对象中字体尺寸进行相对调节。 百分数取值是基于父对象中字体的尺寸。 示例：所有包含在<p>中<b>的文字的尺寸将是30points，因为<b>中的字号是相对于<p>的字号（20pt）的1.5倍。 p { font-size: 20pt } b { font-size: 1.5em } h3 { font-size: 20px }

  20. 3.5 样式表的常用属性 3.5.1 字体属性（Font Properties） 3. 字体风格（font-style） 语法：font-style : italic | oblique | normal 参数：italic为斜体。对于没有斜体变量的特殊字体，将应用oblique。normal为正常的字体，声明此值将取消之前设置。 说明：将文本字体设置为斜体。 示例： h3 { font-style: italic }

  21. 3.5 样式表的常用属性 3.5.1 字体属性（Font Properties） 4. 字重（font-weight） 语法：font-weight : bold | number | normal 参数： bold为粗体，相当于number为700，也相当于b标记的作用。number取值100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。normal为正常的字体，相当于number为400，声明此值将取消之前设置。 说明：设置文本字体的粗细。作用由用户端系统安装的字体的特定字体变量映射决定，系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。 示例： P { font-weight: bold } h1 { font-weight:800 }

  22. 3.5 样式表的常用属性 3.5.1 字体属性（Font Properties） 5. 文字变形（text-transform） 语法：text-transform: uppercase | lowercase | capitalize | none 参数：uppercase使所有字母大写显示，lowercase使所有字母小写显示，capitalize使每个单词的第1个字母大写显示，none使所有继承的文字变形参数被忽略，文字将以原来的形式显示。 说明：设置字母的大小写。 示例： h1 { text-transform: uppercase } b { text-transform: capitalize }

  23. 3.5 样式表的常用属性 3.5.1 字体属性（Font Properties） 6. 文字修饰（text-decoration） 语法：text-decoration : underline || blink || overline || line-through | none 参数：underline为下划线，blink为闪烁，overline为上划线，line-through为贯穿线，none为无装饰。 说明：设置对象中文本的修饰。对象a、u、ins的文字修饰默认值为underline。对象strike、s、del的默认值是line-through。如果应用的对象不是文本，则此属性不起作用。 示例： div { text-decoration : underline overline; } h1 { text-decoration : underline; }

  24. 3.5 样式表的常用属性 3.5.1 字体属性（Font Properties） 7. 字体（font） 语法：font : font-style || font-variant || font-weight || font-size || line-height || font-family 参数：声明方式请参阅各参数对应的属性。 说明：设置对象中的文本特性。本属性是复合属性。声明方式参数必须按照语法中的排列顺序。每个参数仅允许有一个值。忽略时将使用其参数对应的独立属性的默认值。 示例：将<li>文字设置为尺寸12points，行高度16points，字型采用宋体。使用字体属性时，必须设定字号和字型，但可以选择是否设定行高度。设定的顺序必须严格按照语法中的顺序。

  25. 3.5 样式表的常用属性 3.5.2 文本属性（Text Properties） 1. 字间距（word-spacing） 语法：word-spacing : length | normal 参数：length是由数字和单位标识符组成的长度值，允许为负值。normal恢复为默认间距。 说明：设置对象中的单词之间插入的空格数。 示例： h3 { word-spacing: 1em } div { word-spacing : 10px }

  26. 3.5 样式表的常用属性 3.5.2 文本属性（Text Properties） 2. 字母间距（letter-spacing） 语法：letter-spacing : length | normal 参数：length是由数字和单位标识符组成的长度值，允许为负值。normal恢复为默认间隔。 说明：设置对象中的文字之间的间隔。该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。 示例： div {letter-spacing:6px } div {letter-spacing:0.5pt } h3 { letter-spacing: 10px }

  27. 3.5 样式表的常用属性 3.5.2 文本属性（Text Properties） 3. 行高（line-height） 语法：line-height : length | normal 参数：length为由百分比数字或由数字、单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。 示例：用数字设行距。数字设定行高的时候，浏览器将利用字号来确定行距，它将字号乘以设定的参数值。所以，在本例中，行高将是24points。 b { font-size: 12pt; line-height: 2 } 用长度单位（em及pt是最常用的单位）设定行距，既可以将行距缩小也可以将行距扩大。 b { font-size: 12pt; line-height: 11pt }

  28. 3.5 样式表的常用属性 3.5.2 文本属性（Text Properties） 4. 文字对齐（text-align） 语法：text-align : left | right | center | justify 参数：left为左对齐，right为右对齐，center为居中，justify为两端对齐。 说明：设置对象中文本的对齐方式。 示例：利用文字对齐属性，可以控制段落的水平对齐。本属性只用于整块的内容，如<p>、<h1>～<h6>、<blockquote>和<ul>。 h4 { text-align: center } div { text-align : center }

  29. 3.5 样式表的常用属性 3.5.2 文本属性（Text Properties） 5. 文字缩行（text-indent） 语法：text-indent : length 参数：length为百分比数字或由浮点数字、单位标识符组成的长度值，允许为负值。 说明：设置对象中的文本段落的缩进。本属性只应用于整块的内容。 示例： p { text-indent: 2em } /* 本段第1行的起始位置比其正常位置缩进了2个字符 */ div { text-indent : -5px; } div { text-indent : underline 10%; }

  30. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 1. 外延边距属性（Margins Properties） 外延边距也称为外补丁。外延边距设置属性有：margin-top、margin-right、margin-bottom、margin-left，可分别设置，如图3-11所示。也可以用margin属性，一次设置所有边距。 (1) 顶边的外延边距（margin-top） 语法：margin-top : length | auto 参数：length是由数字和单位标识符组成的长度值或者百分数，百分数是基于父对象的高度。auto值被设置为对边的值。说明：设置对象顶边的外延边距，外延边距始终透明。内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。 示例： body { margin-top: 11.5% }

  31. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (2) 右边的外延边距（margin-right） 语法：margin-right : length | auto 参数：同margin-top。 说明：同margin-top。 示例： body { margin-right: 11.5%; } (3) 底边的外延边距（margin-bottom） 语法：margin-bottom : length | auto 参数：同margin-top。 说明：同margin-top。 示例： body { margin-bottom: 11.5%; }

  32. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (4) 左边的外延边距（margin-left） 语法：margin-left : length | auto 参数：同margin-top。 说明：同margin-top。 示例： body { margin-left: 11.5%; } 以上4项属性可以控制一个要素的四周的边距，每一个边距都可以有不同的置。或者设置一个边距，然后让浏览器用缺省设置设定其他几个边距。可以将边距应用于文字和其他对象。例如： h4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }

  33. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (5) 外延边距（margin） 语法：margin : length | auto 参数：length是由数字和单位标识符组成的长度值或百分数，百分数是基于父对象的高度；对于内联对象来说，左右外延边距可以是负数值。auto值被设置为对边的值。 说明：设置对象四边的外延边距，如图3-10，位于BOX模型的最外层，包括四项属性：margin-top（顶边的外延边距）、margin-right（右边的外延边距）、margin-bottom（底边的外延边距）、margin-left（左边的外延边距）。如图3-11所示。外延边距始终是透明的。 示例： body { margin: 36pt 24pt 36pt } body { margin: 11.5% } body { margin: 10% 10% 10% 10% }

  34. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 2. 边框属性（Borders Properties） (1) 所有边框宽度（border-width） 语法：border-width : medium | thin | thick | length 参数：medium为默认宽度，thin为小于默认宽度，thick为大于默认宽度。length由数字和单位标识符组成的长度值，不可为负值。 示例： span { border-style: solid; border-width: thin } span { border-style: solid; border-width: 1px thin }

  35. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (2) 边框样式（border-style） 语法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 说明：如果提供全部四个参数值，将按上、右、下、左的顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上、下，第二个用于左、右。如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。 示例： body { border-style: double groove } body { border-style: double groove dashed } p { border-style: double; border-width: 3px }

  36. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (3) 边框色彩（border-color） 语法：border-color : color 参数：color指定色彩。 说明：要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。如果border-width等于0或border-style设置为none，本属性失去作用 示例： body { border-color: silver red } body { border-color: silver red rgb(223, 94, 77) } h4 { border-color: #ff0033; border-width: thick } p { border-color: green; border-width: 3px } p { border-color: #666699 #ff0033 #000000 #ffff99; border-width: 3px }

  37. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (4) 顶边框宽度（border-top） 语法：border-top : border-width || border-style || border-color 参数：该属性是复合属性。请参阅各参数对应的属性。 说明：请参阅border-width属性。 示例： div { border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green }

  38. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (5) 右边框宽度（border-right） 语法：border-right : border-width || border-style || border-color 参数：该属性是复合属性。请参阅各参数对应的属性。 说明：请参阅border-width属性。 (6) 底边框宽度（border-bottom） 语法：border-bottom : border-width || border-style || border-color 参数：该属性是复合属性。请参阅各参数对应的属性。 说明：请参阅border-width属性。

  39. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 (7) 左边框宽度（border-left） 语法：border-left : border-width || border-style || border-color 参数：该属性是复合属性。请参阅各参数对应的属性。 说明：请参阅border-width属性。 示例： h4{border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px}

  40. 3.5 样式表的常用属性 3.5.3 控制BOX的属性 3．对象间隙（Paddings Properties） 对象间隙也称内补丁，位于对象边框和对象之间，包括了四项属性：padding-top（顶部间隙）、padding-right（右边间隙）、padding-bottom（底部间隙）、padding-left（左边间隙）。不允许负值。与margin类似，padding也可以用padding一次性设置所有的对象间隙，格式也和margin相似，不再一一列举了。 【例3-13】

  41. 3.5 样式表的常用属性 3.5.4 布局属性（Layout Properties） 1. 浮动（float） 语法：float : none | left |right 参数：none为对象不浮动，left为对象浮在左边，right为对象浮在右边。 说明：该属性的值指出了对象是否及如何浮动。请参阅clear属性。 浮动属性能将一个对象周围用文字包裹，不仅能包裹图像、表格，还能包裹整块的文字。 示例： div { clear : left } img { float: right }

  42. 3.5 样式表的常用属性 3.5.4 布局属性（Layout Properties） 2. 清除（clear） 语法：clear : none | left |right | both 参数：none允许两边都可以有浮动对象，both不允许有浮动对象，left不允许左边有浮动对象，right不允许右边有浮动对象。 说明：该属性的值指出了不允许有浮动对象的边。请参阅float属性。 示例：如果想使一段文字包裹某一对象，而下一段文字不包裹，可以使用clear属性。 p { clear: left }

  43. 3.5 样式表的常用属性 3.5.5 背景属性（Background Properties） 1. 色彩（color） 语法：color : color 参数：color指定颜色。请参阅颜色单位。 说明：设置对象的文本颜色，即设定对象的前景颜色。用颜色名称指定color不被一些浏览器接受。 示例： div {color: #345456 } div { color: rgb(100,14,200) } div {color: menu } div {color: red } b { color: #333399 } /* 将所有的加重字以设定的颜色显示 */ b { color: rgb(51,204,0) }

  44. 3.5 样式表的常用属性 3.5.5 背景属性（Background Properties） 2. 背景色（background-color） 语法：background-color : color | transparent 参数：color指定颜色，请参阅颜色单位。transparent使背景色透明。 说明：设置对象的背景颜色，即设定对象后面固定的颜色。 示例： p { background-color: silver } div { background-color: rgb(223,71,177) } body { background-color: #98ab6f } pre { background-color: transparent } p.yellow { background-color: #ffff66 }

  45. 3.5 样式表的常用属性 3.5.5 背景属性（Background Properties） 3. 背景图像（background-image） 语法：background-image : url(url) | none 参数：url为使用绝对或相对地址指定背景图像的地址。none无背景图。 说明：设置对象的背景图像。若把图像添加到整个浏览器窗口，可以将其添加到<body>标记。 示例： code { background-image: url("comet.jpg") } blockquote { background-image: url("c:\InetPub\MyPixs\comet.jpg") } br { background-image: url(http://Fred.com/ImageFile/q.gif) } body { background-image: none } b { background-image: url(background.gif) }

  46. 3.5 样式表的常用属性 3.5.5 背景属性（Background Properties） 4. 控制背景图象的属性 (1) 背景重复（background-repeat） 语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y 参数：repeat为背景图像在纵向和横向上平铺，no-repeat为背景图像不平铺，repeat-x为背景图像在横向上平铺，repeat-y为背景图像在纵向平铺。 说明：设置对象的背景图像是否及如何铺排。必须先指定对象的背景图像。 示例： p { background: url("images/aardvark.gif"); background-repeat: no-repeat } menu { background: url("images/aardvark.gif"); background-repeat: repeat-y; }

  47. 3.5 样式表的常用属性 3.5.5 背景属性（Background Properties） (2) 固定背景（background-attachment） 语法：background-attachment : scroll | fixed 参数：scroll使背景图像随对象内容滚动，fixed使文字滚动时背景图像保持固定。 说明：设置背景图像是随对象内容滚动还是固定的。该属性只用于页面背景，即<BODY>标签内设定的背景图像。 示例： body { background-attachment: fixed; background-image: url(background.gif) } html { background-image: url("anasazi.tif"); background-attachment: fixed; }

  48. 3.5 样式表的常用属性 3.5.5 背景属性（Background Properties） (3) 背景定位（background-position） 语法：background-position : length || length background-position : position || position 参数：length为百分数或者由数字和单位标识符组成的长度值。 position可取top | center | bottom | left | center | right 说明：设置对象的背景图像位置，即精确控制背景图像相对于对象的显示位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。该属性定位不受对象的补丁属性(padding)设置影响。

  49. 3.5 样式表的常用属性 3.5.5 背景属性（Background Properties） 5. 背景（background） 背景属性是设定所有有关背景设置的属性的快捷方式，利用快捷特性可以将前面的所有背景属性加到一个CSS规则中。利用背景属性，可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。 语法：background : background-color || background-image || background-repeat || background-attachment || background-position 参数：该属性是复合属性。请参阅各参数对应的属性。 说明：如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：transparent none repeat scroll 0% 0% 。

  50. 3.5 样式表的常用属性 3.5.6 定位属性（Positioning Properties） 1. 定位方式（position） 语法：position : static | absolute | relative 参数：static为无特殊定位，对象遵循HTML定位规则。 absolute将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有外补丁（margin），但仍有内补丁（padding）和边框（border）。 relative对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。 说明：设置对象的定位方式。

More Related