一、边框属性
每一个网页都可以理解成是被一个方框框起来的，而页面中不同的部分又可以
分为一个个小的方框。因此定义方框的边距、边界、颜色等的边框属性应用而生。
1、边距属性：
· 左边距（margin-left） ·右边距（margin-right） ·上边距（margin-top） ·下边距（margin-bottom） ·边距（margin）
边距属性定义HTML页面中方框四边和其他元素之间的空白距离，每一个margin-side属性只影响到一条边，而margin则提供了一个同时设置四个边距的机会。
2、填充属性：
·左填充（padding-left） ·右填充（padding-right） ·上填充（padding-top） ·下填充（padding-bottom） ·填充（padding）
填充属性设置边框和内部元素的距离。它和边距属性十分相似，每个padding-side定义一个边框距离，padding则同时定义四个距离。
3、边界属性：
·上边界宽（border-top-width） ·右边界宽（border-right-width）
·下边界宽（border-bottom-width） ·左边界宽（border-left-width） ·边界宽（border-width）
这几个属性定义边界宽度，用thin、medium和thick分别表示细、中等和粗，或者指定具体的数值来定义边界的宽度。
4、 边界样式（border-style）
该属性用以定义边框的风格呈现式样。共有九种。
none － 不显示边框，为缺省值 dotted － 点线 dashed —虚线 solid － 实线 double － 双线 groove －凹线 ridge － 凸线
inset － 使整个方框凸起
http://www.zuoan.info SEO左岸博客搜集整理
outset － 使整个方框凹陷 ·上边界（border-top） ·右边界（border-right） ·下边界（border-bottom） ·左边界（border-left） ·边界（border） 这几个是简写属性，它集合了上面几种属性的特点，可使用其给边框一次性定义宽度、式样和颜色。各属性值之间用空格隔开。
5、边界颜色（border-color） 这个属性定义边界的颜色，可以用16种颜色名或RGB值来设置。16种颜色名分别为：
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
RGB值则应表示为#RRGGBB或r%,g%,b%。 #rrggbb (如，#00cc00)
rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0))
rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如，rgb(0%,80%,0%))
6、尺寸属性
定义方框的宽度width和高度height。
例：DIV.sample {width: 300px; height: 200px }
7、浮动和清除属性
浮动属性是指某一对象在母体元素内的浮动位置，清除属性和浮动属性一起使用，则表示同一母体内的其他对象可以流到浮动对象的旁边。 例：
.float1 { float: left; clear: right }
假如这个样式定义在表格单元中的某个对象，则该对象将浮动在单元中的左边，而同一单元格中的其他对象在它右边的周围部分。
这里是一个比较完整的例子，把这个例子按样输入，建立一个HTML文件，看看它的显示样式：
< html> < head>
< title> a sample< /title> < style>
< !-- DIV.example {margin-left: 20px; padding-top: 50px; border: 10px red outset; float: right clear: none }
< /style> < /head> < body>
< div class=\"example\"> < p>这是一个关于边框属性的完整实例< /p> < p>看看它的显示
http://www.zuoan.info SEO左岸博客搜集整理
风格< /p>
< /div> < /body> < /html>
二、字体属性
字体属性共分五种：字体家族（font-family）、字体风格（font-style）、字体变体（font-variant）、字体黑度（font-weight）、字体尺寸（font-size）;
此外font属性是一个总体属性，可一一指定以上各种属性和属性值。
1、字体家族（font-family）
通过font-family指定字体类型，其语法为：
标记 {font-family: 字体类型，字体类型，字体类型} 例：p {font-family: \"Times New Roman\
假如字体类型之间有空格，就象Times New Roman，必须用引号将之括起，中文字体也须用括号括起，列出多种类型，以防浏览用户无前面的字体类型时，可以用后一种字体类型将之取代。
2、字体风格（font-style）
属性值：normal（普通）、italic（斜体）、oblique（倾斜），默认值为normal。 例：h1 {font-syle: italic}
3、字体变体（font-variant）
属性值：normal（普通）和small-caps（小型大写字母），缺省值为normal。
字体变体属性是让字体以小型大写方式来显示。小型大写方式看起来是一般大写字母的75％－80％左右。
该变体在某些需要特殊表现的标题中比较有用。例： H1 {font-variant: small-caps}
4、字体加粗（font-weight）
属性值：normal、 bold、 lighter、 bolder、以及数值100－900。
该属性用以指定字体粗细的显示，并不是所有字体都可以显示这些指定的加粗程度，因此有些情况下这些指定值会被替代，例如100到300被lighter替代，600到900则替换bolder，反之亦然。例：
h1 < font-weight: lighter> p < font-weight: 800>
5、字体尺寸（font-size）
字体尺寸可设置绝对尺寸、相对尺寸、长度、百分比。
·绝对尺寸分为xx-small, x-small, small, medium, large, x-large, xx-large七种，它们以各种字体的medium尺寸成比例缩放，每一级1.5倍。
·相对尺寸有larger和smaller两种，根据字体原来的大小来决定缩放以后的大小。
http://www.zuoan.info SEO左岸博客搜集整理
·长度是以pt, points, cm, mm, inch等度量单位用具体数值来指定字体的尺寸大小。 ·百分比是把字体设置成原来尺寸的百分比值，可以任意指定数值。
例如：
h1 {font-size: 150%} td {font-size: 10pt} p {font-size: smaller}
6、字体（font）
该属性使你可以把上述字体的各种属性合并到一行代码中指定，也即提供了一个实现字体属性的快捷方式，各种属性值之间用空格隔开。 例如：
td {font: italic bold 12pt \"方正楷体简体\"，\"宋体\"}
三、文本属性
文本属性设置文本的一些显示特性，例如文本对齐、文本缩进、行间距、字间距等。
1、文本对齐text-align
属性值：left（左）, right（右）, center（居中）, justify（两端对齐）。 例：h1 {text-align: center}
2、文本缩进text-indent
该属性有效的控制了文本段落第一行的缩进，其值可以指定，是长度或段落宽度的百分比。
例：p {text-indent: 1.0 in}
3、行高line-height
该属性设置行与行之间的间距，其值可以为数值、长度或百分比，百分比以行高为基础。 例：body {line-height: 120%}
4、字间距letter-spacing
字间距设置字与字之间的距离，同样可以用数值、长度或百分比来指定，百分比以字符大小为基础。
例:body {letter-spacing: 0.5em} 顺便提一下，文本属性中还有一个单词间距（word-spacing），设置每个单词之间的距离，对于中文页面来讲，可能很少用到。
5、文本装饰text-decoration
属性值：underline（下划线）, overline（底线）, line-through（线穿过）, blink（闪烁）, none(无)。
例：h3 {text-decoration: underline}
6、垂直对齐vertical-align
http://www.zuoan.info SEO左岸博客搜集整理
属性值：baseline（基准线）, super（上标）, sub（下标）, top（顶部）, text-top（文本顶部）, middle（中）, bottom（底部）, text-bottom（文本底部）和百分比。
通过不同的值设某对象相对其他文本的位置，特别有用的是，上标、下标成为可能。 例： < p>平方值：3< font style=\"vertical-align:super\">2< /font>< /p>
7、文本变换text-transform
属性值：capitalize（首字母大写）, uppercase（大写）, lowercase（小写）和none（无）。缺省值为none。
例： p {text-transform: capitalize}
四、颜色与背景属性
在很多时候，要用到颜色属性，指定文本段落、标题、背景等的颜色，背景属性则用于设定背景图像在浏览器中的显示方式。
1、颜色属性：color
属性值：16种颜色名（上文已经介绍过）、数值（#RRGGBB或是r%,g%,b%）。
在< font>、< p>、< body>、< table>及其单元元素、标题等对象都可以用到color属性。下例指定超链接的初始颜色和被激活时的颜色： < style type=\"text/css\"> a { color: green} a:hover { color: red} < /style>
2、背景属性 ·background-color
定义页面或指定对象的背景颜色，属性值和颜色属性相同。 ·background-image
属性值：none, url（address），包括相对路径和绝对路径，指定对象的背景图像。 ·background-repeat
属性值：no-repeat（无重复）, repeat（重复）, repeat-x（x方向重复）, repeat-y（y方向重复），缺省值为repeat，指定背景图像的显示方式。该属性需与background-image和background-position组合使用。
·background-attachment
属性值：scroll（随对象一起滚动）, fixed（固定），缺省值为scroll。该属性指定对象的背景图像是否与对象一起滚动，或是固定在页面上的某一个位置。这个属性与background-image组合使用。
·background-position
属性值：垂直位置vertical，指定top, center, bottom和具体数值、百分比；水平位置horizontal，指定left, center, right和具体数值、百分比。定义背景图像的绝对或相对位置显示。
http://www.zuoan.info SEO左岸博客搜集整理
这是一个简写属性，可以把上述所有背景属性归纳到一行代码中定义。 这里是一个较完整的例子：
body { background-image: url(yueju/images/002.gif); background-repeat: no-repeat; background-position: 20px 50px; background-attachment: fixed}
用background属性简写为：
body { background: url(yueju/images/002.gif) no-repeat 20px 50px fixed}
五、分类属性
分类属性控制了浏览器的显示方式，我们知道在HTML语言中，对于空格和换行的处理是缺陷所在，分类属性的到来使这些特性的控制成为可能。
分类属性包括显示属性、空白属性和列表属性。下面一一的介绍。
1、显示属性display
通过显示属性控制HTML页面中被定义对象在浏览器中的显示方法。这个属性有四个值：
·块（block）――在该对象前后自动增加分行符
例：text< img style=”display: block” scr=”photo.jpg” >text 图像前后的文字将与图像分行显示。
·内联（inline）――这个对象前后的元素与之在一行显示
这个属性值正好相反，当需要对象与前一元素强制性在同一行时使用该值。
·列表项（list-item）――加一个列表项标记，其余同块
该属性值与< LI>、< DD>、< OL>、< UL>等列表标记一起使用。
·无（none）－－对象不显示
该属性值在某种情况下很有用，比如事先隐藏正确答案，直到经过某种操作以 后才显示。
2、空白属性white-space
制表符、空格和换行泛称空白，HTML页面显示时，通常根据浏览器窗口的大小自动折行，多余的空白符忽略成一个空格。< PRE>标记可以控制文本在浏览器中的显示，但该标记的限制性很大，只对一些非比例字体才有效，并且每次用到这个命令框起所有文本也相当麻烦，空白属性提供了这种方便。 空白属性有三个值：
·普通（normal）――该属性值保持浏览器自动换行的特性。
·保持原样（pre）――这个值与使用< PRE>标记一样，告诉浏览器按照文本输入原样显示，并不自动折行。
·不折行（nowrap）――这个值把文本中的回车、换行和多个空格都显示成一个
http://www.zuoan.info SEO左岸博客搜集整理
空格，换行只由< BR>标记来控制。
3、列表属性
1)、列表－样式－类型list-style-type
该属性用以改变HTML中列表项的外形显示。它有下列值：disc（圆盘）、circle（圆圈）、square（正方）、decimal（小数点）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）。
2)、列表－样式－图像list-style-image
这个属性用来指定图像作为列表标记，缺省值为无，当它被设置时，list-style-type属性不显示，可使用绝对或相对位置指定图像。
例：< ul style=“list-style-image:url(http://www.xxx.com/abc.gif)\">
因篇幅问题不能全部显示，请点此查看更多更全内容