【html】css样式
字体名称属性(font-family)
这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：
.s1 {font-family:Arial}
<html>
<head>
<title>字体名称属性 font-family</title>
<STYLE>
.s1 {font-family:Arial}
.s2 {font-family:Tahoma}
.s3 {font-family:Courier}
.s4 {font-family:Verdana}
.s5 {font-family:"Book Antiqua"}
</STYLE>
</head>
<body>
<p>The font-family value of the text is the browser default font.</p>
<p class = "s1">The fon-family value of the text is "Arial"。</p>
<p class = "s2">The fon-family value of the text is "Tahoma"。</</p>
<p class = "s3">The fon-family value of the text is "Courer"。</</p>
<p class = "s4">The fon-family value of the text is "Verdana"。</</p>
<p class = "s5">The fon-family value of the text is "Book Antiqua"。</</p>
</body>
</html>
字体大小属性(font-size)
这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下：
.s2 {font-size:16pt}
<html>
<head>
<title>字体大小属性 font-size</title>
<STYLE>
BODY{font-size:10pt}
.s1 {font-size:16px}
.s2 {font-size:16pt}
.s3 {font-size:80%}
.s4 {font-size:larger}
.s5 {font-size:xx-large}
</STYLE>
</head>
<body>
<p>这段文字大小是10pt。</p>
<p class = "s1">这段文字大小是16px。</p>
<p class = "s2">这段文字大小是16pt。</p>
<p class = "s3">这段文字大小是10pt的80%。</p>
<p class = "s4">这段文字的大小比10pt大。</p>
<p class = "s5">这段文字的大小是特大号(xx-large)。</p>
</body>
</html>
字体风格属性(font-style)
这个属性有三个值可选：normal, italic, oblique。normal是缺省值，italic, oblique都是斜体显示。例句如下：
.s1 {font-sytle:italic}
<html>
<head>
<title>字体风格属性 font-style</title>
<STYLE>
.s1 {font-style:italic}
.s2 {font-style:oblique}
</STYLE>
</head>
<body>
<p>这段文字风格是normal，正常显示。normal是字体风格属性(font-style)的缺省值。</p>
<p class = "s1">这段文字的字体风格(font-style)属性值是italic，斜体显示。</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是oblique，斜体显示。</p>
</body>
</html>
字体浓淡属性(font-weight)
这个属性常用值是normal和bold，normal是缺省值。例句如下：
<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>
<html>
<head>
<title>字体浓淡属性 font-weight</title>
</head>
<body>
<p>这段文字没有设浓淡属性。<p>
<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>
<p style = "font-weight:lighter">这段文字字体的浓淡属性(font-weight)值是lighter。<p>
<p style = "font-weight:200">这段文字字体的浓淡属性值(font-weight)是200。<p>
<p style = "font-weight:800">这段文字字体的浓淡属性值(font-weight)是800。<p>
</body>
</html>
字体变量属性(font-variant)
这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下：
.s1 {font-variant:small-caps}
<html>
<head>
<title>字体变量属性 font-variant</title>
<STYLE>
.s1 {font-variant:small-caps}
</STYLE>
</head>
<body>
<p>字体变量(font-variant)属性有两个值，一个是缺省值normal，另外一个是small-caps。下面这段文字的字体变量属性(font-variant)是small-caps。</p>
<p class = "s1">The font-variant value of the text is "small-caps". </p>
</body>
</html>
字体属性(font)
这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：
.s1 {font:italic normal bold 11pt arial}
<html>
<head>
<title>字体属性 font</title>
<STYLE>
.s1 {font:italic normal bold 11pt Arial}
.s2 {font:normal small-caps normal 14pt Courier}
</STYLE>
</head>
<body>
<p class = "s1">这段文字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是normal，字体变量(font-variant)属性值是small-caps，字体浓淡(font-weight)属性值是normal，字体大小(font-size)属性值是14pt，字体名称(font-family)属性值是Courier。</p>
</body>
</html>
字体颜色(color)
字体颜色用CSS中的color属性来表示
CSS常用文本属性
文本对齐属性(text-align)
这个属性用来设定文本的对齐方式。有以下值：
• left (居左，缺省值)
• right (居右)
• center (居中)
• justify (两端对齐)
示例代码如下：
.p2 {text-align:right}
<html>
<head>
<title>文本对齐属性 text-align</title>
<style type="text/css">
.p1{text-align:left}
.p2 {text-align:right}
.p3{text-align:center}
</style>
</head>
<body>
<p class = "p1">这段的本文对齐属性(text-align)值为居左。</p>
<p class = "p2">这段的本文对齐属性(text-align)值为居右。</p>
<p class = "p3">这段的本文对齐属性(text-align)值为居中。</p>
</body>
</html>
文本修饰属性(text-decoration)
这个属性主要设定文本划线的属性。有以下值：
• none (无，缺省值)
• underline (下划线)
• overline (上划线)
• line-through (当中划线)
示例代码如下：
.p2 {text-decoration: underline}
<html>
<head>
<title>文本修饰属性 text-decoration</title>
<style type="text/css">
.p1{text-decoration: none}
.p2 {text-decoration: underline}
.p3{text-decoration: line-through}
.p4 {text-decoration:overline}
</style>
</head>
<body>
<p class = "p1">文本修饰属性(text-decoration)的缺省值是none。</p>
<p class = "p2">这段的文本修饰属性(text-decoration)值是underline。</p>
<p class = "p3">这段的文本修饰属性(text-decoration)值是line-through。</p>
<p class = "p4">这段的文本修饰属性(text-decoration)值是overline。</p>
</body>
</html>
文本缩进属性(text-indent)
这个属性设定文本首行缩进。其值有以下设定方法：
• length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
• percentage (百分比，相当于父对象宽度的百分比)
示例代码如下：
.p1 {text-indent: 8mm}
<html>
<head>
<title>文本缩进属性 text-indent</title>
<style type="text/css">
.p1 {text-indent: 8mm}
.d1 {width:300px}
.p2 {text-indent:50%}
</style>
</head>
<body>
<p>下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。</p>
<p class = "p1">芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>
<div class = "d1">
<p class = p2>芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>
</div>
</body>
</html>
行高属性(line-height)
这个属性设定每行之间的距离。其值有以下设定方法：
• normal (缺省值)
• length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
• percentage (百分比，相当于父对象高度的百分比)
示例代码如下：
.p1 {line-height:1cm}
<html>
<head>
<title>行高属性 line-height</title>
<style type="text/css">
.p1 {line-height:1cm}
.p2 {line-height:2cm}
</style>
</head>
<body>
<p class = "p1">这个段落的CSS行高属性(line-hight)值为1cm，即每行之间的距离是1厘米。</p>
<p class = "p2">这个段落的CSS行高属性(line-hight)值为2cm，即每行之间的距离是2厘米。</p>
</body>
</html>
字间距属性(letter-spacing)
这个属性用来设定字符之间的距离。
• normal (缺省值)
• length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
示例代码如下：
.p1 {letter-spacing: 3mm}
<html>
<head>
<title>字间距属性 letter-spacing</title>
<style type="text/css">
.p1 {letter-spacing: 3mm}
</style>
</head>
<body>
<p>这段没有设置字间距属性(letter-spacing)。</p>
<p class = "p1">这段设定字间距属性(letter-spacing)值为3毫米。</p>
</body>
</html>
颜色属性(color)
用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下：
.p1{color:gray}
CSS背景属性
背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。
body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
<html>
<head>
<title>背景颜色 background-color</title>
<style type="text/css">
body {background-color:#99FF00;}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。<p>
</body>
</html>
背景图片属性(background-image)
这个属性为HTML元素设定背景图片，相当于HTML中background属性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
<html>
<head><title>背景图片background-image</title></head>
<body style="background-image:url(../images/css_tutorials/background.jpg)">
<p>这个HTML使用了CSS的background-image属性，设置了背景图片。<p>
</body>
</html>
背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
• repeat-x 背景图片横向重复
• repeat-y 背景图片竖向重复
• no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。
<html>
<head>
<title>背景重复 background-repeat</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。<p>
<p>常用的background-repeat的属性值有: repeat-x(横向重复)，repeat-x(横向重复), no-repeat(不重复)。</p>
<p>background-repeat属性要和background-image一起用。</p>
</body>
</html>
背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动，不随内容滚动而动。
<html>
<head>
<title>背景附着属性 background-attachment</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
</body>
</html>
背景位置属性(background-position)
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
html>
<head>
<title>背景位置属性 background-position</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。</p>
<p>上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。</p>
</body>
</html>
背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
<html>
<head>
<title>背景属性 background</title>
<style type="text/css">
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
</style>
</head>
<body>
<p>这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p>
<p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。</p>
<p>这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p>
<p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。</p>
<p>这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p>
<p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。</p>
</body>
</html>
CSS边框属性
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格，它的值如下：
• none (没有边框，无论边框宽度设为多大)
• dotted (点线式边框)
• dashed (破折线式边框)
• solid (直线式边框)
• double (双线式边框)
• groove (槽线式边框)
• ridge(脊线式边框)
• inset (内嵌效果的边框)
• outset (突起效果的边框)
<html>
<head>
<title>边框风格属性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
<br>
<div class = "d1">这个div的CSS边框风格(border-style)属性是none。</div>
<br>
<div class = "d2">这个div的CSS边框风格(border-style)属性是solid。</div>
<br>
<div class = "d3">这个div的CSS边框风格(border-style)属性是dotted。</div>
<br>
<div class = "d4">这个div的CSS边框风格(border-style)属性是dashed。</div>
<br>
<div class = "d5">这个div的CSS边框风格(border-style)属性是double。</div>
<br>
<div class = "d6">这个div的CSS边框风格(border-style)属性是groove。</div>
<br>
<div class = "d7">这个div的CSS边框风格(border-style)属性是ridge。</div>
<br>
<div class = "d8">这个div的CSS边框风格(border-style)属性是inset。</div>
<br>
<div class = "d9">这个div的CSS边框风格(border-style)属性是outset。</div>
<br>
</body>
</html>
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下：
• medium (是缺省值)
• thin (比medium细)
• thick (比medium粗)
• 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
<head>
<title>边框宽度 border-width</title>
<style type="text/css">
.d1 {border-style:solid;}
.d2 {border-width:thin;border-style:solid;}
.d3 {border-width:thick;border-style:solid;}
.d4 {border-width:10px;border-style:solid;}
.d5 {border-width:5mm;border-style:solid;}
</style>
</head>
<body>
<div class= "d1">这个div的CSS边框宽度(border-width)属性缺省值是medium。</div>
<br>
<div class= "d2">这个div的CSS边框宽度(border-width)属性值是thin。</div>
<br>
<div class= "d3">这个div的CSS边框宽度(border-width)属性值是thick。</div>
<br>
<div class= "d4">这个div的CSS边框宽度(border-width)属性值是10px。</div>
<br>
<div class= "d5">这个div的CSS边框宽度(border-width)属性值是5mm。</div>
</body>
</html>
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下：
.d5 {border-color:gray;border-style:solid;}
<html>
<head>
<title>边框颜色属性 border-color</title>
<style type="text/css">
.d1 {border-color:#FFA500;border-style:solid;}
.d2 {border-color:#33CC00;border-style:solid;}
.d3 {;border-color:#6600FF;border-style:solid;}
.d4 {border-color:#FF6347;border-style:solid;}
.d5 {border-color:gray;border-style:solid;}
</style>
</head>
<body>
<div class= "d1">这个div的CSS边框颜色(border-color)属性值是橙色。</div>
<br>
<div class= "d2">这个div的CSS边框颜色(border-color)属性值是绿色。</div>
<br>
<div class= "d3">这个div的CSS边框颜色(border-color)属性值是蓝色。</div>
<br>
<div class= "d4">这个div的CSS边框颜色(border-color)属性值是番茄红。</div>
<br>
<div class= "d5">这个div的CSS边框颜色(border-color)属性值是灰色。</div>
<br>
</body>
</html>
边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：
.d1 {border:5px solid gray;}
<html>
<head>
<title>边框属性 border</title>
<style type="text/css">
.d1 {border:5px solid gray;}
</style>
</head>
<body>
<div class= "d1">这个div的边框属性：边框宽度(border-width)为5px；边框风格(border-style)为直线式；边框颜色为灰色。</div>
</body>
</html>
单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。
设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。
<html>
<head>
<title>单个边框属性 </title>
<style type="text/css">
.d1 {border-top:5px solid #FF0000}
.d2 {border-bottom:5px solid #FF0000}
.d3 {border-left:5px solid #FF0000}
.d4 {border-right:5px solid #FF0000}
</style>
</head>
<body>
<div>单个边框属性：</div>
<div class = "d1">设置上边框用border-top</div>
<div class = "d2">设置下边框用border-bottom</div>
<div class = "d3">设置左边框用border-left</div>
<div class = "d4">设置右边框用border-right</div>
</body>
</html>
CSS边距属性
边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
左边距属性(margin-left)
这个属性用来设定左边距的宽度。示例如下：
.d1{margin-left:1cm}
演示示例
右边距属性(margin-right)
这个属性用来设定右边距的宽度。示例如下：
.d1 {margin-right:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-right即可。
上边距属性(margin-top)
这个属性用来设定上边距的宽度。示例如下：
.d1 {margin-top:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-top即可。
下边距属性(margin-bottom)
这个属性用来设定下边距的宽度。示例如下：
.d1{margin-bottom:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-bottom即可。
边距属性(margin)
这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。
你可以为上下左右边距设置相同的宽度。示例入下：
.d1 {margin:1cm}
你也可以分别设置边距，顺序是上，右，下，左。示例如下：
.d1 {margin:1cm 2cm 3cm 4cm}
上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。
演示示例：上下左右边距宽度相同
<HTML>
<HEAD>
<TITLE>CSS边距属性 margin</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin:1cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="D1">
<DIV CLASS="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<HR>
<P>和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，边距为1厘米，表示这个div上下左右的边距都为1厘米。</P>
<DIV CLASS="D1">
<DIV CLASS="D3">margin设为1cm</DIV>
</DIV>
</BODY>
</HTML>
演示示例：上下左右边距宽度各不相同
<HTML>
<HEAD>
<TITLE>CSS边距属性 margin</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin:0.5cm 1cm 2.5cm 1.5cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="D1">
<DIV CLASS="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<P>和上面两个div的CSS属性设置不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，设定上边距为0.5cm，右边距为1cm，下边距为2.5cm，左边距为1.5cm。</P>
<DIV CLASS="D1">
<DIV CLASS="D3">上下左右边距宽度各不同</DIV>
</DIV>
</BODY>
</HTML>
CSS间隙属性
间隙属性(padding)是用来设置元素内容到元素边界的距离。
左间隙属性(padding-left)
这个属性用来设定左间隙的宽度。示例如下：
.d1{padding-left:1cm}
演示示例
右间隙属性(padding-right)
这个属性用来设定右间隙的宽度。示例如下：
.d1 {padding-right:1cm}
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-right即可。
上间隙属性(padding-top)
这个属性用来设定上间隙的宽度。示例如下：
.d1 {padding-top:1cm}
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-top即可。
下间隙属性(margin-bottom)
这个属性用来设定下间隙的宽度。示例如下：
.d1{padding-bottom:1cm}
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-bottom即可。
间隙属性(padding)
这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。
你可以为上下左右间隙设置相同的宽度。示例入下：
.d1 {padding:1cm}
你也可以分别设置间隙，顺序是上，右，下，左。示例如下：
.d1 {padding:1cm 2cm 3cm 4cm}
上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。
演示示例：上下左右间隙宽度相同
<html>
<head>
<title>间隙属性 padding</title>
<style type="text/css">
td {padding: 1cm}
</style>
</head>
<body>
<table border= "1">
<tr>
<td>这个单元格设置了CSS间隙属性。上下左右间隙宽度都为1厘米。</td>
</tr>
</table>
</body>
</html>
演示示例：上下左右间隙宽度各不相同
<html>
<head>
<title>间隙属性 padding</title>
<style type="text/css">
td {padding: 0.5cm 1cm 4cm 2cm}
</style>
</head>
<body>
<table border= "1">
<tr>
<td>这个单元格设置了CSS间隙属性。上间隙为0.5厘米，右间隙为1厘米，下间隙为4厘米，左间隙为2厘米。</td>
</tr>
</table>
</body>
</html>
CSS盒子模式(Box Model)
CSS 中有个重要的概念，就是盒子模式 (Box model)。
胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。
先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。
盒子里由外至里依次是：
• margin 边距
• border 边框
• padding 间隙 (也有人称做补丁)
• content (内容，比如文本，图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS 边框属性 (border) 用来设定一个元素的边线。
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。
CSS 背景属性指的是 content 和 padding 区域。
CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
CSS列表样式属性
列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。有以下值：
• disc (缺省值，黑圆点)
• circle (空心圆点)
• square (小黑方块)
• decimal (数字排序)
• lower-roman (小写罗马字排序)
• upper-roman (大写罗马字排序)
• lower-alpha (小写字母排序)
• upper-alpha (大写字母排序)
• none (无列表项标记)
以disc,circle,square,none作为列表项标记的列表示例
<html>
<head>
<title>列表样式类型 list-style-type</title>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="circle">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="square">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="none">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
</body>
</html>
以decimal,lower-roman,upper-roman,lower-alpha,upper-alpha作为列表项标记的列表示例
<html>
<head>
<title>列表样式类型 list-style-type</title>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lower-roman {list-style-type: lower-roman}
ol.upper-roman {list-style-type: upper-roman}
ol.lower-alpha {list-style-type: lower-alpha}
ol.upper-alpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="lower-roman">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="upper-roman">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="lower-alpha">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="upper-alpha">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
</body>
</html>
列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值：
• outside (以列表项内容为准对齐)
• inside (以列表项标记为准对齐)
<html>
<title>列表样式位置 list-style-position</title>
<head>
<style type="text/css">
.u1 {list-style-position:outside}
.u2 {list-style-position:inside}
</style>
</head>
<body>
<ul class ="u1">
<li>芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
<ul class ="u2">
<li>芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
</body>
</html>
列表样式图片属性(list-style-image)
列表项标记可以用图片来表示，用列表样式图片属性(list-style-image)来设定图片。示例代码如下：
ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
<html>
<title>列表样式图片 list-style-image</title>
<head>
<style type="text/css">
ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
</style>
</head>
<body>
<ul>
<li>芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
</body>
</html>
列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type)，列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下：
ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
<html>
<head>
<title>列表样式 list-style</title>
<style type="text/css">
ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
</style>
</head>
<body>
<ul>
<li>茶</li>
<li>咖啡</li>
<li>可乐</li>
</ul>
</body>
</html>
CSS伪类(pseudo-class)
和一般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。
第一种：
selector:pseudo-class {property: value}
例句：
a:link {color:red}
第二种：
selector.class:pseudo-class {property: value}
例句：
a.c1:link {color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下：
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
演示示例
也可以用HTML的class属性来设定伪类。例句如下：
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
演示示例
注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
这个属性设定字体名称，如Arial, Tahoma, Courier等。例句如下：
.s1 {font-family:Arial}
<html>
<head>
<title>字体名称属性 font-family</title>
<STYLE>
.s1 {font-family:Arial}
.s2 {font-family:Tahoma}
.s3 {font-family:Courier}
.s4 {font-family:Verdana}
.s5 {font-family:"Book Antiqua"}
</STYLE>
</head>
<body>
<p>The font-family value of the text is the browser default font.</p>
<p class = "s1">The fon-family value of the text is "Arial"。</p>
<p class = "s2">The fon-family value of the text is "Tahoma"。</</p>
<p class = "s3">The fon-family value of the text is "Courer"。</</p>
<p class = "s4">The fon-family value of the text is "Verdana"。</</p>
<p class = "s5">The fon-family value of the text is "Book Antiqua"。</</p>
</body>
</html>
字体大小属性(font-size)
这个属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px(pixel)。例句如下：
.s2 {font-size:16pt}
<html>
<head>
<title>字体大小属性 font-size</title>
<STYLE>
BODY{font-size:10pt}
.s1 {font-size:16px}
.s2 {font-size:16pt}
.s3 {font-size:80%}
.s4 {font-size:larger}
.s5 {font-size:xx-large}
</STYLE>
</head>
<body>
<p>这段文字大小是10pt。</p>
<p class = "s1">这段文字大小是16px。</p>
<p class = "s2">这段文字大小是16pt。</p>
<p class = "s3">这段文字大小是10pt的80%。</p>
<p class = "s4">这段文字的大小比10pt大。</p>
<p class = "s5">这段文字的大小是特大号(xx-large)。</p>
</body>
</html>
字体风格属性(font-style)
这个属性有三个值可选：normal, italic, oblique。normal是缺省值，italic, oblique都是斜体显示。例句如下：
.s1 {font-sytle:italic}
<html>
<head>
<title>字体风格属性 font-style</title>
<STYLE>
.s1 {font-style:italic}
.s2 {font-style:oblique}
</STYLE>
</head>
<body>
<p>这段文字风格是normal，正常显示。normal是字体风格属性(font-style)的缺省值。</p>
<p class = "s1">这段文字的字体风格(font-style)属性值是italic，斜体显示。</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是oblique，斜体显示。</p>
</body>
</html>
字体浓淡属性(font-weight)
这个属性常用值是normal和bold，normal是缺省值。例句如下：
<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>
<html>
<head>
<title>字体浓淡属性 font-weight</title>
</head>
<body>
<p>这段文字没有设浓淡属性。<p>
<p style = "font-weight:bold">这段文字字体的浓淡属性(font-weight)值是bold。<p>
<p style = "font-weight:lighter">这段文字字体的浓淡属性(font-weight)值是lighter。<p>
<p style = "font-weight:200">这段文字字体的浓淡属性值(font-weight)是200。<p>
<p style = "font-weight:800">这段文字字体的浓淡属性值(font-weight)是800。<p>
</body>
</html>
字体变量属性(font-variant)
这个属性有两个值，normal和small-caps，normal是缺省值。small-caps表示小的大写字体。例句如下：
.s1 {font-variant:small-caps}
<html>
<head>
<title>字体变量属性 font-variant</title>
<STYLE>
.s1 {font-variant:small-caps}
</STYLE>
</head>
<body>
<p>字体变量(font-variant)属性有两个值，一个是缺省值normal，另外一个是small-caps。下面这段文字的字体变量属性(font-variant)是small-caps。</p>
<p class = "s1">The font-variant value of the text is "small-caps". </p>
</body>
</html>
字体属性(font)
这个属性是各种字体属性的一种快捷的综合写法。这个属性可以综合字体风格属性(font-style)，字体变量属性(font-variant)，字体浓淡属性(font-weight)，字体大小属性(font-size)等属性。例句如下：
.s1 {font:italic normal bold 11pt arial}
<html>
<head>
<title>字体属性 font</title>
<STYLE>
.s1 {font:italic normal bold 11pt Arial}
.s2 {font:normal small-caps normal 14pt Courier}
</STYLE>
</head>
<body>
<p class = "s1">这段文字的字体风格(font-style)属性值是italic，字体变量(font-variant)属性值是normal，字体浓淡(font-weight)属性值是bold，字体大小(font-size)属性值是11pt，字体名称(font-family)属性值是Arial。</p>
<p class = "s2">这段文字的字体风格(font-style)属性值是normal，字体变量(font-variant)属性值是small-caps，字体浓淡(font-weight)属性值是normal，字体大小(font-size)属性值是14pt，字体名称(font-family)属性值是Courier。</p>
</body>
</html>
字体颜色(color)
字体颜色用CSS中的color属性来表示
CSS常用文本属性
文本对齐属性(text-align)
这个属性用来设定文本的对齐方式。有以下值：
• left (居左，缺省值)
• right (居右)
• center (居中)
• justify (两端对齐)
示例代码如下：
.p2 {text-align:right}
<html>
<head>
<title>文本对齐属性 text-align</title>
<style type="text/css">
.p1{text-align:left}
.p2 {text-align:right}
.p3{text-align:center}
</style>
</head>
<body>
<p class = "p1">这段的本文对齐属性(text-align)值为居左。</p>
<p class = "p2">这段的本文对齐属性(text-align)值为居右。</p>
<p class = "p3">这段的本文对齐属性(text-align)值为居中。</p>
</body>
</html>
文本修饰属性(text-decoration)
这个属性主要设定文本划线的属性。有以下值：
• none (无，缺省值)
• underline (下划线)
• overline (上划线)
• line-through (当中划线)
示例代码如下：
.p2 {text-decoration: underline}
<html>
<head>
<title>文本修饰属性 text-decoration</title>
<style type="text/css">
.p1{text-decoration: none}
.p2 {text-decoration: underline}
.p3{text-decoration: line-through}
.p4 {text-decoration:overline}
</style>
</head>
<body>
<p class = "p1">文本修饰属性(text-decoration)的缺省值是none。</p>
<p class = "p2">这段的文本修饰属性(text-decoration)值是underline。</p>
<p class = "p3">这段的文本修饰属性(text-decoration)值是line-through。</p>
<p class = "p4">这段的文本修饰属性(text-decoration)值是overline。</p>
</body>
</html>
文本缩进属性(text-indent)
这个属性设定文本首行缩进。其值有以下设定方法：
• length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
• percentage (百分比，相当于父对象宽度的百分比)
示例代码如下：
.p1 {text-indent: 8mm}
<html>
<head>
<title>文本缩进属性 text-indent</title>
<style type="text/css">
.p1 {text-indent: 8mm}
.d1 {width:300px}
.p2 {text-indent:50%}
</style>
</head>
<body>
<p>下面两端都设定CSS文本缩进属性(text-indent)，第一段用长度方法设值，第二段用百分比方法设值。</p>
<p class = "p1">芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>
<div class = "d1">
<p class = p2>芙蓉姐姐说道：“我那妖媚性感的外形和冰清玉洁的气质让我无论走到哪里都会被众人的目光无情地揪出来。我总是很焦点。我那张耐看的脸，配上那副火爆得让男人流鼻血的身体，就注定了我前半生的悲剧。”</p>
</div>
</body>
</html>
行高属性(line-height)
这个属性设定每行之间的距离。其值有以下设定方法：
• normal (缺省值)
• length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
• percentage (百分比，相当于父对象高度的百分比)
示例代码如下：
.p1 {line-height:1cm}
<html>
<head>
<title>行高属性 line-height</title>
<style type="text/css">
.p1 {line-height:1cm}
.p2 {line-height:2cm}
</style>
</head>
<body>
<p class = "p1">这个段落的CSS行高属性(line-hight)值为1cm，即每行之间的距离是1厘米。</p>
<p class = "p2">这个段落的CSS行高属性(line-hight)值为2cm，即每行之间的距离是2厘米。</p>
</body>
</html>
字间距属性(letter-spacing)
这个属性用来设定字符之间的距离。
• normal (缺省值)
• length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
示例代码如下：
.p1 {letter-spacing: 3mm}
<html>
<head>
<title>字间距属性 letter-spacing</title>
<style type="text/css">
.p1 {letter-spacing: 3mm}
</style>
</head>
<body>
<p>这段没有设置字间距属性(letter-spacing)。</p>
<p class = "p1">这段设定字间距属性(letter-spacing)值为3毫米。</p>
</body>
</html>
颜色属性(color)
用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下：
.p1{color:gray}
CSS背景属性
背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。
body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
<html>
<head>
<title>背景颜色 background-color</title>
<style type="text/css">
body {background-color:#99FF00;}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-color属性，将HTML的背景颜色变成翠绿色。<p>
</body>
</html>
背景图片属性(background-image)
这个属性为HTML元素设定背景图片，相当于HTML中background属性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
<html>
<head><title>背景图片background-image</title></head>
<body style="background-image:url(../images/css_tutorials/background.jpg)">
<p>这个HTML使用了CSS的background-image属性，设置了背景图片。<p>
</body>
</html>
背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
• repeat-x 背景图片横向重复
• repeat-y 背景图片竖向重复
• no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。
<html>
<head>
<title>背景重复 background-repeat</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-repeat属性，使背景图片竖向重复。<p>
<p>常用的background-repeat的属性值有: repeat-x(横向重复)，repeat-x(横向重复), no-repeat(不重复)。</p>
<p>background-repeat属性要和background-image一起用。</p>
</body>
</html>
背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动，不随内容滚动而动。
<html>
<head>
<title>背景附着属性 background-attachment</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
<p>这个HTML使用了CSS的background-attachment属性，将背景图片固定，不随内容滚动而滚动。<p>
<p>背景附着(background-attachment)属性有两个值。一个是scroll，表示随内容滚动而动；一个是fixed，表示固定不动，不受内容滚动影响。缺省值是scroll。</p>
<p>background-attachment要和background-image一起用。</p>
</body>
</html>
背景位置属性(background-position)
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
html>
<head>
<title>背景位置属性 background-position</title>
<style type="text/css">
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
</style>
</head>
<body>
<p>这个HTML使用了CSS的background-position属性。这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。</p>
<p>上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。</p>
</body>
</html>
背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
<html>
<head>
<title>背景属性 background</title>
<style type="text/css">
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
</style>
</head>
<body>
<p>这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p>
<p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。</p>
<p>这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p>
<p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。</p>
<p>这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p>
<p>这个HTML所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。</p>
</body>
</html>
CSS边框属性
边框风格属性(border-style)
这个属性用来设定上下左右边框的风格，它的值如下：
• none (没有边框，无论边框宽度设为多大)
• dotted (点线式边框)
• dashed (破折线式边框)
• solid (直线式边框)
• double (双线式边框)
• groove (槽线式边框)
• ridge(脊线式边框)
• inset (内嵌效果的边框)
• outset (突起效果的边框)
<html>
<head>
<title>边框风格属性 border-style </title>
<style type="text/css">
.d1 {border-style:none;}
.d2 {border-style:solid;}
.d3 {border-style:dotted;}
.d4 {border-style:dashed;}
.d5 {border-style:double;}
.d6 {border-style:groove;}
.d7 {border-style:ridge;}
.d8 {border-style:inset;}
.d9 {border-style:outset;}
</style>
</head>
<body>
<div>这个div的CSS边框风格(border-style)属性缺省值是none。</div>
<br>
<div class = "d1">这个div的CSS边框风格(border-style)属性是none。</div>
<br>
<div class = "d2">这个div的CSS边框风格(border-style)属性是solid。</div>
<br>
<div class = "d3">这个div的CSS边框风格(border-style)属性是dotted。</div>
<br>
<div class = "d4">这个div的CSS边框风格(border-style)属性是dashed。</div>
<br>
<div class = "d5">这个div的CSS边框风格(border-style)属性是double。</div>
<br>
<div class = "d6">这个div的CSS边框风格(border-style)属性是groove。</div>
<br>
<div class = "d7">这个div的CSS边框风格(border-style)属性是ridge。</div>
<br>
<div class = "d8">这个div的CSS边框风格(border-style)属性是inset。</div>
<br>
<div class = "d9">这个div的CSS边框风格(border-style)属性是outset。</div>
<br>
</body>
</html>
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下：
• medium (是缺省值)
• thin (比medium细)
• thick (比medium粗)
• 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
<head>
<title>边框宽度 border-width</title>
<style type="text/css">
.d1 {border-style:solid;}
.d2 {border-width:thin;border-style:solid;}
.d3 {border-width:thick;border-style:solid;}
.d4 {border-width:10px;border-style:solid;}
.d5 {border-width:5mm;border-style:solid;}
</style>
</head>
<body>
<div class= "d1">这个div的CSS边框宽度(border-width)属性缺省值是medium。</div>
<br>
<div class= "d2">这个div的CSS边框宽度(border-width)属性值是thin。</div>
<br>
<div class= "d3">这个div的CSS边框宽度(border-width)属性值是thick。</div>
<br>
<div class= "d4">这个div的CSS边框宽度(border-width)属性值是10px。</div>
<br>
<div class= "d5">这个div的CSS边框宽度(border-width)属性值是5mm。</div>
</body>
</html>
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下：
.d5 {border-color:gray;border-style:solid;}
<html>
<head>
<title>边框颜色属性 border-color</title>
<style type="text/css">
.d1 {border-color:#FFA500;border-style:solid;}
.d2 {border-color:#33CC00;border-style:solid;}
.d3 {;border-color:#6600FF;border-style:solid;}
.d4 {border-color:#FF6347;border-style:solid;}
.d5 {border-color:gray;border-style:solid;}
</style>
</head>
<body>
<div class= "d1">这个div的CSS边框颜色(border-color)属性值是橙色。</div>
<br>
<div class= "d2">这个div的CSS边框颜色(border-color)属性值是绿色。</div>
<br>
<div class= "d3">这个div的CSS边框颜色(border-color)属性值是蓝色。</div>
<br>
<div class= "d4">这个div的CSS边框颜色(border-color)属性值是番茄红。</div>
<br>
<div class= "d5">这个div的CSS边框颜色(border-color)属性值是灰色。</div>
<br>
</body>
</html>
边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：
.d1 {border:5px solid gray;}
<html>
<head>
<title>边框属性 border</title>
<style type="text/css">
.d1 {border:5px solid gray;}
</style>
</head>
<body>
<div class= "d1">这个div的边框属性：边框宽度(border-width)为5px；边框风格(border-style)为直线式；边框颜色为灰色。</div>
</body>
</html>
单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。
设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。
设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。
设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。
<html>
<head>
<title>单个边框属性 </title>
<style type="text/css">
.d1 {border-top:5px solid #FF0000}
.d2 {border-bottom:5px solid #FF0000}
.d3 {border-left:5px solid #FF0000}
.d4 {border-right:5px solid #FF0000}
</style>
</head>
<body>
<div>单个边框属性：</div>
<div class = "d1">设置上边框用border-top</div>
<div class = "d2">设置下边框用border-bottom</div>
<div class = "d3">设置左边框用border-left</div>
<div class = "d4">设置右边框用border-right</div>
</body>
</html>
CSS边距属性
边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
左边距属性(margin-left)
这个属性用来设定左边距的宽度。示例如下：
.d1{margin-left:1cm}
演示示例
右边距属性(margin-right)
这个属性用来设定右边距的宽度。示例如下：
.d1 {margin-right:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-right即可。
上边距属性(margin-top)
这个属性用来设定上边距的宽度。示例如下：
.d1 {margin-top:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-top即可。
下边距属性(margin-bottom)
这个属性用来设定下边距的宽度。示例如下：
.d1{margin-bottom:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-bottom即可。
边距属性(margin)
这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。
你可以为上下左右边距设置相同的宽度。示例入下：
.d1 {margin:1cm}
你也可以分别设置边距，顺序是上，右，下，左。示例如下：
.d1 {margin:1cm 2cm 3cm 4cm}
上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。
演示示例：上下左右边距宽度相同
<HTML>
<HEAD>
<TITLE>CSS边距属性 margin</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin:1cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="D1">
<DIV CLASS="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<HR>
<P>和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，边距为1厘米，表示这个div上下左右的边距都为1厘米。</P>
<DIV CLASS="D1">
<DIV CLASS="D3">margin设为1cm</DIV>
</DIV>
</BODY>
</HTML>
演示示例：上下左右边距宽度各不相同
<HTML>
<HEAD>
<TITLE>CSS边距属性 margin</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin:0.5cm 1cm 2.5cm 1.5cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="D1">
<DIV CLASS="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<P>和上面两个div的CSS属性设置不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，设定上边距为0.5cm，右边距为1cm，下边距为2.5cm，左边距为1.5cm。</P>
<DIV CLASS="D1">
<DIV CLASS="D3">上下左右边距宽度各不同</DIV>
</DIV>
</BODY>
</HTML>
CSS间隙属性
间隙属性(padding)是用来设置元素内容到元素边界的距离。
左间隙属性(padding-left)
这个属性用来设定左间隙的宽度。示例如下：
.d1{padding-left:1cm}
演示示例
右间隙属性(padding-right)
这个属性用来设定右间隙的宽度。示例如下：
.d1 {padding-right:1cm}
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-right即可。
上间隙属性(padding-top)
这个属性用来设定上间隙的宽度。示例如下：
.d1 {padding-top:1cm}
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-top即可。
下间隙属性(margin-bottom)
这个属性用来设定下间隙的宽度。示例如下：
.d1{padding-bottom:1cm}
演示示例请参照左间隙属性示例，只要将里面的padding-left改成padding-bottom即可。
间隙属性(padding)
这个属性是设定间隙宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右间隙属性。
你可以为上下左右间隙设置相同的宽度。示例入下：
.d1 {padding:1cm}
你也可以分别设置间隙，顺序是上，右，下，左。示例如下：
.d1 {padding:1cm 2cm 3cm 4cm}
上面的代码表示，上间隙为1cm，右间隙为2cm，下间隙为3cm，左间隙为4cm。
演示示例：上下左右间隙宽度相同
<html>
<head>
<title>间隙属性 padding</title>
<style type="text/css">
td {padding: 1cm}
</style>
</head>
<body>
<table border= "1">
<tr>
<td>这个单元格设置了CSS间隙属性。上下左右间隙宽度都为1厘米。</td>
</tr>
</table>
</body>
</html>
演示示例：上下左右间隙宽度各不相同
<html>
<head>
<title>间隙属性 padding</title>
<style type="text/css">
td {padding: 0.5cm 1cm 4cm 2cm}
</style>
</head>
<body>
<table border= "1">
<tr>
<td>这个单元格设置了CSS间隙属性。上间隙为0.5厘米，右间隙为1厘米，下间隙为4厘米，左间隙为2厘米。</td>
</tr>
</table>
</body>
</html>
CSS盒子模式(Box Model)
CSS 中有个重要的概念，就是盒子模式 (Box model)。
胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。
先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。
盒子里由外至里依次是：
• margin 边距
• border 边框
• padding 间隙 (也有人称做补丁)
• content (内容，比如文本，图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS 边框属性 (border) 用来设定一个元素的边线。
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。
CSS 背景属性指的是 content 和 padding 区域。
CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
CSS列表样式属性
列表样式类型属性(list-style-type)
这个属性用来设定列表项标记(list-item marker)的类型。有以下值：
• disc (缺省值，黑圆点)
• circle (空心圆点)
• square (小黑方块)
• decimal (数字排序)
• lower-roman (小写罗马字排序)
• upper-roman (大写罗马字排序)
• lower-alpha (小写字母排序)
• upper-alpha (大写字母排序)
• none (无列表项标记)
以disc,circle,square,none作为列表项标记的列表示例
<html>
<head>
<title>列表样式类型 list-style-type</title>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="circle">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="square">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
<ul class="none">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ul>
</body>
</html>
以decimal,lower-roman,upper-roman,lower-alpha,upper-alpha作为列表项标记的列表示例
<html>
<head>
<title>列表样式类型 list-style-type</title>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lower-roman {list-style-type: lower-roman}
ol.upper-roman {list-style-type: upper-roman}
ol.lower-alpha {list-style-type: lower-alpha}
ol.upper-alpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class="decimal">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="lower-roman">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="upper-roman">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="lower-alpha">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
<ol class="upper-alpha">
<li>肉类</li>
<li>蔬菜</li>
<li>水果</li>
</ol>
</body>
</html>
列表样式位置属性(list-style-position)
列表样式位置属性(list-style-position)有两个值：
• outside (以列表项内容为准对齐)
• inside (以列表项标记为准对齐)
<html>
<title>列表样式位置 list-style-position</title>
<head>
<style type="text/css">
.u1 {list-style-position:outside}
.u2 {list-style-position:inside}
</style>
</head>
<body>
<ul class ="u1">
<li>芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
<ul class ="u2">
<li>芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
</body>
</html>
列表样式图片属性(list-style-image)
列表项标记可以用图片来表示，用列表样式图片属性(list-style-image)来设定图片。示例代码如下：
ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
<html>
<title>列表样式图片 list-style-image</title>
<head>
<style type="text/css">
ul {list-style-image: url(../images/css_tutorials/dot02.gif)}
</style>
</head>
<body>
<ul>
<li>芙蓉姐姐</li>
<li>木子美</li>
<li>竹影青瞳</li>
<li>流氓燕</li>
</ul>
</body>
</html>
列表样式属性(list-style)
这个属性是设定列表样式的一个快捷的综合写法。用这个属性可以同时设值列表样式类型属性(list-style-type)，列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。示例代码如下：
ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
<html>
<head>
<title>列表样式 list-style</title>
<style type="text/css">
ul {list-style:circle inside url(../images/css_tutorials/dot02.gif)}
</style>
</head>
<body>
<ul>
<li>茶</li>
<li>咖啡</li>
<li>可乐</li>
</ul>
</body>
</html>
CSS伪类(pseudo-class)
和一般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。
第一种：
selector:pseudo-class {property: value}
例句：
a:link {color:red}
第二种：
selector.class:pseudo-class {property: value}
例句：
a.c1:link {color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下：
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
演示示例
也可以用HTML的class属性来设定伪类。例句如下：
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
演示示例
注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。