188设计工作室 - 学员资源

样式表简介
　　样式表（或者称为层叠样式表，英文名Cascading Style Sheet，即CSS）是HTML的一部分，但作为对HTML元素（或者标识）展示效果的一种扩展，其功能极为强大，可以说，有了样式表，你可以完全放弃HTML元素的属性不用就能实现精美的网页排版于布局，因此本站将样式表和HTML分开来，作为专门的一块进行讲诉。对于有HTML基础的朋友来说，学习样式表是非常轻松自在的事。
样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
　　而今越来越多的浏览齐支持样式表，样式表允许改善整个展示样式的同时保留平台独立性的独有特性开阔了网页制作者的视野。样式表的优点变得更加明显，实现一个满意的效果更加容易。虽然不断的为展示效果不断地加入越来越多的HTML标记是一个缺点。
　　Netscape的BODY属性现在被广泛的使用，成了HTML3.2及HTML4.0的标准。可是其bgcolor，text等属性和其他属性的灵活程度完全比不上样式表。大部分的背景图象会任由网页不能让那些只有16色显示的人所接受。而对于一些网页256色仍很难接受。使用传统的BODY属性，一个网页制作者必须权衡使用背景图象带来的好处是否比付出的代价还重。使用样式表的话，网页制作者可以用一些不同的样式表提交一批不同的图象，以便用户可以根据自己的系统可以显示的颜色而选择是24位样式表还是8位样式表。如果网页制作者提供的样式表都不适合用户，用户只要忽略网页制作者的样式表就是了。
样式表可以令网页制作者的工作更加轻松，当每个水平线语句都需要使用<hr width="75%" size=5 align="center">的时候，网页制作者将觉得非常麻烦。使用样式表，只需要指定这样的参数一次，网页样式就可以被整个网站应用。而且如果网页制作者觉得width=50%更好需要更改的话，那么他只需要在一个地方改变这个参数，而不是找遍几百页来更改HTML。不仅仅如此，当一个文件包含了所有的样式信息时，样式表还可以减少下载的时间。
样式表也为他们提供的展示效果的项目给予更多的灵活性。属性，如颜色，背景，边界，边框和许多其他的属性都能被所有的元素应用（包括在通常情况下无法使用背景和边框属性的<p>,<a>,<b>,<h1>~<h6>等元素）。仅仅使用HTML和它专有的扩展，必须依赖象bgcolor之类的属性，而这些属性只对于少数的一些元素有效（比如对前面提到的<p>,<a>等元素就无效）。样式表给予应用一个样式到所有段落，或所有的二级标题，或所有的强调文字很大的灵活性。
　　在段落中，通常都会让首行文字前面会留些空白，这就叫缩进。使用样式表，网页制作者可以使用文本缩进属性来缩进文本，而不是非常麻烦的键入来用空格进行缩进。如果网页制作者决定改变网站中所有段落的缩进，他只需要改变样式表中的一行就行了。
　　使用HTML的<font size=#>元素定义网页中的文字大小，不但只有size=1~7共七种效果供选择，浏览者还可以通过浏览器的一个菜单来进行调整，这常常会使原本排版精美的页面变得凌乱不堪，更不用说精确定位了。使用样式表，不但可以任意选择文字大小，而且还提供了常规的静态定位，相对定位甚至是绝对定位。
　　样式表在WEB方面迈开了一个巨大的前进步伐。随着HTML和样式表的内容和展示效果的差距，WEB不需要放弃优秀的思想??平台独立性。今天，样式表已经成为HTML4.0的一个事实标准。谁都愿意看到逻辑清晰，简洁而优美的HTML源代码。网页制作者最终可以改善文档的展示而不会使源代码太复杂以至于拥护根本不能阅读网页。

样式表实例讲解

　　有好几种方法将样式表应用到网页中，最简单的就是使用HTML的style组件并且放置在网页的头元素<head></head>中，比如下面的代码实现段落呈黑色背景，白色字体显示的代码：

<html>
<head>
<title>样式表范例</title>
<style type="text/css">
p{background-color:#000000;color:#ffffff}
</style>
</head>
<body>
<p>样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
</p>
</body>
</html>
显示效果如下：
样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。网页制作者渴望通过改善WEB的展示样式来为自己的网页加入创新的动力，于是开始使用NETSCAPE或者IE专有的扩展功能，而不是功能更加强大的样式表。这是很自然的，因为这些专有的扩展功能能被大多数的浏览者看见，而强大的样式表却很少人看见。
下面就让我们来分析一下样式表的构成。style标识是HTML原有的，在这里其type=text/css属性是必须的。夹在style标识之间的就是样式表定义的内容了。考虑到用户的浏览器版本过低不支持样式表的情况下会错误的将style中的内容显示在页面上，这是网页设计者所不愿见到的，因此还需要在style内加上HTML的注释标识，这样高版本的浏览器可以正确读取样式信息，同时不会在低版本的浏览器中显示出来。即写成：

<style type="text/css">

</style>
今后我们将只书写样式表中的内容，省略其他部分（包括style标识），请自己添加。
你可能已经注意到style标识中仅有p{background:#000000;color:#ffffff;}这么短短的一点代码，对，就是它在起作用。花括号前面的p称为选择符，表示对该文件中的<p>标识起作用，同样的道理，你可以将其换为body{……}，就可以控制<body>标识了。
　　花括号中的background-color当然是背景颜色了，color则是文字颜色，它们都可以称为样式表中的属性，至于#000000和#ffffff则是属性对应的值，他们代表什么就不用我多说了吧！属性和值之间用冒号':'分隔。多个属性之间用分号';'分隔。冒号和分号前后如果有空格不会对样式语法及效果表产生影响。如果是有多个选择符，没关系直接写下去就可以了，比如下面的样子：
body{width:600px}p{color:#000000}
当然为了美观建议在定义完body后，即在p之前换行，当然这样仅仅是为了美观，如下：
body{width:600px}
p{color:#000000}
你甚至可以将包括style标识在内的所有代码都写在一行以内，前提是你不怕样式表修改时不易阅读的话。
假如有如下的样式定义：

body{font-size:12px}
p{font-size:12px}
即定义两个或者多个元素具有相同的属性，我们是否可以将其合并一次定义呢？答案是肯定的。只要用逗号分隔两个选择符即可：
body,p{font-size:12px;}
如果一个页面中有很多个链接元素<a>，而现在只需要定义所有位于段落中的<a>元素（即形如：<p>……<a href=#>……</a>……</p>的链接元素）带删除线而不影响位于table中的a元素怎么办呢？写成下面这样就可以了：
p a{text-decoration:line-through}
即用空格表示元素的包含关系。那么假如一个属性具有的两个或者多个值可以并存怎么办呢？也用空格分隔属性值即可，比如定义链接具有上划线和下划线：
a{text-decoration:underline overline}

样式表定义的几种方法

　　上一讲中只能对同一类元素进行样式定义，假如我们只需要定义某一个元素，比如在一个HTML页面中有许多p元素，现在我只想定义其中一个p元素怎么办呢？这就是我们这一讲中将要阐明的。事实上样式表共有4中方法进行表示，上一讲只提到两种，剩下的两种都可以解决这个问题。让我们看看：
1，以HTML元素作为选择符方式：
这就是上一讲的主要内容，用法很简单，HTML元素后紧跟花括号进行定义即可。
2，关联选择符方式：
就是前面提到的只定义位于某一类元素中的HTML元素，比如只定义嵌套在表格table中的表格宽300个象素：
table table{width:300px}
其中px是象素单位，当然也可以用绝对单位如毫米mm，厘米cm，磅pt及百分比单位40%；
3，类选择符方式：
自定义一个类名进行定义，并在HTML元素中加上属性class=#，其中#表示自定义的类名。比如定义样式：
.warning{color:#ff0000;}
其中warning是自定义的类名，可以随意取名。注意在warning前面有个小圆点。然后在body中对需要应用该样式的地方加上属性class=类名，如：
<p class="warning">类选择符进行定义</p>
类选择符方式是样式表应用最多的方式，或者说正是有了class属性才要学习样式表。用这种方式即可解决本讲开篇提到的问题。
4，ID选择符方式：
给需要进行样式定义的HTML元素赋一个ID，比如<p id="source">……</p>，然后以如下的方式定义样式：
#source{color:#0000ff;}
其实ID选择符方式跟类选择符方式很相似，不同的是类选择符可以认为是先定义类样式，然后应用到HTML元素，因此一个类可以应用到多个不同的HTML元素，比如上面定义的类如果需要还可以应用到<b>元素等其他中。ID选择符则应该是HTML元素的身份标识，如同我们的身份证一样是唯一的，因此其样式也就是根据ID量身定做的。
上面的例子汇总成完整的文档如下：

<html>
<head>
<title>css教程</title>
<style type=text/css>

</style>
</head>
<body>
<p><a href=html.htm>样式表</a>不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。</p>
<h4 class="warning">类选择符定义样式</h4>
<h5 id=abc>ID选择符定义样式</h5>
</body>
</html>
显示效果如下：
样式表不算是什么新东西，它已经诞生了许多年了，但因为在实现方面的缺乏，它的强大性和重要性在很大程度上未被注意到。
类选择符定义样式
ID选择符定义样式

加入样式表的几种方法
前面讲解的样式表不管通过何种方式定义都是通过style元素嵌入到HTML文件的头文件HEAD中的，称为嵌入样式，实际应用中主要用这种方式。事实上还有外部样式和style属性内联样式两种方式加入样式表。
外部样式表就是将原本放置在<head><style></style></head>中的内容存成一个扩展名为.css的样式表文件（假设为abc.css），在需要应用该样式表的HTML文档的HEAD元素中使用link元素链接：
<link href="abc.css" rel=stylesheet type="text/css">
注意样式文件中仅仅包含样式规则或者声明，而不能包含任何象<head><style>之类的HTML标记。一个单独由p{font-size:12px}组成的文件就可以用做样式表文件了。
一个外部样式文件可以为多个HTML页面所应用，因此当一个网站的一个多个页面共用一个外部样式文件时即可实现只更改一个样式文件即全面更改所有页面的风格。
一个外部样式还可以由多个样式文件共同给出，只要在每个应用样式表的link标识中使用相同的title属性即可：
<link rel=stylesheet href=basic.css title=content>
<link rel=stylesheet href=table.css title=content>
<link rel=stylesheet href=forms.css title=content>
内联样式则使用HTML元素的通用属性style="样式定义"来实现，比如要定义某个段落为15象素的红色文字，则：<p style="color:#ff0000;font-size:15px"></p>即可。
有html的基础，再加上这四讲，相信您对样式表已经有一定的了解了，所欠缺的只是实践经验了。从下一讲开始，将着重讲诉样式表的具体属性，真正精彩的开始啦！

组合继承注解及伪类

(1) 组合：
定义样式表时为了减少样式表的重复声明，可以使用组合的选择符进行定义。方法很简单：将两个或者多个选择符使用逗号进行分隔定义即可：
h1,h2,h3,h4,h5,h5{color:red}
(2) 继承：
所谓继承即一类元素因为另一类元素具有某种属性而使自己具有该种属性称为继承。实际上，所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值。除非另外更改。例如，一个body定义了的颜色值也会应用到段落文本中。
但有些情况下内部的选择符不继承周围的选择符的值，但理论上这些都是特殊的。例如，上边界属性是不会继承的，直觉上，一个段落文本不会有同文档body一样的上边界值。
(3) 注解:
样式表里面也允许进行注解，注解使用和C语言编程一样的约定方法去指定。CSS注解的例子如下格式：
/*comments cannot be nested*/

伪类是特殊的类，能自动的被支持CSS的浏览器所识别。伪类区别开不同类的元素。例如，visited links（已访问链接）和active links（可激活链接）描述了两个定位锚（anchors）的类型。伪类的形式如下：
选择符:伪类{属性:值}
伪类不应用HTML的class属性来指定。一般的类可以与伪类一起使用。例如：
选择符.类:伪类{属性:值}
伪类通常只有一种：定义锚伪类
伪类可以指定A元素以不同的方式显示链接（links），已访问链接（visited links），可激活链接（active links）和鼠标悬停时的链接。定义锚元素可给出伪类link，visited，active,hover。一个已访问链接可以定义为不同颜色显示，生殖不同字体大小和风格。
一个有趣的效果是使当前（或可激活）链接以不同的颜色，更大的字体显示。然后，当网页的已访问链接被重选时，又以不同的颜色，更小的字体显示。这个样式表的示例如下：

a:link{color:red}
a:active{color:blue;font-size:125%}
a:visited{color:green;font-size:85%}

CSS的字体属性

包括字体科族属性font-family，字体风格font-style，字体变形font-variant，字体加粗font-weight，字体大小font-size以及用于不同属性汇总略写的字体属性font。其中字体大小和字体加粗是比较常用的。
1.字体科族font-family相当于HTML标记的<font face=#>用于设定文字的字体，当所设定的字体在用户端没有时会用浏览器默认的字体（通常为宋体）代替。
语法：font-family:[<科族名称>,<科族名称>]
初始值：由用户浏览器决定
实用于：所有对象
向下兼容：是
注：尖括号中包含的文字“科族名称”表示在实际使用时应换为具体的值（此处为字体），下同。
该样式允许指定多种字体供选择，用逗号进行分隔即可。在用户端，会根据字体指定的优先级（先后顺序）寻找字体予以显示。比如:
font-family:华文行楷,楷体_GB2312,宋体
定义了三种字体，当浏览者的计算机中有华文行楷则用华文行楷显示，没有则看是否有楷体，有则显示，没有则继续搜索是否有指定的下一种字体宋体，若还没有则用浏览器的默认字体显示。
2.字体风格font-style用normal（普通），italic（斜体），oblique（倾斜）三种方法中的一种来显示字体。
语法：font-style:[normal|italic|oblique]
初始值：normal
实用于：所有对象
向下兼容：是
用法够简单吧！比如想用斜体显示则font-style:italic即可。
3.字体变形font-variant决定了字体的显示是用normal（普通）还是用small-caps（小型大写字母）显示。显然这个属性是专门为英文设计的，中文当然没有大小写之分了。当使用small-caps属性时，不论大小写都会以小型大写字母显示，换句话说就是是否转换为大写字母。
语法：font-variant:[normal|small-caps]
初始值：normal
实用于：所有对象
向下兼容：是
范例：p{font-variant:small-caps}
4.字体加粗font-weight属性用于设定字体的粗细。跟HTML的<b>标记效果差不多，不同的是它包括9个不同级别的加粗（或者减细）。
语法：font-weight:[normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900]
初始值：normal
实用于：所有对象
向下兼容：是
其中属性值bolder和lighter是相对加粗和减细，即相对于上级元素或者初始值进行加粗。初始值normal相当于数字的400，bold则相当于700。
需要特别说明的是，不是所有的字体都有9个有效的加粗显示，一些加粗会在指定下组合。如果指定的加粗无效，会按以下原则选择：
● 500会被400代替，反之亦然。
● 100-300会被指定为下一较细的加粗，如果有的话。否则就是下一较粗的加粗。
● 600-900会被指定为下一较粗的加粗，如果有的话。否则就是下一较细的加粗。
实际使用中发现，当使用100-500时效果都相当于normal，当使用600-900时效果相当于使用了<b>标记。
5.字体大小font-size用语修改显示的字体的大小。可以使用的值包括绝对大小，相对大小，长度，百分比，其中使用长度时单位又分为绝对单位pt[（磅），mm（毫米），cm（厘米），pc（帕），in（英寸）]和相对单位[px（象素），em]。
语法：font-size:[<绝对大小>|<相对大小>|<长度>|<百分比>]
初始值：medium
实用于：所有对象
向下兼容：是
其中<绝对大小>允许值：xx-small|x-small|small|medium|large|x-large|xx-large
<相对大小>允许值：larger|smaller
<长度>允许值：所有大于零的正值
<百分比>允许值：同上
使用长度值时常用的单位是pt和px，实际上我们在使用HTML元素的属性width=#时用的就是px（象素）做单位，虽然没有书写出来。关于长度的单位以后会专门讲解。
6.字体属性font其实就是将前面的属性进行合并略写
语法：font:[<字体风格>||<字体变形>||<字体加粗>||<字体大小>||[/<行高>]||<字体科族>]
初始值：未定义。
实用于：所有对象
向下兼容：是
范例：p{font:italic bold 15px/20px} 宋体
字体属性就介绍完了，一时看不明白不要紧，慢慢使用就熟悉了。你可能会说，还有字体颜色之类的属性还没有介绍呀，怎么就完了呢？不要着急，这些属于颜色及文本属性，想了解吗？往后看吧。

颜色和背景属性

1.颜色属性允许网页制作者指定一个元素的颜色。实际上就是一个元素的文字颜色。
语法color:[<颜色>]
允许值：<颜色>
初始值：由浏览器决定
适用于：所有对象
向下兼容：是
颜色的描述规则就是HTML标记的颜色属性所使用的规则，包括如下几种（以定义红色为例）：
p{color:red}
p{color:#ff0000}
p{color:#f00}
p{color:rgb(255,0,0}}
2.背景颜色属性background-color用于设定一个元素的背景颜色。用法跟上面的颜色属性相同。
语法background-color:[<颜色>|transparent]
初始值：transparent（透明）
适用于：所有对象
向下兼容：否
范例：body{background-color:white}
为了避免与用户的样式表之间的冲突，无论任何背景颜色被使用的时候，背景图象都应该被指定。而在大多数情况下，设置无背景图象background-image:none都是合适的。
3.背景图象属性background-image用于设定一个元素的背景图象。它相当于HTML中的<body>标记的background属性，只是它可以给更多元素指定背景图象。
语法：background-image:[<图象url>|none]
初始值：none（无）
适用于：所有对象
向下兼容：否
其中指定图象时可以使用相对路径也可以使用绝对路径，格式为url(图象路径)。
范例：p{background-image:url(bg.jpg)}
4.背景重复属性background-repeat用于指定当背景图象尺寸小于相应元素尺寸时如何被重复。可以定义为平铺，仅横向平铺，仅纵向平铺，不平铺。
语法：background-repeat:[repeat|repeat-x|repeat-y|no-repeat]
初始值：repeat
适用于：所有对象
向下兼容：否
范例：p{background-repeat:no-repeat}
5.背景附件属性background-attachment用于指定背景图象是随内容滚动还是被看作油画固定不动。相当于<body>的bgproperties属性。
语法：background-attachment:[scroll|fixed]
初始值：scroll
适用于：所有对象
向下兼容：否
范例：body{background-attachment:fixed}
6.背景位置属性background-position用于指定背景图象的最初位置。这个属性只能应用于块级元素和替换元素（替换元素仅指一些已知原有尺寸的元素。HTML的替换元素包括img,input,textarea,select和object）
语法：background-position:[<百分比>|<长度>]{1,2}|[top|center|bottom]||[left|center|right]
初始值：0% 0%
适用于：块级元素和替换元素
向下兼容：否
范例：body{background-position:50% 50%}（注意中间需一空格）
7.背景属性background同样是前面几种属性的略写组合。用法自然不用多说了。
语法：background:[<背景颜色>||<背景图象>||<背景重复>||<背景附件>||<背景位置>]
初始值：未定义
适用于：所有对象
向下兼容：否
范例：body{background:#0099cc url(1.gif)}

CSS的文本属性

本部分内容包括：文字间隔（称为单词间隔也许更合适）属性word-spacing、字母间隔属性letter-spacing、文字修饰属性text-decoration、纵向排列属性vertical-align、文本转换属性text-transform、文本排列属性text-align、文本缩进属性text-indent以及行高属性line-height。常用的属性包括文字修饰，纵向排列，文本缩进和行高属性。
1.文字间隔属性word-spacing定义一个附加在文字（单词）之间的间隔数量。该值必须符合长度格式，允许使用负值。
语法：word-spacing:[normal|<长度>]
初始值：normal
适用于：所有元素
向下兼容：是
需要特别说明的是，该属性是针对英文单词的间隔，而不是中文的文字间隔，中文的文字间隔应该用下面讲到的letter-spacing。同时在中文版的IE浏览齐中也不支持该文字间隔属性（也许microsoft认为中国人不需要英语单词吧^_^）。
2.字母间隔属性letter-spacing定义一个附加在字符之间的间隔数量。该值必须符合长度格式，允许使用负值，一个设为0的值会阻止显示文字时的间隔调整。
语法：letter-spacing:[normal|<长度>]
初始值：normal
适用于：所有元素
向下兼容：是
范例：p{letter-spacing:3px;}
3.文字修饰属性text-decoration允许通过5个属性中的一个来修饰文本：underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁）、或者缺省地使用无。该属性常用来设置链接样式。
语法：text-decoration:[none|[underline||overline||line-through||blink]]
初始值：none
适用于：所有元素
向下兼容：否
范例：a:link,a:active,a:visited{text-decoration:none}a:hover{text-decoration:underline}
另外IE浏览器并不支持文字修饰属性值blink（闪烁），因此如果你使用该属性时看不到效果就不用奇怪了。还有就是链接的初始文字修饰属性就是下划线，要是你觉得不够美观，用该属性去掉就可以了。
4.纵向排列属性vertical-align可以用做定义一个内部元素的纵向位置，相对于它的上级元素或者相对于元素行。该值可以是一个相对于元素行高属性的百分比，它会在上级基线上增高元素基线的指定数量。允许使用负值。也可以是一个关键字。该属性对于图象设置特别有用。
语法：vertical-align:[baseline|sub|super|top|text-top|middle|bottom|text-bottom|<百分比>|baseline]
初始值：baseline
适用于：内部元素
向下兼容：否
范例：img{text-decoration:underline}
其中baseline：基线对齐，sub：下标，super：上标，text-top：与上级元素文字顶端对齐，text-bottom：与上级元素底端对齐，top：顶端与该行最高元素对齐，middle和bottom类似。
5.文本转换属性text-transform允许通过四个属性中的一个来转换文本：capitalize（每个字的第一个字母大写），uppercase（每个字母大写），lowercase（字母小写），none（使用原始值）。
语法：text-transform:[none|capitalize|uppercase|lowercase]
初始值：none
适用于：所有元素
向下兼容：是
范例：p{text-transform:capitalize}
6.文本排列属性text-align跟HTML元素中的align属性的用法是相同的，比较简单。
语法：text-align:[left|right|center|justify]
初始值：由浏览器决定
适用于：块级元素
向下兼容：是
范例：p{text-align:center}
其中的属性值justify是使文字两端对齐，若浏览器不支持该属性则使用左对齐或者右对齐代替。
7.文本缩进属性可以应用于块级元素（p，h1等），以定义该块级元素第一行可以接受的缩进数量。该值必须是一个长度或者百分比。若百分比则视上级元素的宽度而定。该属性常用于段落的缩进。
语法：text-indent:[<长度>|<百分比>]
初始值：0
适用于：块级元素
向下兼容：是
范例：p{text-indent:25px}
8.行高属性line-height用于设定元素内部文字基线之间的间隔值。当值为数字时，行高有元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值。
语法：line-height:[normal|<数字>|<长度>|<百分比>]
初始值：normal
适用于：所有元素
向下兼容：是
范例：p{line-height:200%}
此外还有一个用于英文单词断行的属性：word-break
范例：p{word-break:break-all}

样式表中的方框属性(1)

方框属性包括上边界margin-top、右边界margin-right、下边界margin-bottom、左边界margin-left、边界margin、上补白padding-top、右补白paddint-right、下补白padding-bottom、左补白padding-left、补白padding、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框宽度border-width、边框颜色border-color、边框风格border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框border、宽度width、高度height、漂浮float、清除clear共26种属性。下面分别介绍：
1.上边界属性margin-top用于设定元素上边界同其他元素之间的空白距离，当应用于标记时就相当于该标记的topmargin属性。上边界属性用一个指定的长度或者百分比来设置元素的上边界。百分比值参考上级元素的宽度。允许使用负值。
语法：marign-top:[<长度>|<百分比>|auto]
初始值：0
适用于：所有元素
向下兼容：否
范例：table{margin-top:20px}
2.右边界属性margin-right跟上边界属性用法相似，在此不再赘述，仅给出语法。
语法：marign-right:[<长度>|<百分比>|auto]
初始值：0
适用于：所有元素
向下兼容：否
范例：table{margin-right:20px}
3.下边界属性margin-bottom用法：同上。
语法：marign-bottom:[<长度>|<百分比>|auto]
初始值：0
适用于：所有元素
向下兼容：否
范例：table{margin-bottom:20px}
4.左边界属性margin-left同上。
语法：marign-left:[<长度>|<百分比>|auto]
初始值：0
适用于：所有元素
向下兼容：否
范例：table{margin-left:20px}
5.边界属性margin是用1～4个值来略写设置前面4个边界的。每个值都是长度、百分比或者自动。百分比参考上级元素的宽度。允许使用负值。
语法：marign:[<长度>|<百分比>|auto]{1,4}
初始值：未定义
适用于：所有元素
向下兼容：否
范例1：table{margin:20px 20px 20px 20px}
范例2：table{margin:20px}
范例3：table{margin:20px 10px}
范例4：table{margin:20px 10px 15px}
如果4个值都给出，它们分别对应上、右、下、左边界（如范例1）。如果只给出一个值，它将被应用于四个边界属性（比如范例2，table的四个边界都被指定为20px）。如果只给出两个或三个值，缺少的边界值将使用对边所指定的值（范例3只给出两个值，对应上边界和右边界，这时下边界将使用上边界的值20px，左边界将使用右边界的值10px。范例4只给出三各值，缺少左边界的值将使用右边界的值10px。）
如果边界属性在垂直方向上邻接了，会改用其中较大的那个值，比如设置<li>的margin-top为15px，margin-bottom为20px，则两个<li>元素之间的垂直方向上的边界会取20px为其值而不是两个值之和35px。而在水平方向上则不会按此规则选取较大值。
6.上补白属性padding-top描述了边框同内部元素之间的空白距离。比如一个表元td，它的内部元素，不妨假设为一段文字，其首行文字顶端到td上边框的距离就是上补白。该属性跟上边界比较相似，其值可以是一个长度或者百分比。百分比的值参考上级元素的宽度。但补白（包括下面的右补白，下补白等）不能象边界一样使用负值。
语法：padding-top:[<长度>|<百分比>]
初始值：0
适用于：所有元素
向下兼容：否
范例：p{padding-top:20px}
7.右补白属性padding-right用法同上补白。
语法：padding-top:[<长度>|<百分比>]
初始值：0
适用于：所有元素
向下兼容：否
范例：p{padding-top:20px}
8.下补白属性padding-bottom同上。
语法：padding-bottom:[<长度>|<百分比>]
初始值：0
适用于：所有元素
向下兼容：否
范例：p{padding-bottom:20px}
9.左补白属性padding-left同上。
语法：padding-left:[<长度>|<百分比>]
初始值：0
适用于：所有元素
向下兼容：否
范例：p{padding-left:20px}
10.补白属性是上补白、右补白、下补白、左补白属性的略写。用法同边界属性margin。
语法：padding:[<长度>|<百分比>]{1,4}
初始值：0
适用于：所有对象
向下兼容：否
范例1：p{padding:20px 20px 20px 20px}
范例2：p{padding:20px}
范例3：p{padding:20px 10px}
范例4：p{padding:20px 10px 15px}
样式表中的方框属性(2)

11.上边框宽度border-top-width定义了一个元素上边框的宽度。值可以是三个关键字中的一个，可以用于实现成比例的宽度。不允许使用负值。
语法：border-top-width:[thin|medium|thick<长度>]
初始值：视元素而定
适用于：所有元素
向下兼容：否
范例：p{border-top-width:2px}
注意单纯设置边框宽度而让边框风格为“none”的话也是看不见边框的，边框风格将在下面讲到。
12.右边框宽度border-right-width定义了一个元素右边框的宽度。值可以是三个关键字中的一个，可以用于实现成比例的宽度。不允许使用负值。
语法：border-right-width:[thin|medium|thick|<长度>]
初始值：视元素而定
适用于：所有元素
向下兼容：否
范例：p{border-right-width:2px}
12.下边框宽度border-bottom-width定义了一个元素下边框的宽度。值可以是三个关键字中的一个，可以用于实现成比例的宽度。不允许使用负值。
语法：border-bottom-width:[thin|medium|thick|<长度>]
初始值：视元素而定
适用于：所有元素
向下兼容：否
范例：p{border-bottom-width:2px}
14.左边框宽度border-left-width定义了一个元素左边框的宽度。值可以是三个关键字中的一个，可以用于实现成比例的宽度。不允许使用负值。
语法：border-left-width:[thin|medium|thick|<长度>]
初始值：视元素而定
适用于：所有元素
向下兼容：否
范例：p{border-left-width:2px}
15.边框宽度border-width是上边框，右边框，下边框，左边框属性的略写。用法同补白属性padding。
语法：border-width:[thin|medium|thick|<长度>]{1,4}
初始值：没有定义
适用于：所有对象
向下兼容：否
范例：p{border-width:20px 20px 20px 20px}
16.边框颜色border-color用语设置一个元素的边框色彩。用法同补白padding，可以使用1～4个值指定颜色。
语法：border-color:[<颜色>]{1,4}
初始值：颜色属性的值
适用于：所有对象
向下兼容：否
范例：p{border-color:#000000}
注意该属性在边框风格属性值为none时也是看不见效果的。
17.边框风格属性border-style用于设置一个元素的边框样式。这个属性必须用于指定可见的边框。可以使用1～4个关键字。用法同补白padding属性。
语法：border-style:[none|dotted|dashed|solid|double|groove|ridge|inset|ouset]{1,4}
初始值：none
适用于：所有对象
向下兼容：否
范例：p{border-style:solid}
其中属性值的含义：none（没有边框），dotted（点组成的虚线），dashed（短线组成的虚线），solid（实线），double（双线），groove（3D沟槽状边框），ridge（3D脊状边框），inset（3D内嵌），outset（3D外嵌）。
注意经实测，目前许多浏览仅支持none和solid两种属性，IE5则能支持solid,double,outset,inset,groove等属性。使用除none和solid以外的属性值时须多注意测试与权衡。
18.上边框属性border-top是一个用于设置一个元素上边框宽度，式样和颜色的缩写。注意只能给出一个边框式样，可以使用略写的边框属性。
语法：border-top:[<上边框宽度>||<边框式样>||<边框颜色>]
初始值：未定义
适用于：所有对象
向下兼容：是
范例：p{border-top:2px solid #999999}
19.右边框属性border-right使用方法同上。
语法：border-right:[<边框宽度>||<边框式样>||<边框颜色>]
初始值：未定义
适用于：所有对象
向下兼容：否
范例：p{border-right:2px solid #999999}
20.下边框属性border-bottom使用方法同上。
语法：border-bottom:[<边框宽度>||<边框式样>||<边框颜色>]
初始值：未定义
适用于：所有对象
向下兼容：否
范例：p{border-bottom:2px solid #999999}
21.左边框属性border-bottom使用方法同上。
语法：border-left:[<边框宽度>||<边框式样>||<边框颜色>]
初始值：未定义
适用于：所有对象
向下兼容：否
范例：p{border-left:2px solid #999999}
22.边框属性border用于设定一个元素边框宽度，式样和颜色的略写。边框属性只能为一个元素的四个边框设置相同的值，若需设置不同值，则必须使用其它如边框颜色，边框宽度等属性。
语法：border:[<边框宽度>||<边框式样>||<边框颜色>]
初始值：未定义
适用于：所有对象
向下兼容：否
范例：p{border:2px solid #999999}
23.宽度属性width用于设置一个块级元素或者替换元素的宽度，可以使用具体的长度或者关键字auto来进行指定。初始值为auto，即元素原有宽度，百分比值参考上级元素的宽度，不允许使用负值。
语法：width:[<长度>|auto]
初始值：auto
适用于：块级元素或替换元素
向下兼容：否
范例：p{width:80%}
24.高度属性height同宽度属性width相似，可以使用具体的长度或者关键字auto表示，不允许使用负值。唯一的区别是不允许使用百分比值表示。
语法：height:[<长度>|auto]
初始值：auto
适用于：块级元素或替换元素
向下兼容：否
范例：p{height:550px}
25.漂浮属性float允许网页制作者将文本环绕在一个元素的周围。这同HTML中<img>标记的align=left或align=right是一样的：图象位于左边（或右边），文字则位于右边（或左边）和下边。但样式表中的漂浮属性可以用于所有对象而不是HTML中的仅仅局限于图象和表格。
语法：float:[left|right|none]
初始值：none
适用于：所有元素
向下兼容：否
范例：img{float:left}
26.清除属性clear用于指定一个元素是否允许有元素漂浮在它的旁边。值left清除在其左边的元素并安排到下边。right类似。both则清除左右侧元素。
语法：clear:[none|left|right|both]
初始值：none
适用于：所有元素
向下兼容：否
范例：img{clear:right}

样式表的分类属性

分类属性（也称分级属性）包括显示属性display、空白属性white-space、目录样式类型list-style-type、目录样式图象list-style-image、目录样式位置list-style-position和目录样式list-style共6种。
1.显示属性display允许使用下面四个值中的一个来定义一个元素：block（在元素的前后都有换行）、inline（在元素的前后都没有换行，相当于行内元素）、list-item（与block相同，但增加了目录项标记）、none（不显示）
语法：display:[block|inline|list-item|none]
初始值：视元素而定
适用于：所有元素
向下兼容：否
范例：img{display:block}
当元素应用了display属性的none值时，元素不参与排版，即元素不会占用任何页面空间，而不管元素本来尺寸有多大。直觉上就如同页面上没有该元素一般。另外经实测，IE不支持list-item属性值。
2.空白属性white-space将决定如何处理一个元素内的空格，该属性的值可以取normal（将多个连续的空格折叠成一个）、pre（不折叠空格）和nowrap（不允许换行，除非遇到<br>）3个中的一个。
语法：white-space:[normal|pre|nowrap]
初始值：normal
适用于：块级元素
向下兼容：是
范例：p{white-space:pre}
值得一提的是，该样式属性目前尚未得到浏览器的广泛支持，包括对样式表支持教好的IE5在内。
3.目录样式类型属性list-style-type用于指定目录项标记的类型，当目录样式图象值为none或当图象载入选项被关闭时使用。该属性在列表中使用较多。
语法：list-style-type:[disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none]
初始值：disc
适用于：带有显示值的目录项元素
向下兼容：是
范例：li{list-style-type:square}
属性值的含义说明：disc（圆饼，即实心圆），circle（圆圈，即空心圆），square（方块），decimal（十进制数1,2,3,4等），lower-roman（小写罗马数字i，ii，iii等），upper-roman（大写罗马数字Ⅰ，Ⅱ，Ⅲ，Ⅳ等），lower-alpha（小写字母a，b，c，d等），upper-alpha（大写字母A，B，C，D等），none（无）
4.目录样式图象属性list-style-image用于指定使用哪个图象代替目录项标记进行显示。
语法：list-style-image:[<url>|none]
初始值：none
适用于：带有显示值的目录项元素
向下兼容：是
范例：li{list-style-image:url(img/abc.gif)}
5.目录样式位置属性list-style-position可取的值包括inside（内部）和outside（外部）。用于决定目录项标记的位置放在哪里，如果是inside值，则目录项标记如同目录项的内部元素。初始值为outside。
语法：list-style-position:[inside|outside]
初始值：outside
适用于：所有对象
向下兼容：是
范例：li{list-style-position:inside}
6.目录样式属性list-style是目录样式类型、目录样式位置和目录样式图象三个属性的略写。
语法：list-style:[<目录样式类型>||<目录样式位置>||<url>]
初始值：未定义
适用于：带有显示值的目录项元素
向下兼容：是
范例：li{list-style:square inside url(img/abc.gif)}

样式表的鼠标属性

CSS的鼠标属性用于设置鼠标移动到元素上时的鼠标形状。比如说，在通常情况下，鼠标呈朝向左上方的箭头，而当鼠标移动到超链接上时会呈手状，有了鼠标属性，我们就可以随意的定制鼠标移动到网页元素上的“玉容”啦。
语法：cursor:[auto|crosshair|default|hand|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help]
初始值：未定义
适用于：所有元素
向下兼容：是
范例：a{cursor:crosshair}
你只要将你的鼠标移动到语法栏对应的值上就可以看到鼠标形状了。其中初始值为auto，而值default是指使用鼠标正常状况下的形状（操作系统的默认形状，当未做更改时是朝向左上方的箭头）。
不过部分IE5会不正常的支持该鼠标属性，表现为取值nw-resize时鼠标形状本来应该是朝向左上方的箭头状（即鼠标正常时的默认形状），实际上却变成了改变物件大小的“沿对角线调整”形状了。遇到这种情况你所看见的鼠标样式也就不是正确的样式了。

样式表的定位属性

定位属性包括位置属性position、左边距属性left、上边距属性top、元素宽度属性width、元素高度属性height、剪切属性clip、溢出处理属性overflow、Z轴定位属性z-index和可视属性visibility。定位属性在DHTML中占有重要地位，一些javascript菜单正因为该定位属性才能得以实现。
1.定位类型属性position可以取三个值static（静态定位）、relative（相对定位）和absolute（绝对定位），其中static是其初始值。
语法：position:[static|relative|absolute]
初始值：未定义
适用于：所有元素
向下兼容：否
范例：div{position:absolute}
一个元素最初即具有static类型的定位属性??静态定位。静态定位和相对定位效果相当，区别是，前者不能为内部元素提供定位依据，而后者可以。这些话可能你还不能理解，先让我们看看绝对定位，回过头来再讲静态和相对定位。
说到绝对定位，其实很好理解，它的原理其实就相当于坐标定位。定位参照点（相当于坐标原点）通常在浏览器显示区域的左上角，竖直向下方向为Y轴的正方向。定位参照点到被定位元素左上角的竖直距离用top进行设定。水平向右方向为X轴的正方向，定位参照点到被定位元素左上角的水平距离用left进行设定。比如将一个图象定位在距离原点（150象素，100象素）的网页位置上，使用下面的语句即可：
<img src="url" style="position:absolute;left:150px;top:100px">
这样也就很容易理解，为什么一个使用绝对定位的元素，将之放置于某个元素的前面或者后面都不会影响它在页面上的位置的。
那么什么又是静态定位和相对定位呢？前面说过，任何一个HTML元素，它的初始定位属性值都是静态。假设一个页面中有并且只有三个HTML的段落元素p，则浏览器在显示这三个段落时会按顺序将第二个段落放在第一个段落之后，第三个段落放在第二个段落之后。假如我们修改HTML文件??删除第二个段落，这时第三个段落就占据原来第二个段落的位置，而如果增加第一个段落的内容，则第二个，第三个段落都会往下移。这就是静态定位和相对定位的重要性质：一个元素的位置视前面的元素而定。
假如页面中有一个table元素，我们将一个绝对定位元素，比如前面举例的那个img元素书写在table元素的内部，这时若table元素的定位属性是相对定位，则img的定位参照点就是table元素的左上角，而不是浏览器的左上角，当table元素在浏览器上的位置变动时，img元素势必也会做相应的变动。但若table使用的是静态定位，则img的定位参照点仍然是浏览器的左上角，而不管table元素在页面上的具体位置如何。这就是相对定位和静态定位的区别。
假设一个元素内部没有绝对定位元素，那么它的定位属性无论是静态还是相对，该元素的显示效果是相同的。此外采用相对定位时还可以通过指定left和top属性指定该元素的位置偏移。正值表示向X或者Y轴正方向偏移，负值相反。
2.上边距属性top刚刚已经讲过了，就是被定位元素左上角到定位参照点的竖直距离。该值是一个合法的长度值，允许使用负值和百分比值。
语法：top:[<长度>]
初始值：视position属性而定
适用于：所有元素
向下兼容：否
范例：同上
3.左边距属性left同2。
语法：left:[<长度>]
初始值：视position属性而定
适用于：所有元素
向下兼容：否
范例：同上
4.元素宽度和高度属性在方框属性中已经讲解过了，不再赘述。
5.剪切属性clip定义了一个位于被剪切物件上的剪切形状（矩形），物件在该矩形区域内的部分被予以显示，而位于区域外的部分则被“剪掉”了，因此叫做剪切。
语法：clip:[<shape>|auto]
初始值：auto
适用于：所有元素
向下兼容：否
范例：img{clip:rect(20px 50px 60px 20px)}
6.溢出属性overflow定义了一个元素的内部元素在超出该元素大小后的处理方式。可取的值包括：visible（可见）、hidden（隐藏）、scroll（滚动）和auto（自动）。
语法：overflow:[visible|hidden|scroll|auto]
初始值：auto
适用于：所有元素
向下兼容：否
范例：p{width:400px;height:400px;overflow:hidden}
其中visible（可见）是使元素适当扩展高度或者宽度以全部显示内部元素。hidden则对超出元素范围的内部元素隐藏掉，这跟剪切有点相似。scroll则总是提供滚动条，而不管内部元素是否超出范围。auto则是由浏览器决定何时提供滚动条。需要注意的是该属性必须与宽度和高度属性一起指定，以便判断是否溢出。
7.Z轴定位属性z-index定义了元素在Z轴（垂直于浏览器向外方向）上的顺序。当几个绝对定位元素产生重叠时，哪个元素应该在最上面，哪个在最下面成了网页制作者不得不考虑的问题。z-index属性正好解决该问题。其合法的值应是一个整数，数值大的位于上方。初始值为0，允许使用负值。
语法：z-index:[<整数>]
初始值：0
适用于：所有元素
向下兼容：否
范例：img{position:absolute;z-index:-2}
若不赋予元素z-index属性的值，浏览器会按元素出现的先后顺序决定元素在Z轴上的顺序，后出现的元素将处于上方。
语法：z-index:[<整数>]
初始值：0
适用于：所有元素
向下兼容：否
范例：img{position:absolute;z-index:-2}
8.可视属性visibility用于指定元素是否可见，可取的值包括inherit（继承）、visible（可见）、hidden（隐藏）。初始值为inherit（继承），使元素的可视属性根据上级元素来确定。
语法：visibility:[inherit|visible|hidden]
初始值：inherit
适用于：所有元素
向下兼容：是
范例：img{visibility:hidden}
注意若元素的可视属性为hidden，则该元素只是不显示出来而已，但仍然占据排版位置，也就是说元素所在的位置仍然存在，只不过是一片空白而已。而前面的display属性则相反，一旦display属性值为none，对应的元素就如同不存在一般。
样式表单位汇总

样式表的单位大致可以分为长度单位，百分比单位，颜色单位和统一资源管理（URLs）四大类。下面做介绍：
1.长度单位
一个长度的值由可选的正号“+”或负号“-”、加上一个数字以及表明单位的两个字母组成。在一个长度的值之中是没有空格的，例如12 px就不是一个有效的长度单位，但12px是有效的。一个为0的长度不论使用什么单位都是一样的，因此不需要单位声明。
长度单位可以分为相对单位和绝对单位，CSS都予以支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好的适应不同的媒体，所以在许多情况下是首选。以下是有效的相对单位：
px（pixel，象素，相对于屏幕的分辨率）
em（元素的字体高度）
ex（字母“x”的高度）
很多人不理解象素怎么是一个相对单位。其实象素是相对于屏幕的分辨率的，而屏幕的分辨率通常是可调的（注意此处的分辨率和显示器的分辨率如800×600是不同的概念）。若你的操作系统分辨率为72象素/英寸，则1px=1/72英寸，余类推。在日常使用中，mac操作系统中的分辨率为72dpi，windows的则为96dpi，当然若在显示属性中选用“大字体”则分辨率为120dpi。
绝对单位视输出介质而定，所以在网页制作方面逊色于相对单位。以下是有效的相对单位：
in（inch，英寸，1英寸=2.54厘米）
cm（centimeter，厘米，不用多说了吧？）
mm（millimeter，毫米）
pt（point，点，1点=1/72英寸）
pc（pica，帕，1帕=12点）
在网页设计中，经常见到的单位是px和pt，许多人爱用pt做单位，这本是无可厚非的，因为在大部分电脑中9pt和11pt的文字都非常精美。可偏偏一些人没有弄清楚象素到底是绝对单位还是相对单位，就开始混用。于似乎一方面使用HTML标记的属性width和height（这些属性的值使用的单位就是象素），一方面用pt定义文字大小，在自己的电脑上测试完成后就放到网上去了。
却不知一些朋友在自己的windows操作系统中选用了大字体，使屏幕的分辨率为120dpi，而1pt=1/72英寸，所以1pt=1.5px；而通常情况下屏幕分辨率为96dpi，此时1pt=1.2px。试想这样的情况下网页会是怎样的面目全非。
我不是反对使用pt，也不是嘲笑那些没有搞明白这些区别的人，对于样式表学得不深的情况下是可以理解这种错误的。我在学习样式表之初也犯过这种错误，但一些大机构也出现这种错误就有点让人觉得不可思议了，我就见过一套书的配套光盘上的用做漫游的网页出现这种问题，在选用大字体的系统上根本无法使用。
若在制作网页时，整个页面都使用样式表以pt做单位，不使用HTML的width和height属性当然不会出现问题。若你的页面仅仅是一些对布局要求不严格的页面，改变文字大小不会改变页面美观，在这种情况下使用pt也是不错的。但若你的页面布局严密就应该好好考虑了。
2.百分比单位
一个百分比单位由可选的正号“+”或负号“-”加上数字和百分比号“%”组成，同样，在百分比值中是没有空格的。
百分比值是相对于其他数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。
3.颜色单位
颜色值是一个关键字或一个RGB格式的数字。
windows的VGA（视频图象阵列）形成了16个关键字：aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow。
RGB颜色有如下四种形式：
#rrggbb（如#00cc00）
#rgb（如#0c0）
rgb(x,x,x)，x是一个介于0到255之间的整数。如rgb(0,204,0)
rgb(y%,y%,y%)，y是一个介于0到100之间的整数。如rgb(0%,80%,0%)
上述例子指定的是同一种颜色。
4.统一资源管理（URLs）
一个URLs值的格式为：url(foo)，foo是一个URL（统一资源定位，因特网的地址）。URLs可以选择用单引号或者双引号，并且在URLs之前或者之后可以包含空格。
在URLs中的括弧、逗号、空格、单引号、双引号都必须避开反斜杠。不完整的URLs将被浏览器理解为样式表的源代码，而不是HTML源代码。

样式表实例??滚动条控制

　　自从dhtml出现以来，微软对dhtml功能的加强就没有停止过，在微软最新的游览器internet explorer 5.5的的ie5.5增加了许多新的样式表内容，对滚动条的样式进行修改也是其中之一，下面我们简单地介绍一下涉及浏览器滚动条的样式表内容：
1．overflow内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立体滚动条亮边的颜色
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色
以上七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。
使用以上的样式定义内容，我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式，第一组样式属性用于设定被设定对象是否显示滚动条，第二组样式属性则用于设置滚动条的颜色，要注意的本文涉及的样式属性都是ie才能支持的，第二组的样式属性只有ie5.5版本才能支持，所以请大家在调试的时候注意。
我们通过几个实例来讲解上述的样式属性：
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条
<body style="overflow-x:hidden">
没有垂直滚动条
<body style="overflow-y:hidden">
没有滚动条
<body style="overflow-x:hidden;overflow-y:hidden">或<body style="overflow:hidden">
2.设定多行文本框的滚动条
没有水平滚动条
<textarea style="overflow-x:hidden"></textarea>
没有垂直滚动条
<textarea style="overflow-y:hidden"></textarea>
没有滚动条
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>
3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果：
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">
4.设定其他元素时，基本上一样，你最好是在样式表文件中定义好一个类，这样你就可以重复使用了。
.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}
将以上语句加入到样式表文件中或html头部的<style></style>当中，然后使用
<textarea class="coolscrollbar"></textarea>
快快行动，让你的主页马上酷起来。