第6章 CSS标准属性.docx

1、第6章 CSS标准属性第6章CSS标准属性课前导读前面我们介绍了CSS的基本概念，重点介绍了如何通过选择符来指定网页中的某个或某类元素。本章我们将介绍CSS基本属性，对于CSS基本属性我们分了十类进行介绍，这些属性涉及了文本样式、字体样式、列表样式、边框样式、背景样式等。通过对这些基本属性的学习，我们将掌握如何定义网页中指定元素的外观。本章重点在本章我们将重点学习： CSS设置页面字体 CSS设置页面背景 CSS设置页面中边框的样式 CSS设置页面中的列表 CSS设置页面滚动条及鼠标样式W3C组织的CSS规范不断修订、版本逐步升级，在我们下面的讲解中会明确说明属性或属性值定义于CSS1或是CS

2、S2。目前CSS标准属性（我们指符合W3C规范的属性）得到各浏览器相对较好的支持。在介绍属性之前，我们先就本章的几种表示方法进行解释。符号“|”表示左右两项只能选择其中一项；符号“|”表示左右两项可以选择一项也可以同时存在。本章使用IE代表Internet Explorer浏览器，FF代表Firefox浏览器。对于各属性我们使用IE6.0及FF2.0进行测试，未经特殊说明即表示上述两个浏览器均支持该属性。6.1颜色和背景6.1.1 color属性：color属性值：颜色初始值：取决于浏览器的定义，通常是黑色。版本：CSS1兼容性：IE4+，NS4+继承性：有描述：元素的字体颜色样式。例6-1

3、color属性CSS基本属性这是红色文本。这是绿色文本。这是蓝色文本。这是黄色文本。该例运行结果如图6-1。图6-1 color属性6.1.2 background-color属性：background-color属性值：transparent | 颜色 transparent：背景色透明初始值：transparent版本：CSS1兼容性：IE4+ NS4+继承性：无描述：设置元素背景色。例6-2 background-color属性CSS基本属性背景色为红色。背景为透明。该例运行结果如图6-2。需要注意的是该属性的初始值便是transparent，实际上我们很少使用该属性值，除非为了配合其他

4、交互效果，绝大多数情况下设为透明背景色的CSS定义可以删除。图6-2 background-color属性6.1.3 background-image属性：background-image属性值：none | url(图像的URL) url(图像的URL)：提供图像的URL。初始值：none版本：CSS1兼容性：IE4+ NS4+继承性：无描述：设置元素背景图片。例6-3 background-image属性CSS基本属性背景为图像。无背景图像。该例运行结果如图6-3。同样该属性的初始值便是none，实际上我们也很少使用该属性值。图6-3 background-image属性6.1.4 bac

5、kground-position属性：background-position属性值：（1）长度 | 长度（2）left | center | right | top | center | bottom初始值：0% 0%版本：CSS1兼容性：IE4+ NS6+继承性：无描述：设置元素背景图片的平铺的起始位置。例6-4 background-position属性CSS基本属性divheight:50px;width:210px;border:1px solid #000;margin:3px;background-image:url(bg1.gif); 该例运行结果如图6-4。本例中我们使用的背景

6、图像是一个白色边框并以灰色填充的正方形。边长为20px，而元素的宽度和高度分别为210px和50px。我们看第一个元素显然从右上角开始平铺；第二个元素从左下角开始；第三个元素的指定50%是指从中间开始平铺；而第四个元素指定10px是从左上角距上边、距左边各10px的位置向周围平铺。使用关键字赋值时left和top相当于0%；right和bottom相当于100%；center相当于50%。如果我们为该属性赋值时如果只有一个值则默认第二个值为center；如果不使用关键字赋值，那么就会认为第一个值为水平方向，第二个值为竖直方向。图6-4 background-position属性6.1.5 ba

7、ckground-repeat属性：background-repeat属性值：repeat | no-repeat | repeat-x | repeat-yrepeat：背景图像在纵向和横向上平铺no-repeat：背景图像不平铺repeat-x：背景图像在横向上平铺repeat-y：背景图像在纵向平铺初始值：repeat版本：CSS1兼容性：IE4+ NS4+继承性：无描述：设置元素背景图片的平铺方式。例6-5 background-repeat属性CSS基本属性divheight:50px;width:210px;border:1px solid #000;margin:3px;back

8、ground-image:url(bg1.gif);该例运行结果如图6-5。图6-5 background-repeat属性6.1.6 background-attachment属性：background-attachment属性值：scroll | fixed scroll：背景图像跟随对象内容滚动fixed：背景图像固定初始值：scroll版本：CSS1兼容性：IE4+ NS6+继承性：无描述：设置元素背景图片是否跟随对象内容滚动。例6-6 background-attachment属性CSS基本属性divheight:50px;width:210px;border:1px solid #

9、000;margin:3px;background-image:url(bg1.gif); overflow:auto; 123123该例运行结果如图6-6。第一个元素的背景随着我们拖动光标条会上下移动，而第二个元素背景是固定不动的，内容是浮在背景上面的，拖动光标条只有内容跟随光标条上下移动。图6-6 background-attachment属性6.1.7 background属性：background属性值：background-color | background-image | background-repeat | background-attachment | background

10、-position版本：CSS1兼容性：IE4+ NS4+继承性：无描述：复合属性。如果对复合属性赋值时只赋值部分属性，则其他属性将以各自的初始值赋值。各属性值初始值分别为：transparent none repeat scroll 0% 0%。 例6-7 background属性CSS基本属性divheight:50px;width:210px;border:1px solid #000;margin:3px;该例运行结果如图6-7。对于第二个元素由于我们设定了right，则竖直方向上便赋值为center，尽管repeat-x已经限定仅在水平方向平铺。图6-7 background6.2

11、字体6.2.1 font-family属性：font-family属性值：字体名称 | 字体序列名称（1）字体名称。（2）字体序列名称：cursive | fantasy | monospace | serif | sans-serif。版本：CSS1.0兼容性：IE4+，NS4+继承性：有描述：字体。多种字体时使用逗号分隔，如果字体名称中带有空格一定要使用引号。例6-8 font-family属性CSS基本属性这是宋体文本。这是黑体文本。Courier New该例运行结果如图6-8。图6-8 font-family属性6.2.2 font-size属性：font-size属性值：绝对长度单位

12、 | 相对长度单位 | 长度版本：CSS1.0兼容性：IE4+，NS4+继承性：有描述：字体大小。例6-9 font-size属性CSS基本属性这是12px文本。这是1em文本。这是使用默认字号的文字这是字号150%的文本。（相对默认字号）该例运行结果如图6-9。图6-9 font-size属性6.2.3 font-size-adjust属性：font-size-adjust属性值：none | 数值none：字体遵守自己的Aspect值。数值：为字体设定Aspect值。版本：CSS2.0兼容性：IE6.0与FF2.0均不支持。继承性：有描述：字体Aspect值是指字体小写字母“x”的高度与字

13、体高度的比值。如果字体以比较小的字号显示时，Aspect值比较大的字体更加容易辨认阅读。在CSS2.1版本中该属性已被删除。6.2.4 font-stretch属性：font-stretch属性值：normal | narrower | widernormal：不应用拉伸效果narrower：使用字体宽度更小的值wider：使用字体宽度更大的值版本：CSS2.0兼容性：IE6.0与FF2.0均不支持。继承性：有描述：字体水平方向拉伸。在CSS2.1版本中该属性已被删除。6.2.5 font-style属性：font-style属性值：normal | italic | obliquenorma

14、l：正常italic：斜体。对于没有斜体字型字体，将应用oblique oblique：倾斜的字体版本：CSS1兼容性：IE4+ NS4+继承性：有描述：正常字体或斜体。例6-10 font-style属性CSS基本属性这是正常字体。这是斜体。这是倾斜的字体。该例运行结果如图6-10。图6-10 font-style属性 6.2.6 font-variant属性：font-variant属性值：normal | small-caps normal：正常的字体 small-caps：小型的大写字母字体显示文本版本：CSS1兼容性：IE4+ NS6+继承性：有描述：字体变体效果。例6-11 tex

15、t-variant属性CSS基本属性This is text for normal.THIS IS TEXT FOR NORMAL.This is text for small-caps.该例运行结果如图6-11。图6-11 text-variant属性6.2.7 font-weight属性：font-weight属性值：normal | bold | bolder | lighter | 数值normal：正常的字体。相当值为400。 bold：粗体。相当于标记效果，值为700。 bolder：特粗体lighter：细体数值：100 | 200 | 300 | 400 | 500 | 600

16、 | 700 | 800 | 900版本：CSS1兼容性：IE4+ NS4+继承性：有描述：调节字体粗细。例6-12 font-weight属性CSS基本属性这是正常字体。这是bold字体。这是值为700字体。该例运行结果如图6-12。图6-12 font-weight属性6.2.8 line-height属性：line-height属性值：normal | 长度normal：使用默认行高版本：CSS1兼容性：IE4+ NS4+继承性：有描述：设定行高。例6-13 line-height属性CSS基本属性divwidth:210px;border:1px solid #000;margin:3

17、px;这是测试行高属性的文本。这是测试行高属性的文本。这是测试行高属性的文本。这是测试行高属性的文本。该例运行结果如图6-13。图6-13 line-height属性6.2.9 font属性：font属性值：（1）font-style | font-variant | font-weight | font-size | line-height | font-family （2）caption | icon | menu | message-box | small-caption | status-barcaption：使用有标题属性（caption）的系统控件字体icon：使用图标的字体 me

18、nu：使用菜单的字体 message-box：使用信息对话框的字体 small-caption：使用小控件的标签字体 status-bar：使用窗口状态栏的字体版本：CSS1/CSS2兼容性：IE4+ NS4+继承性：有描述：第一种赋值方式为复合属性用法；第二种赋值方法是CSS2中定义的。6.3 文本6.3.1 text-align属性：text-align属性值：left | right | center | justifyleft：左对齐right：右对齐center：居中justify：两端对齐版本：CSS1.0兼容性：IE4+，NS4+继承性：有描述：元素文本的水平对齐方向。例6-14

19、 text-align属性CSS基本属性divwidth:300px;border:1px solid #000;margin:3px;右对齐左对齐居中这是一句关于CSS的介绍：The W3C came up with the idea of Cascading Style Sheets (CSS) to head off the need by browser manufacturers to introduce even more HTML tags. 这是一句关于CSS的介绍：The W3C came up with the idea of Cascading Style Sheets

20、(CSS) to head off the need by browser manufacturers to introduce even more HTML tags. 例6-14运行结果如图6-14，其中对于justify属性值的测试掺杂了英文，原因是由于中文文字都是等宽的，因此对于纯中文段落两端对齐效果是无法展示出来的。图6-14 text-align属性6.3.2 text-indent属性：text-indent属性值：长度版本：CSS1.0兼容性：IE4+，NS4+继承性：有描述：元素文本的缩进样式。如果属性值为正值则为首行缩进的样式，如果属性值为负值则为悬挂缩进的样式。例6-15 text-indent属性CSS基本属性这是未定义任何样式的文本。这是定义了缩进20px的一段文本。这是定义了缩进15%的一段文本。这是定义了缩进-20px