参考： 韩顺平 轻松搞定网页设计
1.在没有css之前，先看一个效果图
背后的css1.html是这样实现的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<span style="font-size:30px;color: blue;">栏目一</span><br/>
<span style="font-size:10px;color: blue;font-style:italic;">栏目二</span><br/>
<span style="font-size:40px;color: green;font-weight: bold;">栏目三</span><br/>
<span style="font-size:20px;color: pink;font-weight:lighter">栏目四</span><br/>
<span style="font-size:30px;color: black;font-weight:lighter"">栏目五</span><br/>
</body>
</html>所有的样式都写在html页面中，看起来比较啰嗦，不利索。
2.为html添加css
效果图
test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="test.css" type="text/css"></link></head>
<body>
<font class = "style0">梁山英雄排行榜</font><br/>
<span class = "style1">宋江</span><br/>
<span class = "style2">卢员外</span><br/>
<span class = "style3">吴用</span><br/>
<span class = "style2">豹子头</span><br/>
<span class = "style2">大刀关胜</span><br/>
<br/>
<a href="#">goto sohu1中文</a><br/>
<a href="#">goto sohu2换句话</a><br/>
<a href="#">goto sohu3各位高</a><br/>
<a href="#">goto sohu4阿文哥</a><br/>
<a href="#">goto sohu5问题</a><br/>
</body>
</html>
引入的test.css如下
@CHARSET "UTF-8";
.style0{
color:yellow;
font-size: 30px;
}
.style1{
color: red;
font-style: italic;
}
.style3{
font-style: italic;
text-decoration: underline;
}
.style1,.style2,.style3{
background-color: gray;
font-weight: bold;
}
a:link{
color:red;
font-size:24px;
font-family: 华文新魏;
text-decoration: none;
}
a:hover{
color:green;
font-size:40px;
font-family: 宋体;
text-decoration: underline;
}
a:visited{
color: gray;
}