css-2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css樣式表</title>
<style type="text/css">
/*1.css背景
2.css文本
3.css字體
4.css鏈接
5.css列表
6.css表格
7.css輪廓
*/
#p1 {
background-color: pink;
margin: auto;
padding: 20px;
}
#p2 {
background-image: url(2.jpg);/*所有的背景屬性都不能繼承 */
padding: 200px;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
background-repeat: no-repeat;
/*background-position: left;*/
background-position: 0% 0%;/*水平 垂直*//*background-attachment: fixed;*//*默認為scroll,當文檔過長時，超過背景圖片，圖片消失.可設置為fixed*/
}
#p3{
text-align: center;/*text-align余<CENTER></CENTER>標簽的區別：text-align只影響文本*/
text-indent:-4em;
padding-left: 5em;
}
p.p4{/*word-spacing:單詞間隔 letter-spacing:字母間隔*/
word-spcing:30px;
text-transform: uppercase;/*字符轉化（還可以首字母大寫）*/
text-decoration: line-through;/*文字裝飾*/
white-space:normal;/*處理空白符若設為pre空白符這不會被忽略*/
}
a:link{/*鏈接還未點擊時*/
text-decoration:none;/*去掉鏈接下劃線*/
background-color: red;/*改變鏈接背景顏色*/
}
a:visited{/*鏈接已被點擊後*/
text-decoration:none;
background-color: yellow;
}
a:hover{/*鼠標移到鏈接上*/
text-decoration:none;
background-color: black;
}
a:active{/*鏈接正在被訪問*/
text-decoration:none;
background-color:green;
}
ul{
/*list-style:url(2.jpg) circle inside;*/
list-style: circle inside;/*list-style：圖片 圖標 標誌位置*/
}
table{
border-collapse: collapse;/*是否折疊為單一表單框*/
}
table,tr,td,th{
border:3px solid red;/*設置表單框*/
}
th{
background-color:deepskyblue;/*設置表頭背景顏色*/
color: chocolate;/*設置文字顏色*/
}
.p5{
outline:#25D517 dotted ;/*設置輪廓*/
}
</style>
</head>
<body>
<p id="p1">這條語句的背景為粉色</p>
<p id="p2">這條語句的背景為圖片</p>
<p id="p3">文本的縮進</p>
<p class="p4">the word spacing had changed</p>
<a href="http://www.baidu.com" target="_blank">點擊這裏鏈接到百度</a><br/>
國家:<br/>
<ul>
<li>中國</li>
<li>美國</li>
<li>日本</li>
</ul><br/>
<table>
<tr>
<th>學號</th>
<th>姓名</th>
<th>班級</th>
</tr>
<tr>
<td>161003530106</td>
<td>萬濤</td>
<td>德泰1613</td>
</tr>
</table>
<p class="p5">設置輪廓</p>
</body>
</html>
css-2