轉載：http://www.cnblogs.com/hellokitty1/p/3946054.html
1.CSS是成疊樣式表（Cascading Style Sheets）的縮寫.它用於定義HTML元素的顯示形式.
2.將CSS引入HTML的方式有三種：
a.外部樣式表：
<link rel="stylesheet" href=" "/>
b.嵌入樣式表：
<style type="text/css">.....</style>
c.內聯樣式表：
屬性名為style 舉例:<p style=“”></p>
3.CSS中的選擇器：
A:簡單選擇器；
a:元素選擇器；元素 { 屬性: 值; }
b:類選擇器；.類名 { 屬性: 值; } 注意有個點。
c:ID選擇器；#id名 { 屬性: 值; } 注意有個#，ID選擇器只能被引用一次，而類選擇器可以被多次引用。
d:偽類選擇器；（有四個狀態）1、a:link{ } (未訪問的鏈接)
2. a:visited{ }(已訪問的鏈接)
3. a:hover{ }(鼠標在鏈接上)
4. a:active{ }(激活鏈接)
e:偽元素選擇器；1, p:first-line{ }
2, p:first-letter{ }
4.復合選擇器：
a:交集選擇器：交集選擇器由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集。
其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器。這兩個選擇器之間不能有空格。
eg:p.special{ }
h3.cls{ }
(以上選擇器匹配)
<p class=“special”></p>
<h3 class=“cls”></h3>
b:並集選擇器：
eg: h1,h2,h3,h4,h5,h6{ }
h2.special,.special,#one{ }
c:後代選擇器：(繼承最近的)後代選擇器產生的影響不僅限於元素的"直接後代"，而且會影響到它的"各級後代"
5.理解樣式表的層疊:
層次的優先級別從小到大依次為：
外部樣式表
嵌入式樣式表
內聯樣式
如果是同一個樣式表中不同選擇器，優先級別從小到大依次為：
元素選擇器
類別選擇器
ID選擇器
CSS的基本屬性---文本樣式
1.長度單位 1.px 2.em
2.顏色定義 color
3.設置字體樣式 設置文字的字體 font-family："黑體";
設置字體傾斜效果 font-style：Italic；
設置文字加粗效果 font-weight:bold; （粗體) font-weight:bolder; (加粗)
font-weight:100(范圍100-900，數字越大字體越粗)
設置英文字母大小寫轉換 text-transform: capitalize; (單詞首字母大寫)
設置控制文字大小 font-size:..px/..%/..em
設置文字的裝飾效果 text-decoration: none/underline/line-through(刪除線)/overline(頂線)；
4.設置段落樣式 設置段落首行縮進 text-indent：..em(..個標准字符大小的距離)/..px；
設置字詞間距離 letter-spacing(字母):..px; word-spacing（單詞）:..px;
設置段落內部的文字行高 line-height:
控制文本的水平位置 text-align:left/right(右對齊)/center（居中）/justify（兩端對齊）
設置文字與背景顏色 color:...; background-color:...;
設置段落的垂直對齊方式 vertical-align:...;(只對表格單元格中的元素起作用)
css的基本屬性---圖像樣式
1.設置圖片邊框：border-width:(粗細） ; border-color:（顏色） ; border-style:（線性） ;
不同的邊框可以設置不同的樣式，eg:border-left-style、 border-top-width .... solid實線
2.圖片的縮放： width height （百分比，像素）
3.圖文混排：
文字環繞：float (浮動)
圖片與文字對齊方式：水平對齊 text-align: 垂直對齊 vertical-align:
4,。設置背景顏色與圖像：background-color: background-image:url(地址)
可以使用background-repeat：來控制平鋪，repeat：水平和垂直方向平鋪，默認值。
no-repeat：不平鋪。
repeat-x：只沿水平方向平鋪。
repeat-y：只沿垂直方向平鋪。
5.設置背景圖像位置：background-position：（ 可以設置兩個值 eg:left top）
6.設置背景圖片固定位置 ：background-attchment:fixed; 圖片滾動： scroll
補充：去掉無序列表前的小圓點，list-style: none;
上標用<sup> eg:圖像<sup>樣</sup>式
定位（查看position7）
1.絕對定位：（設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。）
position: relative；
top:..px;
left:..px;
2.相對定位: ( 絕對定位的元素的位置相對於最近的已定位的元素，
如果元素沒有已定位的元素，那麼它的位置相對於最初的包含塊。)position：absolute;
top:..px;
left:..px;
css基本屬性—表格樣式（les8）
1.控制表格：cellspacing：列間距 cellpadding：列的內邊距
border：表格邊框 bgcolor：表格顏色 border-collapse:合並相鄰列的邊框線
border-spacing : 設置列的間距
設置表格寬度：table-layout:fixed(固定)或者auto(自動)
<thead>：表示表頭 <tbody>：表示表內容 <tfoot>：表示表尾 （順序可以不一樣，但一般還是按順序）
2.設置鼠標經過時表格的樣式：a:hover
3.CSS與表單：a:制作像文字一樣的按鈕
transparent(透明的) 設置背景透明
border:0px; eg:<button id="" type="button" >......</button>
b:制作多彩下拉菜單 select option
c:制作只有下劃線的輸入框 border:0px/none;
border-bottom:1px (粗細) dashed(線性) #000000(顏色);
補充：1.display:block(行級元素換成塊級元素)/ inline(塊級元素換成行級元素)
2.CSS3的選擇器： :nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素.
n 可以是數字、關鍵詞或公式。
用CSS設置鏈接與導航菜單 （les9）
1.設置超鏈接樣式： 在HTML中<a> 在CSS中還可以用偽類選擇器的四個樣式 a:link(未訪問) a:visited（已訪問）。
a:hover（鼠標移上去） a:active（激活）
2.創建按鈕式超鏈接：text-decoration: none; a:link{ } a:active{ }
(可以設置這些) background: ;
color: ;
border-right: px solid ;
border-bottom: px solid ;
border-left: px solid ;
border-top: px 。
3.制作熒光菜單： 應用無序列表，<div>,a:hover, ( 查 les9)。
4.控制鼠標（cursor）指針 . {cursor: } （查 屬性下的其他 CSS 2.0 中文手冊）。
5.設置項目列表格式： 可以用有序列表<ol>與無序列表<ul> 用 list-style 來設置。
6.創建簡單的導航菜單:
a:垂直排列菜單
很多時候會用上 list-style-type:none 其作用是去掉有序或無序列表前的數字或圓點。
b:橫向菜單
實現橫豎轉換只需設置float:left即可，同時把寬度取消掉。
7.設置圖片翻轉效果:(指網頁中的一個圖片，在鼠標指針經過時換成另外一個圖片。) 可以用hover.
補充CSS3的屬性 rotate(角度)
效果：當鼠標移上去的時候，列表可以轉動你設置的角度。（正為順時針，負為逆時針，若是180度，可以看見字是倒立的。不能清楚的看見轉動
，但可以看見字的變化）
transform（轉換）:rotate（ 旋轉；循環 使旋轉；使轉動；使輪流）(-20deg) ； deg:程度（degree）
（查看les9-5）
CSS的盒模型 （les 10）
1.盒子的概念：在CSS中，一個獨立的盒子模型content（內容）、border（邊框）、padding（內邊距）和margin（外邊距）4個部分組成。
一個盒子實際所占用的寬度或高度是由“內容+內邊距+邊框+外邊距”組成的。
2.設置邊框，內邊距，外邊距：
a 內邊距（padding） padding屬性可以設置1、2、3、4個屬性值，分別如下：
設置1個屬性值時，表示上下左右4個padding均為該值。
設置2個屬性值時，前者為上下padding的值，後者為左右padding的值。
設置3個屬性值時，第1個位上padding的值，第2個為左右padding的值，第3個為下padding得值。
設置4個屬性值時，按照順時針方向，依次為上、右、下、左padding的值。
b 外邊距（margin） margin指的是元素與元素之間的距離 margin and padding 的設置時一樣的。
3.盒子之間的關系：
標准的文檔流：
<div>標記與<span>標記：div簡單而言是一個區塊容器標記，即<div>與</div>之間相當於一個容器，
可以容納段落、標題、表格、圖片、乃至章節等各種HTML元素。
二者的區別在於div是塊級元素，它包含的元素會自動換行。而span是內嵌元素，不會換行。
4.盒子在標准流中的定位原則：
行內元素之間的水平margin ：當兩個行內元素緊鄰時，它們之間的距離為第1個元素的margin-right加上第2個元素的margin-left。
塊級元素之間的垂直margin ：當兩個塊級元素是垂直排列，則情況有所不同。兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，
而是兩者中的較大者。
{背景定位：background-position:center; 為 background-position 屬性提供值有很多方法。首先，
可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，
不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。)
CSS盒子的浮動與定位
1.盒子的浮動（float）：在標准流中，一個塊級元素在水平方向會自動伸展。在垂直方向就不會並排。
CSS中有一個float屬性，默認為none，float屬性的值設置為left或right，元素就會向其父元素的左側或右側靠緊，
使用clear清楚浮動的影響
clear屬性除了可以設置為了left和right之外，還可以設置為both，表示同時清除左右兩邊的影響。
position屬性可以設置4個值：
static：默認值
relative：相對定位 （會相對於它原本的位置，通過偏移指定的距離，到達新的位置。不影響其他盒子）
absolute：絕對定位（其父元素的相對位置 其會影響他後面的盒子 就好像這個盒子被拿走了，
其他排在後面的盒子將填補前面的位置。）
fixed：固定定位（當滾動條滑動式其不會改變位置，會一直在那裡。）
2.盒子的定位(static):
盒子的定位(relative) ——left、right、top、bottom這四個屬性只有當position屬性設置為absolute、relative或fixed時才有效。
3.z-index ：z-index屬性用於調整定位時重疊塊的上下位置，z-index值大的元素位於值小的上方。（默認的z-index值為0，當兩個塊的z-index值一樣時，
將保持原有的高低覆蓋關系。）
4.盒子的display屬性 ：display屬性的block和inline兩個值，一個代表塊級顯示，一個代表內嵌顯示。display還有個值為none，當設置為none時，
表示該元素將被隱藏。此隱藏表示該元素徹底從頁面上消失。
8.28
1.overflow(溢出)：有四個值： visible(默認值。不剪切內容也不增加滾動條)
hidden （隱藏內容多出的部分）
auto (當內容多出框的時候顯示出滾動條)
scroll（始終顯示滾動條）
2.display(顯示)：常用的值： none :此元素不會被顯示。
block :此元素將顯示為塊級元素，此元素前後會帶有換行符
inline ：此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block : 行內塊元素。
3.clip(剪切)：兩個值： auto : 對象無剪切
rect ( number number number number ) : 依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值，
其中任一數值都可用auto替換，即此邊不剪切 。注意：檢索或設置對象的可視區域。
區域外的部分是透明的。必須將position的值設為absolute，此屬性方可使用。
8.29（復習）
1.height：auto
overflow：hidden 這是個組合件，其作用是：使自動變到與內部方框（或是最高的那個方框）一樣高。必須一起使用。
2.定位 （position） 這裡的left是指：離左邊多遠。top是指離上邊多遠。
相對定位：（position：relative；）其參考點是：本身原來位置的左上角。移動後原來的那個位置會被占據。
絕對定位：（position：absolute；）其參考點是：其父元素有position的左上角。移動後原來的那個位置會空出來。
3.清除（clear） 只影響清除的本身。其意思是：想讓哪塊動，就在哪塊上用clear。通常用clear：left； clear：both；
4.display（顯示）： display：none； 隱藏，空間留給他們用。
visibility：hidden； 隱藏，位置空出來，仍在那裡。
display：inline；此元素會被顯示為內聯元素，元素前後沒有換行符。
display：block； 此元素將顯示為塊級元素，此元素前後會帶有換行符。
5.用iframe實現框架結構：
<iframe src=“URL” width=“x” height=“x” scrolling="[auto|yes|no]" frameborder="0|1“ name="內部框架的名稱”></iframe>
<a href="地址" target="內部框架的名稱">文字</a>
6.opacity(不透明)：值為0到1.
7.a標簽的提交方式默認為get.
8.行級元素設置的width，height，是沒有用的。
