CSS 指層疊樣式表 (Cascading Style Sheets)
CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式
樣式定義如何顯示 HTML 元素
樣式通常儲存在樣式表中
把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常儲存在 CSS 檔案中
多個樣式定義可層疊為一
:
如果你要在HTML元素中設定CSS樣式，你需要在元素中設定”id” 和 “class”選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
http:/ /www.iis7.com/b/wzjk/
HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 “#” 來定義
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點”.”號顯示：
類名的第一個字元不能使用數字！它無法在 Mozilla 或 Firefox 中起作用
選擇器通常是您需要改變樣式的 HTML 元素。
每條宣告由一個屬性和一個值組成。
屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開
:
css樣式三種呼叫使用方式：
插入樣式表的方法有三種:
外部樣式表(External style sheet)：語法：
內部樣式表(Internal style sheet)：在頭部寫樣式
內聯樣式(Inline style)：直接在元素中寫(不推薦)
*全域性標記{ }
：
為了避免Internet Explorer 中無法調整文字的問題，使用 em 單位代替畫素。
em的尺寸單位由W3C建議。
1em和當前字型大小相等。在瀏覽器中預設的文字大小是16px。
因此，1em的預設大小是16px，可以換算。
:
css背景樣式：
background-color：背景顏色
background-image：url(“圖片”)：背景圖片(預設情況下，背景影像進行平鋪重複顯示，以覆蓋整個元素實體)
background-repeat：背景平鋪 on-repeat不平鋪 -x橫向平鋪-y垂直平鋪
background-position：背景定位屬性
background-attachment:背景附件屬性 fixed(固定背景屬性)
background：# url（#）有背景有圖片輸入 列子
：
css文字樣式值：
font-size：#px； 文字大小
font-family：字型樣式,如:微軟雅黑
font-style：文字狀態如 斜體等
font-weight：文字粗細
text-align：文字對齊
font-variant ：字型之間的轉變，以小型大寫字型或者正常字型顯示文字。
line-height：行高 上下距離會有變化，也可以用於行與行之間的空間(%)
text-decoration：文字裝飾 underline下劃線 none去除下劃線
text-decoration: overline：上劃線
text-decoration:line-through：刪除線
text-transform: uppercase：英文大寫
text-transform:lowercase：英文小寫
text-transform:capitalize：首字母大寫
text-align：設定為”justify”，每一行被展開為寬度相等，左，右外邊距是對齊
text-indent：第一行的文字縮排
text-shadow：文字陰影，(1.左右2.上下3.模糊程度4.顏色)
letter-spacing：字元之間的空間
direction：文字方向
word-spacing：增加在字元之間空白的空間
white-space:nowrap:在元素內禁止文字環繞
字型屬性定義字型，加粗，大小，文字樣式。
font-family 屬性設定文字的字型系列。
font-family 屬性應該設定幾個字型名稱作為一種”後備”機制，如果瀏覽器不支援第一種字型，他將嘗試下一種字型。
font-style：這個屬性有三個值：normal(正常)，italic(斜體)，oblique(斜體)
font-size 屬性設定文字的大小。
能否管理文字的大小，在網頁設計中是非常重要的。但是，你不能通過調整字型大小使段落看上去像標題，或者使標題看上去像段落。
請務必使用正確的HTML標籤，就

–

表示標題和

表示段落：
字型大小的值可以是絕對或相對的大小。
絕對大小：設定一個指定大小的文字，不允許使用者在所有瀏覽器中改變文字大小
確定了輸出的物理尺寸時絕對大小很有用
相對大小：相對於周圍的元素來設定大小，允許使用者在瀏覽器中改變文字大小
：
css列表樣式：
在HTML中，有兩種型別的列表：

• 無序列表 – 列表項標記用特殊圖形（如小黑點、小方框等）

1. 有序列表 – 列表項的標記有數字或字母
   list-style-type：列表符號
   list-style-image：影像符號(可以自定義)
   list-style-position：位置符號
   list-style:複合屬性(可以多種屬性在一起)
   list-style: none：清除預設小黑點
   circle圓圈
   disc正方形
   ：
   CSS 盒子模型(Box Model)
   所有HTML元素可以看作盒子，在CSS中，”box model”這一術語是用來設計和佈局時使用。
   CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
   盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
   margin(外邊距) – 清除邊框外的區域，外邊距是透明的, Margin可以使用負值，重疊的內容。Margin: # auto(自動)居中：放大縮小 #上下自動
   border(邊框) – 圍繞在內邊距和內容外的邊框。top上, left左, right右, bottom下，(color顏色, width寬, solid實線，dashed虛線)
   padding(內邊距) – 清除內容周圍的區域，內邊距是透明的。
   Content(內容) – 盒子的內容，顯示文字和影像。
   最終元素的總寬度計算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
   元素的總高度最終計算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
   border-style：用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式，如下所示：
   none : 預設無邊框
   dotted : 定義一個點線邊框
   dashed : 定義一個虛線邊框
   solid : 定義實線邊框
   double : 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
   groove : 定義3D溝槽邊框。效果取決於邊框的顏色值
   ridge : 定義3D脊邊框。效果取決於邊框的顏色值
   inset : 定義一個3D的嵌入邊框。效果取決於邊框的顏色值
   outset : 定義一個3D突出邊框。 效果取決於邊框的顏色值
   。。。。。。。。。。。
   border-right：分割線
   border：用於把針對四個邊的屬性設定在一個宣告。
   border-width：用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。
   border-color：設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。
   border-bottom：用於把下邊框的所有屬性設定到一個宣告中。
   border-bottom-color：設定元素的下邊框的顏色。
   border-bottom-style：設定元素的下邊框的樣式。
   border-bottom-width：設定元素的下邊框的寬度。
   border-left：用於把左邊框的所有屬性設定到一個宣告中。
   border-left-color：設定元素的左邊框的顏色。
   border-left-style：設定元素的左邊框的樣式。
   border-left-width：設定元素的左邊框的寬度。
   border-right：用於把右邊框的所有屬性設定到一個宣告中。
   border-right-color：設定元素的右邊框的顏色。
   border-right-style：設定元素的右邊框的樣式。
   border-right-width：設定元素的右邊框的寬度。
   border-top：用於把上邊框的所有屬性設定到一個宣告中。
   border-top-color： 設定元素的上邊框的顏色。
   border-top-style：設定元素的上邊框的樣式。
   border-top-width：設定元素的上邊框的寬度。
   為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick(厚的) 、(中等)medium（預設值） 和 thin(薄的)。
   ：
   CSS 輪廓（outline）
   輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
   輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度
   outline：在一個宣告中設定所有的輪廓屬性
   outline-color：設定輪廓的顏色
   outline-style：設定輪廓的樣式
   outline-width：設定輪廓的寬度
   ：
   CSS margin(外邊距)
   margin(外邊距)屬性定義元素周圍的空間。
   margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的。
   margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
   margin可以使用負值，重疊的內容。
   auto ：設定瀏覽器邊距，這樣做的結果會依賴於瀏覽器
   length：定義一個固定的margin（使用畫素，pt，em等）
   % ：定義一個使用百分比的邊距
   為了縮短程式碼，有可能使用一個屬性中margin指定的所有邊距屬性。這就是所謂的簡寫屬性，所有邊距屬性的簡寫屬性是 margin :
   margin：屬性可以有一到四個值：(邊距是順時針旋轉：上右下左)
   margin：在一個宣告中設定所有外邊距屬性。
   margin-bottom：設定元素的下外邊距。
   margin-left：設定元素的左外邊距。
   margin-right：設定元素的右外邊距。
   margin-top：設定元素的上外邊距。
   ：
   CSS padding（填充）
   length：定義一個固定的填充(畫素, pt, em,等)
   %：使用百分比值定義一個填充
   padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
   當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
   單獨使用 padding 屬性可以改變上下左右的填充。
   為了縮短程式碼，它可以在一個屬性中指定的所有填充屬性，這就是所謂的簡寫屬性。所有的填充屬性的簡寫屬性是 padding :
   padding：屬性可以有一到四個值：(邊距是順時針旋轉：上右下左)
   padding：使用簡寫屬性設定在一個宣告中的所有填充屬性
   padding-bottom：設定元素的底部填充
   padding-left：設定元素的左部填充
   padding-right：設定元素的右部填充
   padding-top：設定元素的頂部填充
   :
   CSS 尺寸 (Dimension)
   尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。
   height：設定元素的高度。
   width 設定元素的寬度。
   line-height：設定行高。
   max-height：設定元素的最大高度。
   max-width：設定元素的最大寬度。
   min-height：設定元素的最小高度。
   min-width：設定元素的最小寬度。
   ：
   CSS Display(顯示) 與 Visibility（可見性）
   display：屬性設定一個元素應如何顯示。
   visibility：屬性指定一個元素應可見還是隱藏。
   隱藏元素 – display:none 或 – visibility:hidden
   隱藏一個元素可以通過把display屬性設定為”none”，或把visibility屬性設定為”hidden”。
   display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
   visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了但仍然會影響佈局。
   display(不佔空間)：隱藏。none不顯示 block顯示
   visibility(佔空間)：隱藏。 hidden不顯示 visitle顯示
   display:inline：可以把塊級元素變成內聯元素
   display:block：可以把內聯元素變成塊級元素，不允許有它內部的巢狀塊元素。
   塊級元素(block)特性：
   總是獨佔一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示;
   寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
   內聯元素(inline)特性：
   和相鄰的內聯元素在同一行;
   寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是裡面文字或圖片的大小;
   塊級元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
   內聯元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
   可變元素(根據上下文關係確定該元素是塊元素還是內聯元素)：applet ,button ,del ,iframe , ins ,map ,object , script
   CSS中塊級、內聯元素的應用：利用CSS我們可以擺脫上面表格裡HTML標籤歸類的限制，自由地在不同標籤/元素上應用我們需要的屬性。
   主要用的CSS樣式有以下三個：
   display:block — 顯示為塊級元素
   display:inline — 顯示為內聯元素
   display:inline-block — 顯示為內聯塊元素，表現為同行顯示並可修改寬高內外邊距等屬性
   我們常將

• 元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。
  :
  CSS Position(定位)
  position 屬性指定了元素的定位型別。
  position 屬性的五個值：
  static：預設值，沒有定位，元素出現在正常的流中，靜態定位的元素不會受到 top, bottom, left, right影響。
  absolute：絕對定位，相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於，元素和其他元素重疊。
  relative：相對定位，相對其正常位置，(相對靈活，按元素自己的位置)
  fixed：固定定位，即使視窗是滾動的它也不會移動
  sticky：可以把它稱之為粘性定位，依賴於使用者的滾動，在 position:relative 與 position:fixed 定位之間切換
  元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決於定位方法
  z-index：指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面），一個元素可以有正數或負數的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
  clip:rect：裁剪元素，先有定位
  overflow:scroll：內容溢位時，顯示隱藏內容
  overflow:hidden：內容溢位時，隱藏
  overflow:auto：自動處理溢位內容
  overflow-x：指定如何處理右邊/左邊邊緣的內容溢位元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
  overflow-y：指定如何處理頂部/底部邊緣的內容溢位元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
  :
  CSS float(浮動)
  浮動，可以讓行內和塊變成行內塊
  浮動，會使元素向左或向右移動，其周圍的元素也會重新排列。
  浮動，往往是用於影像，但它在佈局時一樣非常有用
  元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
  一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
  浮動元素之後的元素將圍繞它。
  浮動元素之前的元素將不會受到影響。
  如果影像是右浮動，下面的文字流將環繞在它左邊
  如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰
  1.

浮動清除
2.overflow：hiddc，auto
：
游標懸停時，外形變化
cursor:move：四方拉伸
cursor:e-resize：左右拉伸
cursor:w-resize：左右拉伸
cursor:n-resize：上下拉伸
cursor:s-resize：上下拉伸
cursor:ne-resize：右上角+左下角
cursor:sw-resize：右上角+左下角
cursor:nw-resize：左上角+右下角
cursor:se-resize：左上角+右下角
cursor:auto：文字
cursor:text：文字
cursor:default：原形
cursor:help：原形+問號
cursor:pointer：手指
cursor:progress：原形+載入
cursor:wait：載入
cursor:crosshair：十字
：
CSS 偽類(Pseudo-classes)：
游標經過顯示狀態：
a:link：未訪問過的連結
a:hover：當使用者滑鼠懸停在連結上時
a:visited：使用者已訪問過的連結
a:active：連結被點選的那一刻
a:focus：選擇元素輸入後具有焦點
所有CSS偽類/元素：
:checked input:checked：選擇所有選中的表單元素
:disabled input:disabled：選擇所有禁用的表單元素
:empty p:empty：選擇所有沒有子元素的p元素
:enabled input:enabled：選擇所有啟用的表單元素
:first-of-type p:first-of-type：選擇每個父元素是p元素的第一個p子元素
:in-range input:in-range：選擇元素指定範圍內的值
:invalid input:invalid：選擇所有無效的元素
:last-child p:last-child：選擇所有p元素的最後一個子元素
:last-of-type p:last-of-type：選擇每個p元素是其母元素的最後一個p元素
:not(selector) :not(p)：選擇所有p以外的元素
:nth-child(n) p:nth-child(2)：選擇所有p元素的第二個子元素
:nth-last-child(n) p:nth-last-child(2)：選擇所有p元素倒數的第二個子元素
:nth-last-of-type(n) p:nth-last-of-type(2)：選擇所有p元素倒數的第二個為p的子元素
:nth-of-type(n) p:nth-of-type(2)：選擇所有p元素第二個為p的子元素
:only-of-type p:only-of-type ：選擇所有僅有一個子元素為p的元素
:only-child p:only-child：選擇所有僅有一個子元素的p元素
:optional input:optional：選擇沒有”required”的元素屬性
:out-of-range input:out-of-range：選擇指定範圍以外的值的元素屬性
:read-only input:read-only：選擇只讀屬性的元素屬性
:read-write input:read-write：選擇沒有隻讀屬性的元素屬性
:required input:required ：選擇有”required”屬性指定的元素屬性
:root root ：選擇文件的根元素
:target #news:target：選擇當前活動#news元素(點選URL包含錨的名字)
:valid input:valid：選擇所有有效值的屬性
:focus input:focus：選擇元素輸入後具有焦點
:first-letter p:first-letter：選擇每個

元素的第一個字母
:first-line p:first-line：選擇每個

元素的第一行
:first-child p:first-child：選擇器匹配屬於任意元素的第一個子元素的

元素
:before p:before：在每個

元素之前插入內容
:after p:after：在每個

元素之後插入內容
:lang(language) p:lang(it)：為

元素的lang屬性選擇一個開始值
：
CSS 偽元素
“first-line” 偽元素用於向文字的首行設定特殊樣式
“first-line” 偽元素只能用於塊級元素。
注意： 下面的屬性可應用於 “first-line” 偽元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 偽元素
“first-letter” 偽元素用於向文字的首字母設定特殊樣式：
注意： “first-letter” 偽元素只能用於塊級元素。
注意： 下面的屬性可應用於 “first-letter” 偽元素：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear
:before：偽元素可以在元素的內容前面插入新內容。
:after：偽元素可以在元素的內容之後插入新內容。
：
CSS 佈局 – 水平 & 垂直對齊
要水平居中對齊一個元素(如