參考： 韓順平 輕鬆搞定網頁設計
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;
}