CSS初级教程(下载).ppt

1、CSS初级教程,讲师：黎运根,一.CSS简介,什么是CSS？ CSS 是 Cascading Style Sheet 的缩写。译作层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 使用CSS布局的优点： 采用CSS布局相对于传统的TABLE网页布局而具有以下3个显著优势： 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中，,一.CSS简介,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 2：提高页面浏览速度 对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏

2、览器就不用去编译大量冗长的标签。 3：易于维护和改版 你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。,一.CSS简介,CSS历史 1994年哈坤利提出了CSS的最初建议；伯特波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。 当时已经有过一些关于样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方去继承，或“层叠”作者的样式, 这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。,一.CSS简介,哈坤于1994

3、年在芝加哥的一次会议上第一次提出了CSS的建议，1995年他与波斯一起再次提出这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。,一.CSS简介,1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，于是1998年5月出版了CSS的第二版。到2007年为止，第三版还未完备。,二.CSS的发展,1998年5月发布了CSS2.0版本，CSS2.0是一套全新

4、的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式，HTML元素可以通过CSS2.0的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和 Li此类HTML标签来分割元素，之后即可通过CSS2.0样式来定义表单界面的外观。,二.CSS的发展,CSS2.0提供给我们了一个机制，让程序员开发时可以不考虑显示和界面就可以制作表单和界面，显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。不过由于CSS2.0目前尚未见过很好的编辑软件，所以无法做到所见即所得，

5、编写起来不易。 最新的CSS3.0完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器和,二.CSS的发展,属性，这些会允许你实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。,三.如何将样式表加入您的网页,1.链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： 文档标题,而在XML中，你应该如下例所示在声明区中加入： 2.定义内部样式块对象 (Emb

6、edding a Style Block)你可以在你的HTML文档的和标记之间插入一个.块对象。示例如下： 文档标题 !-body font: 10pt Arialh1 font: 15pt/17pt Arial; font-weight: bold; color: maroon,h2 font: 13pt/15pt Arial; font-weight: bold; color: bluep font: 10pt/12pt Arial; color: black- 注意：这里将style对象的type属性设置为“text/css”，是允许不支持这类型的浏览器忽略样式表单。 3.内联定义 (I

7、nline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：,这一行被增加了左右的外补丁 4.样式表语法 (CSS Syntax) Selector property: value 参数说明： Selector 选择符property : value - 样式表定义。属性和属性值之间用冒号(:)隔开。多个定义之间用分号(;)隔开,四.CSS语法,CSS的定义是由三个部分构成: 选择符(selector)，属性(properties)和属性的取值(value)。,1.语法: selector property: value (选择符 属性:值)

8、,四.CSS语法,说明: 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开: 例子:body color: black，此例的效果是使页面中的文字为黑色。 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合: 例子:p font-family: sans serif (定义段落字体为sans serif) 如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开: 例子:p text-align: center; color: red (段落居中排列;并且段落

9、中的文字为红色),四.CSS语法,2. 选择符组 你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义: p, table font-size: 9pt (段落和表格里的文字尺寸为9号字) 效果完全等效于: p font-size: 9pt table font-size: 9pt 3. 类选择符,四.CSS语法,用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类: p.right text-align: right p.center tex

10、t-align: center 然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数: 这个段落向右对齐的 这个段落是居中排列的,四.CSS语法,类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式: .center text-align: center (定义.center的类选择符为文字居中排列) 这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符: 这个标题是居中排列的 这个段落也是居中排列的,四.CSS语法,注意:这种省略H

11、TML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。 4. ID选择符 在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代,ID只能在一个页面中出现一次,而class可以多次运用.,四.CSS语法,这个段落向右对齐 定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=intro的元素: #intro font-size:110%

12、; font-weight:bold; color:#0000ff; background-color:transparent ,四.CSS语法,(字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明) 下面这个例子，ID属性只匹配id=intro的段落元素: p#intro font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent ,四.CSS语法,注意:ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。 5. 包含选择符 可以单独对某种元素包含关系定义的样式表，元素1

13、里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如: table a font-size: 12px 在表格内的链接改变了样式，文字大小为12像素，而表格外的链接的文字仍为默认大小。,四.CSS语法,6. 样式表的层叠性 层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。 例如在DIV标记中嵌套P标记: div color: red; font-size:9pt 这个段落的文字为红色9号字(P元素里的内容会继承

14、DIV定义的属性),四.CSS语法,当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色: div color: red; font-size:9pt p color: blue 这个段落的文字为蓝色9号字 我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。 注意：,四.CSS语法,不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。 7. 注释:/* . */ 你可以在CSS中插入注释来说明你代码的意思，注释有利

15、于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/* 开头，以*/ 结尾，如下: p text-align: center; /* 文本居中排列 */ ,五. CSS构造块,1Div 部分（division）元素，经常以div形式引用是(X)HTML的元素，用于定义(X)HTML文件中的区域。你可以让div包含任何在页面部分的一些额外元素，如文本、图形等实际上，这些元素可以是任何元素，甚至十一些不同区域中的特殊元素，如页眉、页脚、导航栏等。 示例：在HTML中构造一个div元素： 这是我们的内容区域 ,为id为container的div元素添加CSS样式代

16、码如下例： #container padding: 20px; border: 1px solid #000; background: #CCC; 效果图：,2.维度：宽度和高度 设定值可以使长度、百分比或auto。所有这些值会受到样式表里其他规则的负面影响，也受到(X)HTML中它们包含的元素的影响。例如，margin、padding、border或者自元素都可能对结果产生连锁反应。 3. 外边距 外边距（margin）属性的功能正如它本身表示的意义，用于设定(X)HTML元素和它外部的元素之间的外边距。外边距属性可以为给定的元素设定上外边距、下外边距、左外边距和右外边距四个属性。注意外边距

17、值不从父元素中继承。 下面来看一个外边距CSS定义的例子：,#container width: 300px; margin-top: 20px; margin-left: auto; margin-right: auto; margin-bottom: 1em; border: 1px solid #000; padding: 20px; background: #CCC; 对外边距可缩写成如下： #container margin: 20px auto 1em auto; ,属性值的排列顺序为：上外边距、右外边距、下外边距、左外边距。 CSS中将元素居中的最好的方法是把元素左右外边距属性值设

18、定为auto。对于常用的浏览器，这只需要设定width规则，左外边距话和右外边距都为给定的auto值。 4.内边距 内边距（padding）是(X)HTML元素的边框与元素之间的距离，适用于任何元素。 示例： #container width: 300px; padding-top: 20px;,padding-left: 10% padding-right: 1em; padding-bottom: 0; background: #CCC; 可以将它缩写成如下代码： #container padding: 20px 1em 0 10%; 与margin属性一样，数值的排列顺序为：上、右、下和

19、左。 下面来讨论一下：border-width、border-top-width、border-right-width、border-bottom-width和border-left-width。,#container width: 400px; margin: 10px auto 10px auto; padding: 20px; border-style: dashed dotted solid ridge; border-top-width: thin; border-right-width: 20px; border-bottom-width: medium; border-left-

20、width: thick; 设置边框颜色的属性设置如下： #container border-color: #000 #999 #333 #CCC; ,上例效果图如下： 用border、border-top、border-right、border-bottom和border-left属性可以将给定的border-style、border-width和border-color属性的值集中到一个属性中， 示例如下： #container width: 400px; margin: 10px auto 10px auto; padding: 20px; border-top: #000 thin d

21、ashed;,border-right: #999 20px dotted; border-bottom: #333 medium solid; border-left: #CCC thick ridge; 效果图如下：,六.CSS属性,CSS属性包括：字体、文本、背景、定位、尺寸、布局、外补丁、轮廓、边框、内容、内补丁、列表、表格、滚动条等属性。 1.字体属性 1.1： font-style语法 font-style : normal | italic | oblique 取值： normal :默认值。正常的字体。 italic :斜体。对于没有斜体变量的特殊字体，将应用 oblique。

22、 oblique :倾斜的字体,六.CSS属性,示例： 倾斜的字体 示例效果图：,六.CSS属性,1.2：color语法 color : color 取值： color :指定颜色。 示例： 指定字体颜色 效果图如下：,六.CSS属性,1.3：font-family语法 font-family : name font-family :ncursive | fantasy | monospace | serif | sans-serif 取值： name :字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起。第二种声明方式使用所列出的字体序列名称。如果使用fantasy

23、序列，将提供默认字体序列。,六.CSS属性,示例： 指定字体类型 效果图如下： 1.4：font-size 语法 font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length,六.CSS属性,取值： xx-small :绝对字体尺寸。根据对象字体进行调整。最小 x-small :绝对字体尺寸。根据对象字体进行调整。较小 small :绝对字体尺寸。根据对象字体进行调整。小 medium :默认值。绝对字体尺寸。根据对象字体进行调整。正常 large

24、 :绝对字体尺寸。根据对象字体进行调整。大 x-large :绝对字体尺寸。根据对象字体进行调整。较大 xx-large :绝对字体尺寸。根据对象字体进行调整。最大,六.CSS属性,larger :相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的em单位计算 smaller :相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算 length :百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。 示例： p font-style: normal; p font-size: 12px; p font-size

25、: 20%; ,六.CSS属性,1.5：font-style 语法 font-style : normal | italic | oblique 取值： normal :默认值。正常的字体 italic :斜体。对于没有斜体变量的特殊字体，将应用 oblique 。 oblique :倾斜的字体 示例： p font-style: normal; p font-style: italic; ,六.CSS属性,1.6：font-weight 语法 font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 50

26、0 | 600 | 700 | 800 | 900 取值： normal :默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置 bold :粗体。相当于 700 。也相当于 b 对象的作用bolder :比 normal 粗 lighter :比 normal 细 100 :字体至少像 200 那样细 200 :字体至少像 100 那样粗，像 300 那样细,六.CSS属性,300 :字体至少像 200 那样粗，像 400 那样细 400 :相当于 normal 500 :字体至少像 400 那样粗，像 600 那样细 600 :字体至少像 500 那样粗，像 700 那样细 7

27、00 :相当于 bold 800 :字体至少像 700 那样粗，像 900 那样细 900 :字体至少像 800 那样粗 示例： span font-weight:800; ,六.CSS属性,1.7：font-variant 语法 font-variant : normal | small-caps 取值： normal :默认值。正常的字体 small-caps :小型的大写字母字体 示例： canyou 效果图如下：,六.CSS属性,1.8：line-height 语法 取值： normal :默认值。默认行高 length :百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值

28、。其百分比取值是基于字体的高度尺寸。 示例： div line-height:6px; div line-height:10.5; ,六.CSS属性,综合示例：定义一个div，宽400px，高200px，字体大小为36像素，行高为40像素，颜色为红色，字体为宋体，字体间的间距为5像素，英文字母全部大写，内容为：这是我们的内容区域 zswmdnrqy。 代码： 这是我们的内容区域 zswmdnrqy CSS样式：#containerwidth:400px;height:200px;margin:0 auto;padding:0;,六.CSS属性,#container p font-size:36

29、px; line-height:40px; color:Red ; font-family:宋体; letter-spacing:5px; font-variant:small-caps; 效果图：,六.CSS属性,课堂练习：定义一个div，宽500px，高230px，字体大小为40像素，行高为45像素，颜色为蓝色，字体为微软雅黑、粗体，字体间的间距为6像素，英文字母全部小写，内容为：这是我们的内容区域 zswmdnrqy。 效果图：,六.CSS属性,2.文本属性 2.1：text-indent 语法 text-indent : length 取值： length :百分比数字 | 由浮点数字

30、和单位标识符组成的长度值，允许为负值。 说明： 检索或设置对象中的文本的缩进。默认值为 0 。在被另一个对象(如 br )断开的对象内不能应用本属性。,六.CSS属性,2.3：text-overflow 语法 text-overflow : clip | ellipsis 取值： clip :默认值。不显示省略标记(.)，而是简单的裁切ellipsis :当对象内文本溢出时显示省略标记(.) 说明： 设置或检索是否使用一个省略标记(.)标示对象内文本的溢出。这个属性仅仅作用于水平内联方向的，普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。,六.CSS属性,要强制

31、溢出发生并且应用 ellipsis 值，作者必须设置对象的 white-space 属性值为 nowrap 。假如没有换行机会(例如，对象容器的宽度是狭窄的，而内有很长的没有合理断行的文本)，没有应用 nowrap 也有可能溢出。为了使 ellipsis 值被应用，此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden 。设置 overflow 属性为 scroll 或者 auto 时，此属性也会应用。但是会有滚动条出现。 通过选择省略标记，隐藏的文本可以被选择。当选择发生时，省略标记会隐藏而被文本替换。此属性为在DHTML中制作省略标记提供了高效的方

32、法。,六.CSS属性,示例： 残友软件CSS基本概念CSS构造块CSS基础盒模型CSS文本修饰CSS布局自定义CSS3.0新特性 效果图如下：,六.CSS属性,2.4：vertical-align 语法 vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length 取值： auto :CSS1 根据 layout-flow 属性的值对齐对象内容baseline :CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐 sub :CSS1

33、 垂直对齐文本的下标 super :CSS1 垂直对齐文本的上标 top :CSS1 将支持 valign 特性的对象的内容对象顶端对齐,六.CSS属性,text-top :CSS1 将支持 valign 特性的对象的文本与对象顶端对齐 middle :CSS1 将支持 valign 特性的对象的内容与对象中部对齐 bottom :CSS1 将支持 valign 特性的对象的内容与对象底端对齐 text-bottom :CSS1 将支持 valign 特性的对象的文本与对象顶端对齐 length :CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线

34、对于数值来说为0，对于百分数来说就是0%。目前IE尚未实现此参数,六.CSS属性,说明： 设置或检索对象内容的垂直对其方式。 示例： td vertical-align : middle; 2.5：text-align语法 text-align : left | right | center | justify 取值： left :默认值。左对齐 right :右对齐 center :居中对齐 justify :两端对齐,六.CSS属性,说明： 设置或检索对象中文本的水平对齐方式。此属性作用于所有块对象(block elements)。在一个 div 对象里的所有块对象的会继承此属性值。 假如

35、属性没有设置，这个参数将获取 null 值。 示例： div text-align : center; 2.6：word-break 语法 word-break : normal | break-all | keep-all 取值： normal :默认值。允许在词间换行break-all :该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本,六.CSS属性,行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all :与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本 说明： 设置或检索对象内文本的字内换行行为

36、。尤其在出现多种语言时。对于中文，应该使用 break-all 。示例： div word-break : break-all; ,六.CSS属性,2.7：white-space 语法 white-space : normal | pre | nowrap 取值： normal :默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre :换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属

37、性可以使用，但是不会发生作用。结果等同于 normal 。,六.CSS属性,nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。 说明： 设置或检索对象内空格字符的处理方式。空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。此属性作用于块对象。,六.CSS属性,示例： p white-space: nowrap; /*不换行*/ 2.8：word-w

38、rap 语法 word-wrap : normal | break-word 取值： normal :默认值。允许内容顶开指定的容器边界break-word :内容将在边界内换行。如果需要，词内换行( word-break )也将发生 说明： 设置或检索当前行超过指定容器的边界时是否断开转行。 此属性仅作用于有布局的对象，如块对象。内联要素要,六.CSS属性,使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。 示例： div word-wrap: break-word; wo

39、rd-break: break-all; 3.背景属性 3.1：background 语法 background : background-color | background-image | background-repeat | background-attachment | background-position,六.CSS属性,取值： 该属性是复合属性。默认值为：transparent none repeat scroll 0% 0%。 说明： 设置对象的背景样式。如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。 3.2：background-at

40、tachment 语法 background-attachment : scroll | fixed 取值：,六.CSS属性,scroll :默认值。背景图像是随对象内容滚动 fixed :背景图像固定 说明： 设置或检索背景图像是随对象内容滚动还是固定的。示例： html background-image: url(anasazi.tif); background-attachment: fixed; body background-attachment: scroll; 3.3：background-color 语法 background-color : transparent | col

41、or 取值： transparent :默认值。背景色透明,六.CSS属性,color :指定颜色。 说明： 设置或检索对象的背景颜色。当背景颜色与背景图像( background-image )都被设定了时，背景图片将覆盖于背景颜色之上。 3.4：background-image 语法 background-image : none | url ( url ) 取值： none :默认值。无背景图 url ( url ) :使用绝对或相对 url 地址指定背景图像,六.CSS属性,说明： 设置或检索对象的背景图像。当背景图像与背景颜色( background-color )都被设定了时，背景

42、图片将覆盖于背景颜色之上。示例： code background-image: url(comet.jpg); blockquote background-image:url(c:InetPubMyPixscomet.jpg); br background-image:url(http:/F body background-image: none; ,六.CSS属性,3.5：background-position语法 background-position : length | length background-position : position | position 取值： lengt

43、h :百分数 | 由浮点数字和单位标识符组成的长度值。 position :top | center | bottom | left | center | right 说明： 设置或检索对象的背景图像位置。必须先指定 background-image 属性。,六.CSS属性,该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。如果设置值为 right center ，因为 righ

44、t 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。对应的脚本特性为 backgroundPosition 。 示例： div background: url(images/aardvark.gif); background-position: 35% 80%; ,六.CSS属性,body background: url(images/aardvark.gif); background-position: top right; 3.6：background-position-x 语法 background-position-x : length | left | center

45、 | right 取值： length :百分数 | 由浮点数字和单位标识符组成的长度值。 left :居左 center :居中 right :居右,六.CSS属性,说明： 设置或检索对象的背景图像横坐标位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 。示例： p background-image: url(images/aardvark.gif); background-position-x: 35%; background-repeat:no-repeat; ,六.CSS属性,3.7：backgrou

46、nd-position-y 语法 background-position-y : length | top | center | bottom 取值： length :百分数 | 由浮点数字和单位标识符组成的长度值。 top :居顶 center :居中 bottom :居底 说明： 设置或检索对象的背景图像纵坐标位置。必须先指定 background-image 属性。,六.CSS属性,该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 。 3.8：background-repeat 语法 background-repeat : repeat | no-repeat

47、 | repeat-x | repeat-y 取值： repeat :默认值。背景图像在纵向和横向上平铺 no-repeat :背景图像不平铺 repeat-x :背景图像仅在横向上平铺 repeat-y :背景图像仅在纵向上平铺,六.CSS属性,说明： 设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。示例： menu background: url(images/aardvark.gif); background-repeat: repeat-y; p background: url(images/aardvark.gif); bac

48、kground-repeat: no-repeat; 3.9：layer-background-color 语法 layer-background-color : transparent | color,六.CSS属性,取值： transparent :默认值。背景色透明color :指定颜色。 说明： 设置或检索对象整个区域的背景颜色。 示例： div layer-background-color: transparent; 4.0：layer-background-image 语法 layer-background-image : none | url ( url ) 取值： none :

49、默认值。无背景图,六.CSS属性,url ( url ) :使用绝对或相对 url 地址指定背景图像 说明： 设置或检索对象整个区域的背景图像。 示例： code position: absolute; top: 100px; left: 300px; width: 200px; border: thin solid black; background-image: url(comet.jpg); layer-background-image: url(bb_comet.jpg); ,六.CSS属性,4.定位属性 4.1：position 语法 position : static | abso

50、lute | fixed | relative 取值： static :默认值。无特殊定位，对象遵循HTML定位规则absolute :将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 fixed :未支持。对象定位遵从绝对(absolute),六.CSS属性,方式。但是要遵守一些规范relative :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 说

51、明： 检索对象的定位方式。设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。,六.CSS属性,要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，

52、在前一个对象之后立即被呈递。设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。,六.CSS属性,内容的尺寸会根据布局确定对象的尺寸。例如，设置一个 div 对象的 height 和 pos

53、ition 属性，则 div 对象的内容将决定它的宽度( width )。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 position 。 示例： div position:relative; top:-3px ,六.CSS属性,4.2：z-index 语法 z-index : auto | number 取值： auto :默认值。遵从其父对象的定位number :无单位的整数值。可为负数 说明： 检索或设置对象的层叠顺序。较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 nu

54、mber 值，那么将依据它们在HTML文档中声明的顺,六.CSS属性,序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。这个属性不会作用于窗口控件，如 select 对象。示例： div position:absolute; z-index:3; width:6px; 4.3：top 语法 top : auto | length,六.CSS属性,取值： auto :默认值。无特殊定位

55、，根据HTML定位规则在文档流中分配length :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义 position 属性值为 absolute 或者 relative 此取值方可生效。 说明： 检索或设置对象与其最近一个具有定位设置的父对象顶边相关的位置。此属性仅仅在对象的定位( position )属性被设置时可用。否则，此属性设置会被忽略。,六.CSS属性,此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 top 。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posTop ， pix

56、elTop 等运行时特性，以及对象的offsetTop 等特性。 示例： div position: absolute; top: 1in; div position:relative; top:-3px; left:6px; 4.3：根据4.2推算出right、bottom、left的语法,六.CSS属性,5.尺寸属性 5.1：height 语法 height : auto | length 取值： auto :默认值。无特殊定位，根据HTML定位规则分配 length :由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。不可为负数。 说明：,六.CSS属性,检索或设

57、置对象的高度。对于 img 对象来说，仅指定此属性，其 width 值将根据图片源尺寸等比例缩放。按照样式表的规则，对象的实际高度为其下列属性值之和：margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom在IE6中使用 !DOCTYPE 声明指定 standards-compliant mod而在IE6中如果没有将 !DOCTYPE 声明指定 standards-compliant 模式，以及以前的浏览器版,六.CSS属性,本，对象的实际高度等于：margin

58、-top + height+ margin-bottom此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 height 。其值为一字符串，所以不可用于脚本(Scripts)中的计算。请使用 style 对象的 posHeight ， pixelHeight ，以及对象的offsetHeight 等特性。 示例： div height: 1in; div position:absolute; top:-3px; height:6px; ,六.CSS属性,6.布局 6.1：clear 语法 clear : none | left | right

59、| both 取值： none :默认值。允许两边都可以有浮动对象 left :不允许左边有浮动对象 right :不允许右边有浮动对象 both :不允许有浮动对象 说明：,六.CSS属性,该属性的值指出了不允许有浮动对象的边。 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 clear 。 示例： div clear : left img float: right ,六.CSS属性,6.2：float 语法 float : none | left | right 取值： none :默认值。对象不飘浮 left :文本流向对象的右边 right :文本流向对象的左边 说明： 该属性的值指出了对象是否及如何浮动。 当该属性不等于 none 引起对象浮动时，对象将被视作,六.CSS属性,块对象( block-level )，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。跟随浮动对象的对象将移动到浮