【CSS學習】CSS學習筆記

作者：gnuhpc
出處：http://www.cnblogs.com/gnuhpc/

註：本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到W3School（http://www.w3school.com.cn/css/index.asp ）進行系統學習。

學習CSS我使用的工具是Visual CSS，可以實現同步預覽，快速學習編輯CSS。

1.CSS的作用 ：用來規定網頁中的內容的顯示方式，避免給HTML增加很多的屬性而將代碼變得臃腫。

2.CSS的應用方式

（1）內聯樣式：在標籤中包括一個style屬性，並在其後定義CSS屬性及值，例如：

Hello world!

（2）文檔級樣式表：將一系列樣式規則羅列在HTML文檔開頭，處於內的之間，它可以改變外部樣式表中定義的一個或多個規則，建立一個個人化的文檔，適用於單個HTML檔案。

（3）外部樣式表：將樣式定義放置於分離的文檔中，在各個需要應用該樣式表的HTML通過在內的標籤引入這個分離文檔，例如。每次開啟頁面都需要下載這個表格，所以要盡量減小樣式表的容量。

注意：三種樣式表範圍不同，同時存在時的頁面處理原則為：

• “近優先於遠”——內聯樣式>文檔級樣式。
• “局部優先於整體”——定義為標籤的類的屬性>為標籤總體進行定義的屬性
• “特殊優先於一般”——上下文樣式>為標籤總體進行定義的屬性
• “後優先於前”——後邊指定的屬性>前面指定的屬性

3.CSS文法 ：

選擇符+屬性（屬性名稱+屬性值）。

• selector：表示受樣式規則影響的HTML標記元素的名稱，由於XHTML中規定標籤都為小寫，CSS2則也建議為selector為小寫。
• property+value：具體定義各種樣式屬性。

例如：

h1{

     color:red;

     font-size:14px;

}

4.selector詳解

（1）標籤選取器：最簡單的直接對HTML標籤進行操作的選取器，其中有三種特殊的選取器：

1）萬用字元選取器：將樣式應用到文檔中的所有元素中：

* {
    color:red;
    font-style:italic
}

2）屬性選取器：將樣式應用到具有某一個特殊屬性的標籤中：作用於align屬性為right的

元素

Div[alige=right]{
    color:black;
    font-style:italic;
}

3）群組選取器：將幾個便簽相同的選取器寫在一起：

p,u1,u2,u3 {
    color:red;
    font-style:italic
}

4）

（2）類別選取器：處理具有統一名稱但是有不同格式的標籤時使用。在標籤中使用 class=類名 就可以指明使用該選取器規定的樣式了。

1）常規類：標籤名.類名{}，例如：

font.big{
    font.size:18pt;
}

font.small{
    font.size:10pt;
}

使用時：

Hello, A

Hello, B

2）一般類：不與特定標籤相連，以.為首碼定義。

3）偽類：用於特殊用途，最常用的是超連結的3種狀態（在此只討論這三種狀態）：未訪問、正被訪問、已訪問。定義方式為：a:類名{}。其中類名為link/active/visited。在HTML中使用a標籤進行使用。

（3）ID選取器：ID是唯一的選擇符，#id 名稱 {}，使用時  id=”類別名”方法調用，用於定義大結構，如logo、nav、content、copyright。也就是說id需要具有唯一性的元素使用，盡量在外圍使用，而class具有可重複性，盡量在結構內部使用。id是唯一的，並且是父級的，而class是可重複的，並且是子集的。 一般用#father .child{}來將所有class變成id的子孫級，便於後期維護和修改。也可以使用群組方式串連。
例如：

#main p
{
    color:#000;
    font-size:18pt;
}

（4）派生選取器：或叫做上下文選取器 (contextual selectors)，派生選取器允許你根據文檔的上下文關係來確定某個標籤的樣式，無需指定class或者id。通過合理地使用派生選取器，我們可以使 HTML 程式碼變得更加整潔。你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選取器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

使用：

 

  

  
我是斜體字。這是因為 strong 元素位於 li 元素內。

  
我是正常的字型。

 

5.CSS屬性：大多使用派生選取器形式來定義。

6.CSS設計方法

（1）繼承：允許樣式不僅可以應用於某個特定的元素還可以應用到它的後代中。可以自己使用important!定義優先順序，注意其總是放在規則聲明的最後，分號之前。

（2）盒模型：假設HTML元素都可以裝在一個矩形框內，由內到外依次是內容、間距、邊框、邊距。IE和Firefox對盒模型的解釋不一致。這是一個充滿相對性的概念，比較重要。

background-color將填滿border內部的全部範圍；background-image預設以圖片左上方對齊border內部左上方點，然後完整顯示整個圖片（超出部分不予顯示），如果圖片尺寸不足鋪滿整個範圍，圖片預設重複自己直至鋪滿或超出範圍； background-image將疊加到background-color之上；通過指定圖片的對齊，可以改變background-image的位置；

通過以上這些規則的組合，就能在有限的元素組合下，實現各種修飾性效果。

舉例：背景色與背景圖的合成、圖片和文字的分離後合成。

作者：gnuhpc

出處：http://www.cnblogs.com/gnuhpc/