l 樣式選擇器
l 僞選擇器
l 樣式屬性
l 佈局
1.概念和基本認識：
CSS（層疊樣式表）是用來美化網頁的。可以對頁面元素進行更精緻的設置，樣式主要描述元素的字體，背景顏色，邊框等。
三種使用方式： 元素內聯，頁面嵌入，外部引用
元素內聯：直接將樣式寫入元素標籤中，一般適用於樣式沒有複用的場合。
例如：<inputtype="button"value="網編"style=" border-width:thick;width:500px;height:100px;"/>
頁面嵌入：當頁面上某一類元素標籤都是一種風格時使用。
例如：
<head>
<title>無標題頁</title>
<styletype="text/css">
input{border-width:thick;width:500px;height:100px;}
div{font-size:x-large;color:Red;}
</style>
</head>
外部引用：將固定的樣式風格寫入一個CSS文件中，需要的時候直接引用，這樣複用的範圍更廣，適用於多個頁面複用。（新建web-樣式表，使用時在網頁頭部添加引用）
例如：
<head>
<title>無標題頁</title>
<linktype="text/css"rel="Stylesheet"href=styletest1.css/>
</head>
一般情況下只需要改變href中的引用即可。
2.CSS中的計量單位： px(像素) 、30%（百分比）、em(相對單位）
3.常見樣式：
設置邊框：border-color/border-style/border-width/
設置可見：display（值爲none時元素不顯示）
設置鼠標指針顯示：cursor(常設值有：pointer（手掌）、wait(沙漏))，可以添加url(cur或ani格式的圖標自設指針形狀)
設置鏈接：url(鏈接地址)例如：<inputtype="button"style="background-image:url('Sample%20Pictures/1.gif');height:182px;width: 328px;cursor:url('Sample%20Pictures/1.gif')"/>
4.樣式選擇器
針對頁面嵌入和外部引用，因爲其使用範圍擴大，所以引申出樣式選擇器的概念，樣式選擇器有三種。
1）標籤選擇器，根據不用的元素標籤使用。
input{border-width:thick;width:500px;height:100px;}
div{font-size:x-large;color:Red;}
2）class選擇器，命名一個樣式，然後在需要使用的元素標籤中設該名稱爲class屬性的值表示引用該種樣式。可以設多種class，用空格隔開（<inputtype="button"class="ban love"value="我的快樂"/>），樣式名稱前加‘.’。
<head>
<title>無標題頁</title>
<styletype="text/css"><!--下面這部分可以放入CSS文件中，調用方法爲外部引用法-->
.love{background-color:Red;width:100px;height:200px;}
.ban{border-color:Yellow;border-width:thick;}
</style>
</head>
使用：<inputtype="button"class="love"/>
拓展：標籤+class選擇器
樣式名相同，但是對不同的標籤有不同的設定。
input.love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
label.love{font-size:xx-large;}
使用：
<inputtype="button"class="love"value="我的快樂"/>
<labelclass="love">ssssssssssssss</label>
3）id選擇器，跟class選擇器類似，樣式名稱前加‘#’。使用時引用id屬性。只是他不能同時使用多種樣式。
例如：
#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
<inputtype="button"id="love" value="我的快樂"/>
<labelid="love">ssssssssssssss</label>
同樣可以使用標籤+id選擇器：
input#love{background-color:Red;width:100px;height:200px;font-size:xx-large;}
label#love{font-size:xx-large;}
使用：
<inputtype="button"id="love" value="我的快樂"/>
<labelid="love">ssssssssssssss</label>
5.其他選擇器
1）關聯選擇器：描述關聯標籤中的樣式。
pstrong{background-color:Blue;}
只有在 <p><strong>sdddgdg</strong></p>中的文本纔會有此樣式。
2）組合選擇器：幾種標籤都是一種樣式。
h1,h6,input{background-color:Red;}
6.僞選擇器（經常用，但是格式很固定（超鏈接常用））
A:visited{text-decoration:none;}
A:active{text-decoration:none;}
A:link{text-decoration:none;}
A:hover{text-decoration:underline;}
上面爲常用的樣式，當鼠標停留時顯示下劃線，否則不顯示。
2013-12-22日補充：
1.meta 標籤一般表示編碼格式和關鍵字與描述（寫在head標籤中）
2.<pre></pre> 預格式化標籤（保留標籤內格式）
3.https 多用於登錄時使用的協議
Javascript js僞協議（彈窗）
Mailto mailto:郵箱？Subject=主&body=郵件內容
4.每個html頁的開頭要寫上文檔類型定義：<!doctype html>
<!DOCTYPE HTML PUBLIC “version name” “url”>
5.<frameset cols/rows=”分頁比例”><frame src=”url”>每個分頁</frame></frameset> 實現瀏覽器分頁
6.<iframe src=”url”>實現頁中頁的效果<iframe>
7.<base/>標籤，只能出現在html文件開頭部分（<head>中）,可用於設定本文件中的超鏈接的基準地址和target屬性（適用於本文件中的所有鏈接(包括a標籤，圖片鏈接)）。
8.設置段落的首字母下沉不用div的情況下可用僞樣式選擇器：p:first-letter{
Font-size:300%;float:left;}
9.類表前邊的項目符號可以設置爲圖片：list-style-image:url(‘地址’);符號設置：list-style-type:none(無)
10.CSS樣式屬性：（此部分列出常用的，需要記住）
1.-文本字體樣式
顏色，color
字體,font-family
大小,font-size
權重,font-weight (bold,bolder)
修飾,text-decoration (overline(上劃線)，line-through(中劃線)，underline(下劃線)
基線,lineheight (文本放入框中)
對齊，text-align（水平），vertical-align(垂直對齊)
大小寫轉換,text-transform
字體間距：word/letter-spacing
2.背景樣式：
背景色，Background-color
背景圖片，background-image
背景圖片排列方式，background-repeat
背景圖片位置：background-position
11.佈局
Visibility:設置元素的可見狀態，inherit(繼承父層的顯示屬性)；visible（顯示），hidden（隱藏）
Display:inline(將div轉換span),block(將span轉換成div),none
Float:left,right 浮動 （不會覆蓋div內容）
Clear: left,right,both v 清楚浮動
Overflow:visiable,hidden,scroll,auto 設置元素內容超過設置大小後的顯示
盒子相關：
Padding（內間距）|margin（外間距）(top,right,bottom,left)
border(top,right,bottom,left,color,width,style（設置邊框類型（solid，double等））) 簡寫： border: 1px,solid,red;
