第6章 CSS准属性.docVIP

第6章CSS标准属性 课前导读 前面我们介绍了CSS的基本概念，重点介绍了如何通过选择符来指定网页中的某个或某类元素。本章我们将介绍CSS基本属性，对于CSS基本属性我们分了十类进行介绍，这些属性涉及了文本样式、字体样式、列表样式、边框样式、背景样式等。通过对这些基本属性的学习，我们将掌握如何定义网页中指定元素的外观。 本章重点 在本章我们将重点学习： CSS设置页面字体 CSS设置页面背景 CSS设置页面中边框的样式 CSS设置页面中的列表 CSS设置页面滚动条及鼠标样式 W3C组织的CSS规范不断修订、版本逐步升级，在我们下面的讲解中会明确说明属性或属性值定义于CSS1或是CSS2。目前CSS标准属性（我们指符合W3C规范的属性）得到各浏览器相对较好的支持。在介绍属性之前，我们先就本章的几种表示方法进行解释。 符号“|”表示左右两项只能选择其中一项；符号“||”表示左右两项可以选择一项也可以同时存在。 本章使用IE代表Internet Explorer浏览器，FF代表Firefox浏览器。对于各属性我们使用IE6.0及FF2.0进行测试，未经特殊说明即表示上述两个浏览器均支持该属性。 6.1颜色和背景 6.1.1 color 属性：color 属性值：颜色 初始值：取决于浏览器的定义，通常是黑色。 版本：CSS1 兼容性：IE4+，NS4+ 继承性：有 描述：元素的字体颜色样式。 例6-1 color属性 html head titleCSS基本属性/title /head body div style=color:red这是红色文本。/div div style=color:#00FF00这是绿色文本。/div div style=color:#00F这是蓝色文本。/div div style=color:rgb(100%,255,0)这是黄色文本。/div /body /html 该例运行结果如图6-1。 图6-1 color属性 6.1.2 background-color 属性：background-color 属性值：transparent | 颜色 transparent：背景色透明 初始值：transparent 版本：CSS1 兼容性：IE4+ NS4+ 继承性：无 描述：设置元素背景色。 例6-2 background-color属性 html head titleCSS基本属性/title /head body div style=width:200px;background-color:red;背景色为红色。 div style=background-color:transparent;背景为透明。/div /div /body /html 该例运行结果如图6-2。需要注意的是该属性的初始值便是transparent，实际上我们很少使用该属性值，除非为了配合其他交互效果，绝大多数情况下设为透明背景色的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属性 html head titleCSS基本属性/title /head body div style=width:200px;background-image:url(bg.gif);背景为图像。 div style=background-image:none;无背景图像。 /div /div /body /html 该例运行结果如图6-3。同样该属性的初始值便是none，实际上我们也很少使用该属性值。 图6-3 background-image属性 6.1.4 background-position 属性：background-position 属性值： （1）长度 || 长度 （2）left | center | right || top | center | bottom 初始值：0% 0% 版本：CSS1 兼容性：IE4+ NS6+ 继承性：无 描述：设置元素背景图片的平铺的起始位置。 例6-4 background-position属性 html head titleCSS基本属性/title style type=text/css div{height:50px;width:210px;border:1px solid #000;margin:3px;background-image:u