樣式表分類：
1.內聯樣式表，
和html聯合顯示，例：<p style="font-size:14px;">內聯樣式表</p>
2.內嵌樣式表
作為一個獨立的區域內嵌在網頁里，必須寫在head里邊。
<style type="text/css">
p //格式對p起作用
{樣式；
}
</style>
3.外部樣式表
新建一個CSS文件，用來放置樣式表。如果要在HTML文件中調用樣式表，需要在HTML文件中點右鍵→CSS樣式表→附加樣式表。一般用link連接方式。
有些標簽有默認的邊距，一般寫樣式表代碼的時候都會先去除（也可以設置其他的樣式），如下：
選擇器：
標簽選擇器，用標簽名做選擇器。
<style type="text/css">
p //格式對p起作用
{樣式；
}
</style>
2. class選擇器，都是用“.”開頭（類）
<head>
<style type="text/css">
.main
{樣式
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
3.id選擇器以“#”開頭，表示單獨唯一。樣式和class相同只是開頭和body里的樣式名不同即<div id="main">
鏈接的style：
a:link 超鏈接被點前狀態
a:visited 超鏈接點擊后狀態
a:hover 懸停在超鏈接時
a:active 點擊超鏈接時
在定義這些狀態時，有一個順序l v h a
樣式：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
.a1:link
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:visited
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:hover
{
color:red;
text-decoration:underline;
font-size:24px;
}
.a1:active
{
color:orange;
text-decoration:underline;
font-size:24px;
}
</style>
</head>
<body>
<div class="main"><p>1234567890</p></div>
<a class="a1" href="http://www.baidu.com">百度一下</a><br />
</body>
</html>
格式與布局
1.position:fixed
鎖定位置（相對於瀏覽器的位置）
2.position：absolute
1.外層沒有position：absolute（或relative）；那么div相對於瀏覽器定位，如下圖中b（距離瀏覽器右邊框為50像素，距離下邊框為20像素）。
2.外層有position：absolute（或relative）；那么div相對於外層邊框定位，如下圖中bb（距離d的右邊框50像素，距離d的下邊框為20像素）。
三、position：relative
相對位置。相對於默認位置的移動，
相對於把此div包含住的div的某個位置進行固定。如果外層沒有包含他的，那就相對於瀏覽器進行相對位置的固定
注意：絕對位置是在頁面上進行定位，是浮動的。而相對位置是在頁面里面占有某塊位置，有上下左右的值的時候，只是進行形狀上的平移，真實占有的位置不變。
四、分層（z-index）
在z軸方向分層，可以理解為分成一摞紙，層數越高越靠上。
在上面relative的示例中，我們看到了aa遮住了a，這是因為后寫代碼的顯示級別越靠前，那么在不改變代碼順序的情況下如何讓a蓋住aa？如下：
五、 float：left、right
Left、right時不用給他規定位置（left、top），直接相對於瀏覽器。若外部被包裹，相對於外部div的除去一行的位置的左上或右上顯示。
overflow：hidden； //超出部分隱藏；scroll，顯示出滾動條；
<div style="clear:both"></div> //截斷流
半透明效果：
<div class="box">透明區域<div>
在樣式表中的代碼為：
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}