第6章++网页表现语言—CSS.ppt

1、制作：计算机学院 邵黎,1,动态HTML是HTML、层叠样式表CSS和脚本语言的组合。,第六章 网页表现语言CSS,制作：计算机学院 邵黎,2,6.1 CSS简介,CSS （Cascading Style Sheet层叠样式表）是一种具有层次性的形式设置。 CSS作用在于让网页设计者在网页编排与空间配置上有更大的弹性。它的主要用途是定义网页数据的编排、显示、格式化及特殊效果。 在CSS的配合下，HTML语言如虎添翼，发挥出了更大的效用。,制作：计算机学院 邵黎,3,样式就是格式，在网页中，像文字的大小、色彩以及图片位置等，都是设置显示内容的样式。 层叠是指当在HTML文档中引用多个定义样式的样

2、式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。,6.1.1 CSS的概念,制作：计算机学院 邵黎,4,CSS就是让内容和样式分离开来，让HTML标记只控制网页的内容，而内容的样式则交由CSS来控制。 在运用Style Sheet时，首先将内容的样式交给CSS来定义好，而HTML标记把事先定义好的样式直接用，只要负责内容的结构，不必再定义内容的样式。 当多个网页采用相同的外观样式时，只要建立一个定义样式的CSS文件，让HTML调用这个CSS文件所定义的样式即可。,制作：计算机学院 邵黎,5,多个网页调用同一个CSS文件,制作：计算机学院 邵黎,6,优点： 利用

3、CSS制作和管理网页都非常方便 CSS可以更加精细地控制网页的内容 CSS样式比HTML更加丰富多彩 CSS定义样式的方法灵活多样 举例：LINE-HEIGHT的属性变化 定义方法： 在HTML文件内部定义、在HTML文件外部定义、分标记定义、分段定义。,制作：计算机学院 邵黎,7,6.1.2 在网页中插入CSS的方法,当浏览器读取样式单时，要依照文本格式来读，可以使用4种方法把样式单加入到网页中：行内样式、内嵌一个样式单、链接到一个外部的样式单文件和导入多个外部样式单文件。,制作：计算机学院 邵黎,8,1.行内样式 即在HTML的各个标记中加入CSS标记内容。 当只想加强网页中的某一个段落时

4、，可以直接把样式定义加入HTML文件，这时，必须用到HTML标记的STYLE属性。 举例：HTML文件中加入Style Sheet 第三版教材【例4-1】,制作：计算机学院 邵黎,9,2. 在HTML文件的标记内嵌入CSS的定义 利用标记，将它集中放在标记内，不但可以展现CSS的风格，在管理HTML上也显得井然有序。,制作：计算机学院 邵黎,10,一般形式： 属 性： TITLE=“” 提示文字 TYPE=“” 指定样式表的MIME类型 样式表 举例1 举例2 ：对标记直接定义 举例3、第三版教材【例4-2】,制作：计算机学院 邵黎,11,除了在.内分别定义各种选择符的样式外，如果多个选择符具

5、有相同的样式，可以采用组合选择符，以减少重复定义的麻烦。其格式为： . . 第三版教材【例4-3】,制作：计算机学院 邵黎,12,3.将CSS嵌入或链接至HTML文件 如果有数个HTML文件要共用相同的CSS，为了避免重复定义样式表，可以将样式单定义在单独的文本文件，然后将其嵌入或连接至HTML文件。,制作：计算机学院 邵黎,13,这样的设计能够有效的管理整个网页，HTML标记只负责文章内容的结构，而CSS控制版面编排，将网页的文字内容与网页的版面设计分开处理。最后将CSS所定义的形式以Link的方式和HTML结合在一起。,制作：计算机学院 邵黎,14,标记的用途是定义目前文件与其他文件之间的

6、关联，它必须放在HTML文件的头标记内。 格式为： . . ,制作：计算机学院 邵黎,15,样式单文件的格式为： 选择符1属性:属性值; 属性:属性值; . /* 注释内容 */ 选择符2属性:属性值; 属性:属性值; . . 选择符n属性:属性值; 属性:属性值; . 举例：CSS文件连接到HTML文件 样式表、举例：链接外部样式表 第三版教材【例4-4】：链接外部样式表,制作：计算机学院 邵黎,16,4. 导入多个外部样式单文件 指在嵌入样式单的.中插入多个外部样式单文件。其格式为： . . ,制作：计算机学院 邵黎,17,导入与链接外部样式单文件的区别是一个HTML文件只能链接一个外部样

7、式单，而一个HTML文件可以导入多个外部样式单。最接近目标的样式定义优先权最高，高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。 第三版教材【例4-5】：链接外部样式表,制作：计算机学院 邵黎,18,5. 在HTML文件中套用样式类别 在样式表文件中定义不同的样式类别（style class），然后在HTML文件中套用不同的样式类别。,制作：计算机学院 邵黎,19,6.1.3 CLASS（类）与ID（引用）,在设计方面，经常会将同类型的文字内容指定同一种风格的字体样式，以便浏览者能够依照字体或颜色来辨别文章主副标题。 在CSS里，是以CLASS的标记来区分各种的类别。类（Class

8、）是个很有用的特性，可以让某个元素每次出现时都指定同一样式。,制作：计算机学院 邵黎,20,方法： 样式名前面加一个点号就生成了样式类（CLASS）。 如: .LOGOFONT-SIZE:15PT;COLOR:BLUE LOGO是定义的样式类名。 如果在元素的开始标志中插入CLASS=ClassName，将其变成一个类的成员，则它会遵循这个类的规范。 如： . 样式类 、 举例 ：选择性定义样式、 第三版教材【例4-6】,制作：计算机学院 邵黎,21,ID是样式表的另一特性，可以帮助标识元素和向元素增加属性。在样式表中，可以将ID与某个规则相联系，然后给特定元素指定这个ID，则特定元素将采用这

9、个规则。 其语法结构为： ,制作：计算机学院 邵黎,22,如： #SPACELETTER-SPACING：20PX;FONT-STYLE:ITALIC;COLOR:PINK 如果将这个选择器指定为页面中任何元素的ID属性值，则元素可以采用规则声明 中的样式。 如： 是利用ID属性把样式名SPACE“贴”到标记H2上，表示H2选择了该样式指定的规则。 举例：ID属性的选择性定义方式、 举例：ID定义样式的使用、新教材：例3-4 第三版教材【例4-7】 例4-7的样式,制作：计算机学院 邵黎,23,HTML的文档结构分为两大类：块级结构与行级结构。 在HTML中有div和span两个标记。 标记的

10、格式为： 文本、图像或表格等 文本、图像或表格等 ,6.1.4 与定位标记,制作：计算机学院 邵黎,24,的格式为： . . 样式表 样式表、举例：CLASS与ID的运用 第三版教材【例4-8】、【例4-9】,制作：计算机学院 邵黎,25,6. 2 CSS的基本语法,首先了解 层叠样式表CSS的结构。 样式区块：是标记和注解标记所组成的区块。 选择器（Selector）：是HTML组件。一个选择器可以由多个标记组成。 声明（Declaration）：大括号中的内容，可以包括多个赋值。是HTML组件的样式，诸如颜色、字体、对齐方式等。 选择器-声明对叫规则（rule） 类别（Class）：是针对

11、HTML文件中某些组件所特别设计的样式定义。,制作：计算机学院 邵黎,26,一般方式： 标记名称属性变化1：特色1；属性变化2：特色2；属性变化3：特色3;, ,样 式 区 块,选择器（Selector）,类别（Class）,声明（Declaration）,制作：计算机学院 邵黎,27,一般原则是，最接近目标的样式定义优先级最高。 样式单的优先级别从高到低为： 行内样式、内部样式、链入外部样式、导入外部样式和默认浏览器样式。 浏览器将按照上述顺序执行样式单的规则。,6. 3 多重样式单的层叠,制作：计算机学院 邵黎,28,例如： h3color: red; text-align: left;

12、font-size: 8pt; background:ivory 然后在内嵌样式单中也定义了h3标记的text-align和font-size属性： h3text-align: right; font-size: 20pt /* 标题3文字向右对齐；尺寸为20pt */ 那么这个网页叠加后的样式就是（文字颜色为红色；向右对齐；尺寸为20pt）： h3color: red; text-align: right; font-size: 20pt; background:ivory 第三版教材【例4-11】,制作：计算机学院 邵黎,29,长度、百分比单位 长度单位有相对长度单位和绝对长度单位两种类型

13、。 百分比单位也是一种常用的相对类型。 例如： p line-height: 150% /* 本段文字的高度为标准行高的1.5倍 */ hr width: 80% /* 线段长度是相对于浏览器窗口的80% */,6.4 样式单的属性单位,制作：计算机学院 邵黎,30,制作：计算机学院 邵黎,31,颜色单位 用十六进制数方式表示颜色值 在HTML中，要使用RGB概念指定颜色时，使用一个“#”号，加上6个十六进制的数字表示，表示方法为：#RRGGBB。,制作：计算机学院 邵黎,32,用rgb函数方式表示颜色值 在CSS中，可以用rgb函数设置出所要的颜色。 语法为：rgb(R,G,B) 例如：di

14、v color: rgb(132,20,180) div color: rgb(12,200,50%) 用颜色名称方式表示颜色值 CSS也提供了与HTML一样的用颜色名称表示颜色的方式。 例如：div color: red ,制作：计算机学院 邵黎,33,参数中的“|”表示此属性值一次仅能选取其中一个，“|”表示此属性值可以复选多个。,6.5 样式单的常用属性,制作：计算机学院 邵黎,34,6.5.1 设置字体样式（FONT）,对于Font的控制，字体样式可以设置Font-weight、Font-size、Font-family、Font-variant、Font-style等属性。,制作：计

15、算机学院 邵黎,35,1. Font-weight样式用来指定字体粗细 属性设置分为：一般粗细Normal，默认值。绝对粗细、相对粗细。 语法：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 举例：FONT-WEIG

16、HT的属性变化,制作：计算机学院 邵黎,36,2. Font-size样式用来设置字体的大小 其属性的设置可分为4大类型： 绝对的大小值、相对的大小值、字体的点数、百分比值。 语法：font-size : 绝对尺寸 | 相对尺寸 | 百分数 参数：绝对尺寸根据对象字体进行调节。可选xx-small | x-small | small | medium | large | x-large | xx-large,制作：计算机学院 邵黎,37,示例：所有包含在中的文字的尺寸将是30pt，因为中的字号是相对于的字号（20pt）的1.5倍。 p font-size: 20pt b font-size:

17、1.5em h3 font-size: 20px p font-size: 15pt b font-size: 300% body font-family:宋体; font-size: 9pt pfont-family:宋体; font-size: 11pt 举例：FONT-SIZE的属性变化。 举例：控制文字的大小 第三版教材【例4-13】,制作：计算机学院 邵黎,38,3. Font-style样式用来指定字体为基本字体字或斜体字。 属性的设置可为：Normal、Oblique（倾斜）、Italic（斜体）。 语法：font-style : italic | oblique | norma

18、l 参数：italic为斜体。对于没有斜体变量的特殊字体，将应用oblique。normal为正常的字体，声明此值将取消之前设置。 说明：将文本字体设置为斜体。 示例： h3 font-style: italic ,制作：计算机学院 邵黎,39,4. Font-family样式用来指定文字的字体。 默认为宋体。 语法：font-family : 字体名称 参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。 说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”列表中所列出的字体名

19、称。,制作：计算机学院 邵黎,40,示例： body font-family: gill sans, new baskerville, serif h2 color: red; margin: 10px; font-family: 华文新魏, 楷体_GB2312 举例：FONT-STYLE及FONT-FAMILY的属性变化 第三版教材【例4-12】,制作：计算机学院 邵黎,41,5. Font-variant样式用来显示英文字母 其属性的设置可为Normal、Small-caps（小型大写字） 举例：FONT-VARIANT的属性变化 综合举例：样式表1 、2、3,制作：计算机学院 邵黎,42

20、,6.5.2 设置文字样式（TEXT）,TEXT可控制文字的表现方式，对齐位置、缩排效果及层次变化。通过TEXT的属性设置，网页的版面会变得活泼，文字样式可以设置Text-align、Text-decoration、Text-indent、Text-transform等属性。,制作：计算机学院 邵黎,43,1. Text-align样式用来指定文字的对齐方式 属性设置有4种：Left、Right、Center、Justify（左右对齐）。 语法：text-align : left | right | center | justify 示例：利用文字对齐属性，可以控制段落的水平对齐。本属性只用于

21、整块的内容，如、和。 h4 text-align: center div text-align : center 举例：TEXT-ALIGN的属性变化,制作：计算机学院 邵黎,44,2.文字修饰Text-decoration 其属性设置有none（无设置效果，默认）、 underline（设置底线）、overline（设置顶线）、 line-through（设置删除线） 、blink为闪烁。 语法：text-decoration : underline | blink | overline | line-through | none 示例： div text-decoration : unde

22、rline overline; h1 text-decoration : underline; 举例：TEXT-DECORATION的属性变化 举例：加线效果,制作：计算机学院 邵黎,45,3. Text-indent用来指定文字向右缩排的距离 属性设置可以按绝对长度或百分比为单位设置。 度量单位有：厘米cm、毫米mm、英寸in、像素点px、点数pt、%等。length允许为负值。 语法：text-indent : length 说明：本属性只应用于整块的内容。 示例： p text-indent: 2em /* 比其正常位置缩进了两个字符 */ div text-indent : -5px;

23、 div text-indent : underline 10%; 举例：TEXT-INDENT的属性变化,制作：计算机学院 邵黎,46,4. 文字变形Text-transform 用来控制字母大小写的转换。 属性设置可为None（不更改大小写）、Lowercase（全部改为小写）、Uppercase（全部改为大写）、Capitalize（每个单词的第一个字母改大写）四种。,制作：计算机学院 邵黎,47,语法：text-transform: uppercase | lowercase | capitalize | none 示例： h1 text-transform: uppercase b

24、text-transform: capitalize 举例：TEXT-TRANSFORM的属性变化 举例：英文字母大小写转换,制作：计算机学院 邵黎,48,6.5.3 设置行距的高度（LINE）,Line-height用来指定每行文字的行距。 属性设置可为点数（pt）、像素点（px） ，或相对于字母标记的百分数（%）。 如设置值为Normal表示一般行距；数值n表示n倍行高。百分数（如300%）表示行距为目前行距的300%（3倍）。 Line-height标记可制作具有层次排列的文字效果。常与Font-size标记一起合用。,制作：计算机学院 邵黎,49,示例： 用数字设行距。数字设定行高的时

25、候，浏览器将利用字号来确定行距，它将字号乘以设定的参数值。所以，在本例中，行高将是24pt。 b font-size: 12pt; line-height: 2 用长度单位设定行距（em及pt是最常用的单位） ，既可以将行距缩小也可以将行距扩大。 b font-size: 12pt; line-height: 11pt 用比例设定行距。在下例中，行距是字号高度10pt的140%，即14pt。 b font-size: 10pt; line-height: 140% 举例：LINE-HEIGHT的属性变化 举例：控制段落行距,制作：计算机学院 邵黎,50,6.5.4 设置字符间距（LETTER）

26、,Letter-spacing用来设置字与字的间距。可控制字母之间或中文字之间的距离。 属性设置可为绝对长度，如点数（pt），像素点（px） 等。 语法：letter-spacing : length | normal 参数：length是由数字和单位标识符组成的长度值，允许为负值。 Normal表示一般行距。 举例：LETTER-SPACING的属性变化 举例：控制字符间距,制作：计算机学院 邵黎,51,6.5.5 设置文字对齐方式（VERTICAL）,Vertical-align用来设置文字垂直对齐的位置。这个样式通常是用来指定图片和四周的文字的对齐方式。 属性设置可为Baseline（对

27、齐组件的文字底部，默认值）、Sub（下标）、 super（上标）、 top （对齐组件的顶端）、middle （对齐组件的中点）、 bottom （对齐组件的底部）、 text-top （对齐组件的文字顶端） text-bottom （对齐组件文字的底部）。 举例：VERTICAL-ALIGN的属性变化 举例：控制垂直方向的位置,制作：计算机学院 邵黎,52,语法：word-spacing : length | normal 参数：length是由数字和单位标识符组成的长度值，允许为负值。normal恢复为默认间距。 示例： h3 word-spacing: 1em div word-spac

28、ing : 10px ,6.5.6 设置字间距（word-spacing）,制作：计算机学院 邵黎,53,6.6 显示颜色和背景样式6.6.1 显示文本颜色（color）,在CSS中,Color标记是用来显示字体的颜色。 语法：color : color 表示方法如示例： div color: rgb(100,14,200) div color: red b color: #333399 /* 将所有的加重字以设定的颜色显示 */ b color: rgb(51,204,0) PColor:#0000FF ,制作：计算机学院 邵黎,54,6.6.2 设置背景样式（BACKGROUND）,层叠样

29、式表CSS提供的背景样式有Background-attachment、Background-color、 Background-image、 Background-position、Background-repeat、 Background。,制作：计算机学院 邵黎,55,1.背景色Background-color 指定HTML组件的背景颜色。 利用此标记可以设置某一段落或某一区域的背景色。 语法：background-color : color | transparent 参数：color指定颜色，transparent使背景色透明。,制作：计算机学院 邵黎,56,示例： p backgro

30、und-color: silver div background-color: rgb(223,71,177) body background-color: #98ab6f pre background-color: transparent p.yellow background-color: #ffff66 举例：网页背景和文字背景 举例：背景色的设置 样式表,制作：计算机学院 邵黎,57,2.背景图像Background-image 指定HTML组件的背景图像。 使用这个样式可以在网页或某一区域设置背景图片。 以Background-image:URL（文件名）的方式表示。 语法：back

31、ground-image : url(url) | none 参数：url为使用绝对或相对地址指定背景图像的地址。none无背景图。,制作：计算机学院 邵黎,58,示例： code background-image: url(comet.jpg) blockquote background-image: url(c:InetPubMyPixscomet.jpg) font background-image: url(http:/F body background-image: none b background-image: url(background.gif) 举例：背景图案的设置 举例：

32、网页背景图片,制作：计算机学院 邵黎,59,3.固定背景Background-attachment 用来控制背景图片是否跟着网页的内容移动。 设置值有Scroll和Fixed两种，前者背景图片会随着网页内容卷动，而后者背景图案固定不动，不会跟着网页内容移动而移动，又被称为浮水印。 语法：background-attachment : scroll | fixed 说明：该属性只用于页面背景，即标签内设定的背景图像。,制作：计算机学院 邵黎,60,示例： body background-attachment: fixed; background-image: url(background.gif

33、) html background-image: url(anasazi.tif); background-attachment: fixed; 举例：背景图片的固定 举例1：背景图案不跟着网页移动 举例2：背景图案跟着网页移动,制作：计算机学院 邵黎,61,4.背景重复Background-repeat 用来指定HTML组件的背景图片是否重复排列。 一般情况，背景图片会在水平和垂直方向重复排列，填满浏览器窗口。当设置了Background-repeat样式，可以不重复贴图。 设置值可为repeat（默认值）、no-repeat（不做重复排列，原样显示）、repeat-x（在水平方向重复排列背

34、景图片）、repeat-y（在垂直方向重复排列背景图片）。,制作：计算机学院 邵黎,62,语法：background-repeat : 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; 举例：1 2 3 4 5 6 7,制作：计算机学院 邵黎,63,5. 背景定位 Backgr

35、ound-position 用来指定背景图片从哪个位置开始显示。 设置值可以是浏览器： 水平方向起始点，样式有left、right、center。 垂直方向起始点，样式有top、center、bottom。 某个位置的绝对长度或百分比。 语法：background-position : length | length background-position : position | position 参数：length为百分数或者由数字和单位标识符组成的长度值。 position可取top | center | bottom | left | center | right,制作：计算机学院 邵

36、黎,64,示例： p background-image: url (background.gif); background-position: center bottom div background: url(images/aardvark.gif); background-position: 35% 80%; menu background: url(images/aardvark.gif); background-position: 35% 2.5cm; body background: url(images/aardvark.gif); background-position: top

37、 right 例如：PBackground-image:URL(bg100.jpg); Background-repeat:no-repeat;Background-position:5cm 2cm，表示背景图片bg100.jpg是要从段落的水平方向5cm处及垂直方向2cm处开始显示，而且不重复排列。,制作：计算机学院 邵黎,65,6. 用Background可以综合表示Background-attachment、Background-color、 Background-image、 Background-position、Background-repeat等样式。 语法：background

38、 : background-color | background-image | background-repeat | background-attachment | background-position,制作：计算机学院 邵黎,66,示例：段落规则的背景是浅绿色，背景图像垂直平铺，第1次平铺的位置在右上角。 p background:url(background.gif) #ccffcc repeat-y top right div background: red no-repeat scroll 5 60% body background: url(images/aardvark.gi

39、f) repeat-y pre background: url(images/aardvark.gif) top caption background: fuchsia ,制作：计算机学院 邵黎,67,例如：Pbackground:url(bg100.jpg) no-repeat top right 表示背景图片是要从段落的右上方开始显示，而且不重复排列，它相当于： Pbackground-image:url(bg100.jpg); background-repeat:no-repeat; background-position:top right 举例,制作：计算机学院 邵黎,68,6.7

40、控制BOX的属性,BOX包括： 对象本身、对象边框（BORDER） 、围绕边框的对象间隙（MARGIN） 、围绕对象的空格填充（PADDING）。 主要指设置指定元素周围样式。,制作：计算机学院 邵黎,69,对象的尺寸与边框等样式单属性的关系,制作：计算机学院 邵黎,70,6.7.1 设置外延边距（MARGIN）,在CSS中，标记MARGIN用来指定网页的上、下、左、右边缘所需留下的空白间距（外补丁）。 有四种属性： MARGIN-TOP、 MARGIN-BOTTOM、 MARGIN-LEFT、 MARGIN-RIGHT。,制作：计算机学院 邵黎,71,（1）顶边的外延边距（margin-to

41、p） 语法：margin-top : length | auto 参数说明：length是由数字和单位标识符组成的长度值或者百分数，百分数是基于父对象的高度。auto值被设置为对边的值。 示例： body margin-top: 11.5% ,制作：计算机学院 邵黎,72,（2）右边的外延边距（margin-right） 语法：margin-right : length | auto 示例： body margin-right: 11.5%; （3）底边的外延边距（margin-bottom） 语法：margin-bottom : length | auto 示例： body margin-b

42、ottom: 11.5%; ,制作：计算机学院 邵黎,73,（4）左边的外延边距（margin-left） 语法：margin-left : length | auto 示例： body margin-left: 11.5%; h4 margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px bodymargin: 1em 2em 3em 4em /* 定义文本的上、右、下、左的边距分别为1、2、3、4em */ 举例：MARGIN的属性变化 举例：设置空白区域,制作：计算机学院 邵黎,74,6.7.

43、2 设置边框（BORDER）,可以利用BORDER的标记设置边线的颜色、样式、厚度（宽度）。 常用的边框属性有： 1. BORDER-STYLE设置边线的显示效果。有平面、立体效果，NONE不显示边框。 2. BORDER-WIDTH设置边框的厚度。 有Thin、Medium、Thick样式。 3. BORDER-COLOR控制边线的颜色,制作：计算机学院 邵黎,75,（1）边框样式（border-style） 语法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset

44、| outset 参数：border-style属性包括了多个边框样式的参数： dotted（点线）、dashed（短线）、solid （实线）、double（双线）、groove（3D凹槽）、ridge（3D凸槽有菱形效果）、inset（3D凹边）、outset（3D凸边）。,制作：计算机学院 邵黎,76,示例： body border-style: double groove body border-style: double groove dashed p border-style: double; border-width: 3px pborder:5px double purple

45、/* 定义了四条一样的边框 */,制作：计算机学院 邵黎,77,（2）所有边框宽度（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 ,制作：计算机学院 邵黎,78,（3）边框颜色（bord

46、er-color） 语法：border-color : color 参数：color指定颜色。 示例： body border-color: silver red body border-color: silver red rgb(223, 94, 77) body border-color: silver red rgb(223, 94, 77) black h4 border-color: #ff0033; border-width: thick p border-color: green; border-width: 3px p border-color: #666699 #ff0033

47、 #000000 #ffff99; border-width: 3px ,制作：计算机学院 邵黎,79,（4）顶边框宽度（border-top） 语法：border-top : border-width | border-style | border-color 参数：该属性是复合属性。请参阅各参数对应的属性。 （5）右边框宽度（border-right） 语法：border-right : border-width | border-style | border-color （6）底边框宽度（border-bottom） 语法：border-bottom : border-width | b

48、order-style | border-color,制作：计算机学院 邵黎,80,（7）左边框宽度（border-left） 语法：border-left : border-width | border-style | border-color 示例： div border-bottom: 25px solid red; border-left: 25px solid yellow; border-right: 25px solid blue; border-top: 25px solid green h4border-top-width: 2px; border-bottom-width:

49、 5px; border-left-width: 1px; border-right-width: 1px 举例：1、2、3、4、5、立体按钮、 第三版教材【例4-14】,制作：计算机学院 邵黎,81,6.7.3 设置对象边距（PADDING）,在CSS中，段落区域与区块边界之间的距离（对象间隙）利用PADDING设置。对象间隙也称内补丁，位于对象边框和对象之间，PADDING用来指定文字内容与区块边界顶端、底端、左边、右边的空白间距。 样式的属性为： PADDING -TOP 、 PADDING -RIGHT 、 PADDING -BOTTOM、 PADDING -LEFT。 大小值可以是绝

50、对值或相对值，默认为0。 举例：PADDING的属性变化 举例：内容与边框的间距,制作：计算机学院 邵黎,82,6.8 设置对象（图片）的布局,1. 设置对象（图片）的大小 语法：width : auto | length height : auto | length 参数：auto无特殊定位，根据HTML定位规则在文档中分配。length是由数字和单位标识符组成的长度值，或者百分数，百分数是基于父对象的宽度，不可为负数。,制作：计算机学院 邵黎,83,示例： div width: 1in; div position:absolute; top:-3px; width:6px; div pos

51、ition: absolute; left: 200px; top: 40px; width: 150px 示例： div height: 1in; div position:absolute; top:-3px; height:6px; divposition:absolute;left:200px;top:40px;height:150px,制作：计算机学院 邵黎,84,在图片应用方面，对于img对象来说，主要以height属性来设置图片的大小，其width值将根据图片源尺寸等比例缩放。 举例：图片的运用,制作：计算机学院 邵黎,85,2. 浮动（float） 图文组合：在CSS中，用fl

52、oat指定文字与图片的绕排。 语法：float : none | left |right 参数：none为对象不浮动（默认） ，left为对象浮在左边，right为对象浮在右边。 示例： img float: right h4 float: left ,制作：计算机学院 邵黎,86,3清除（clear） 语法：clear : none | left |right | both 参数：none允许两边都可以有浮动对象，both不允许有浮动对象，left不允许左边有浮动对象，right不允许右边有浮动对象。 示例： div clear : left ； 如果想使一段文字包裹某一对象，而下一段文字不

53、包裹，可以使用： p clear: left 。 举例：图文组合、布局的样式 第三版教材【例4-15】,制作：计算机学院 邵黎,87,4定位方式（position） 语法：position : static | absolute | relative 参数：static为无特殊定位，对象遵循HTML定位规则； absolute为绝对定位； relative为不可层叠。,制作：计算机学院 邵黎,88,5左、右、上、下位置 语法：left : auto | length right : auto | length top : auto | length bottom : auto | length

54、 参数：auto无特殊定位，根据HTML定位规则在文档流中分配。 length是由数字和单位标识符组成的长度值或百分数。必须定义position属性值为absolute或者relative，此取值方可生效。,制作：计算机学院 邵黎,89,示例： h4 position: absolute; left: 100px; top: 45px div position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; i position: relative; left: 40px; top: 10px div position:rela

55、tive; top:-3px; left:6px; div position: absolute; left: 1in div position:relative; top:-3px; right:6px; div position: absolute; bottom: 1in; ,制作：计算机学院 邵黎,90,6可视性（visibility） 语法：visibility : inherit | visible | collapse | hidden 示例： img visibility: inherit; float: right; h4 visibility: hidden 第三版教材【例4-16】,制作：计算机学院 邵黎,91,7层叠顺序z-index 语法：z-index : auto | number 参数：auto遵从其父对象的定位。number为无单位的整数值，可为负数。 h2 position: