1.添加CSS的方法
1.1链接外部样式表
即在网页中调用已经定义好的样式表来实现样式表的应用，适用于大型网站。示例：
<head>
...
<link rel=stylesheet type=text/css href=slstyle.css>
...
</head>
rel=stylesheet:页面中使用外部的样式表；
type=text/css:指文件样式类型为样式表文件；
href=slstyle.css:文件所在位置。
1.2内部样式表
一般位于HTML文件头部，这些定义样式可应用到页面中，示例：
<head>
<style type="text/css">
<!--
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
.style1{
color:#fbe334;
font-size:13px;
}
-->
</style>
</head>
1.3导入外部样式表
指在内部样式表<style>里导入一个外部样式表，导入时用@import，示例：
<head>
...
<style type=text/css>
<!--
@import slstyle.css
其他样式声明
-->
</style>
...
</head>
@import slstyle.css表示导入slstyle.css样式表，使用时注意外部样式表的路径、方法和外部样式表的方法类似。
1.4内嵌样式
混合在HTML标记里使用，可以很简单地对某个元素单独定义样式，示例：
<table style=color:red;margin-right:220px>
这是一个表格
</p>
2.字体属性
2.1字体font-family
语法：`font-family:"字体1","字体2"...`
说明：当浏览器不支持"字体1"时，会采用"字体2"，并以此类推；
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
2.2字号font-size
语法：`font-size:大小取值`
取值说明：xx-small：绝对尺寸，最小；
x-small：较小；
small：小；
medium：正常；
large：大；
x-large：较大；
xx-large：最大；
larger：相对父类增大；
smaller：相对父类减小；
length：相对父类百分比大小。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:small;
}
.h2{
font-family:"宋体";
font-size:large;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
<span class="h2">授人以鱼不如授人以渔
</span>
</body>
</html>
2.3字体风格font-style
语法：`font-style:样式取值`
取值说明：normal：正常；
italic：斜体；
oblique：中间态，偏斜体。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:small;
font-style:italic;
}
.h2{
font-family:"宋体";
font-size:large;
font-style:oblique;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
<span class="h2">授人以鱼不如授人以渔
</span>
</body>
</html>
2.4加粗字体font-weight
语法：`font-weight:字体粗细值`
取值说明：normal：正常；
bold：粗体；
bolder：特粗；
lighter：特细；
number：100~900间数值，一般为整数。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:small;
font-style:italic;
font-weight:lighter;
}
.h2{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
<span class="h2">授人以鱼不如授人以渔
</span>
</body>
</html>
2.5小字母转为大字母font-variant
语法：`font-variant:取值`
取值说明：normal：正常显示；
small-caps：小字母转为大字母，且字体较小。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:small;
font-style:italic;
font-weight:lighter;
font-variant:small-caps;
}
-->
</style>
</head>
<body>
<span class="h1">This is just a test!
</span>
</body>
</html>
2.6字体复合属性
语法：`font:字体取值`
取值说明：取值可为字体大小、风格、加粗等等。
**特别说明：可能由于浏览器的不支持，对于此项的设置我并没有看到明显的效果，还请有关大神来解惑~~**
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font:bold italic "宋体"
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
3.颜色和背属性
3.1颜色属性color
语法：`color:颜色取值`
取值说明：关键字取值，如red、green、blue等分别表示红、绿、蓝；
十六进制数取值：color:#ff0000 表示红
color:#000099 表示蓝
color:#ffff00 表示黄
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
color:#9900ff;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
3.2背景颜色background-color
语法：`background-color:颜色取值`
取值原则同上3.1.
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
color:#9900ff;
background-color:#ff99ff;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
3.3背景图像background-image
语法：`background-image:url(图像地址)`
地址说明：地址可以为绝对地址，也可以为相对地址
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
color:#9900ff;
background-image:url(image/1.gif);
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
3.4背景重复background-repeat
语法：`background-repeat:取值`
取值说明：no-repeat:背景图像不平铺；
repeat:背景图像平铺满整个网页；
repeat-x:背景图像只在水平上平铺；
repeat-y:背景图像只在竖直上平铺。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
color:#9900ff;
background-image:url(image/1.gif);
background-repeat:repeat;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
3.5背景附件background-attachment
语法：`background-attachment:scroll/fixed`
说明：scroll:背景图像随内容滚动而滚动，默认项；
fixed:背景图像固定页面上不动。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
color:#9900ff;
background-attachment:fixed;
background-image:url(image/1.gif);
background-repeat:repeat;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
3.6背景图像位置background-position
语法：`background-position:位置取值`
取值说明：
长度设置取值：x:横向位置；
y:纵向位置。
百分比设置值：0% 0% 左上 关键字设置 top left
50% 0% 上居中 top center
100% 0% 右上 top right
0% 50% 左居中 left center
50% 50% 正中 center center
100% 50% 右居中 right center
0% 100% 左下 bottom left
50% 100% 下居中 bottom center
100% 100% 右下 bottom right
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
color:#9900ff;
background-attachment:fixed;
background-image:url(image/1.gif);
background-repeat:repeat;
background-position:center center;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
3.7背景复合属性background
语法：`background:取值`
取值说明：取值包括背景颜色、背景图像、背景重复等等，各值间用空格连接。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
background:url(imgaes/1.jpg) repeat center center;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
4.段落属性
4.1单词间隔word-spacing
语法：`word-spacing:取值`
取值说明：normal：正常，默认项；
长度值加单位，可为负值。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
background:url(imgaes/1.jpg) repeat center center;
word-spacing:3px;
}
-->
</style>
</head>
<body>
<span class="h1">This is just a test!
</span>
</body>
</html>
5.2字符间隔letter-spacing
语法：`letter-spacing:取值`
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
background:url(imgaes/1.jpg) repeat center center;
letter-spacing:3px;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
4.3文字修饰text-decoration
语法：`text-decoration:取值`
取值说明：none：不修饰，默认；
underline：文字下划线；
overline：文字上划线；
linethrough：文字删除线；
blink：文字闪烁效果。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
font-style:oblique;
font-weight:bolder;
background:url(imgaes/1.jpg) repeat center center;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
4.4垂直对齐方式vertical-align
语法：`vertical-align:排列取值`
取值说明：baseline：垂直对齐，默认；
sub：文字下标；
super：文字上标；
top：垂直靠上对齐；
text-top：元素和上级元素字体向上对齐；
middle：垂直居中对齐；
text-bottom：元素和上级元素字体向下对齐。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
vertical-align:super;
}
-->
</style>
</head>
<body>
5
<span class="h1">2
</span>-2
<span class="h1">2
</span>=21
</body>
</html>
4.5文本转换text-transform
语法：`text-transform:转换值`
取值说明：none：使用原始值；
capitalize：每个单词第一个字母大写；
uppercase：每个单词所有字母大写；
lowercase：每个单词所有字母小写。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-size:large;
text-transform:uppercase;
}
-->
</style>
</head>
<body>
<span class="h1">This is just a test!
</span>
</body>
</html>
4.6水平对齐方式text-align
语法：`text-align:排列值`
取值说明：left：左对齐；
right：右对齐；
center：居中对齐；
justify：两端对齐。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
text-align:center;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
4.7文本缩进text-indent
语法：`text-indent:缩进值`
取值说明：缩进值为长度值或百分比。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
text-indent:25px;
}
-->
</style>
</head>
<body>
<span class="h1">授人以鱼不如授人以渔
</span>
</body>
</html>
4.8文本行高line-height
语法：`line-height:行高值`
取值说明：行高值可以为长度、倍数或百分比。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
line-height:25px;
}
-->
</style>
</head>
<body>
<span class="h1">
授人以鱼不如授人以渔
<br>
授人以鱼不如授人以渔
<br>
授人以鱼不如授人以渔
</span>
</body>
</html>
4.9处理空白white-space
语法：`white-space:值`
取值说明：normal：连续多个空格合并，默认；
pre：源代码中空格和换行符保留（仅IE6正确显示)
nowrap：强制一行显示所有文本，直至结束或遇<br>
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
white-space:pre;
}
-->
</style>
</head>
<body>
<span class="h1">
授人以鱼不如授人以渔
</span>
</body>
</html>
4.10文本反排unicode-bidi、direction
语法：`direction:ltr|rtl|inherit`
`unicode-bidi:bidi-override|normal|embed`
取值说明：
direction：ltr从左到右顺序排列；
rtl从右向左书序排列；
inherit文本流值不可继承。
unicode-bidi：bidi-override严格按direction属性值重排；
normal默认值；
embed对象打开附加嵌入层，direction指定嵌入层，在对象内部隐式重排。
示例：
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>使用css样式表
</title>
<style type="text/css">
<!--
.h1{
font-family:"宋体";
font-size:large;
direction:rtl;
unicode-bidi:bidi-override;
}
-->
</style>
</head>
<body>
<span class="h1">
授人以鱼不如授人以渔
</span>
</body>
</html>
