基礎知識--css
目錄
- 選擇器
- 在html引入css的方式
- css盒子模型
選擇器Selectors
基本選擇器
- 標簽名選擇器（tag selectors）：
p{
color: blue; /*聲明部分*/
text-decoration: underline;
}
- 類選擇器（最常用）（class selectors）：
.className{
color: red;
font-size: 18px;
}
- ID選擇器（ID selectors）：
- id選擇器比較少用，一般樣式是可復用的，而同個頁面id是唯一的，這樣就降低了樣式的復用率。但是一般類似
header，footer，banner，conntent可設置成ID選擇器，因為相同的樣式在同一頁面里不可能有第二次。
- id選擇器比較少用，一般樣式是可復用的，而同個頁面id是唯一的，這樣就降低了樣式的復用率。但是一般類似
#idName{
color: black;
font-size: 18px;
}
-
偽類選擇器：
- CSS偽類（pseudo-class）是加在選擇器后面的用來指定元素狀態的關鍵字。比如，
:hover會在鼠標懸停在選中元素上時應用相應的樣式。偽類和偽元素（pseudo-elements）不僅可以讓你為符合某種文檔樹結構的元素指定樣式，還可以為符合某些外部條件的元素指定樣式：瀏覽歷史(比如是否訪問過 (:visited)， 內容狀態(如:checked), 鼠標位置 (如:hover).
a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: #00FF00} /* 已訪問的鏈接 */ a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */ a:active {color: #0000FF} /* 選定的鏈接 */?
- CSS偽類（pseudo-class）是加在選擇器后面的用來指定元素狀態的關鍵字。比如，
-
通配符選擇器（*）：
*選擇所有元素。
*{
marigin: 0;
padding: 0;
}
擴展選擇器
- 在標簽內寫入
style=“”的方式，應該是css的一種引入，而不是選擇器。
- 后代選擇器：
- 后代選擇器實際上是使用多個選擇器中間加上空格來找到具體要定位的標簽。選擇器之間的空格是一種結合符。以下的例子可以解釋為
em在h1中找到，em作為h1的后代。
- 后代選擇器實際上是使用多個選擇器中間加上空格來找到具體要定位的標簽。選擇器之間的空格是一種結合符。以下的例子可以解釋為
h1 em{
color: red;
}
- 群組選擇器：
- 實際上是css標簽名選擇器的一種簡化寫法。把有相同定義的不同選擇器放在一起，節省代碼。
div,span{
color: green;
}
在HTML中引入css
- 包括行內式，內嵌式，導入式，鏈接式。
- 行內式：在標簽內的style屬性設定css樣式，這種方式本質上沒有體現處css的優勢，因此不推薦使用。
<h2 style="color: blue">在html引入css--行內式</h2>
- 嵌入式：在對頁面中各種元素的設置集中寫在
<head></head>之間，對單個頁面來說，這種方式很方便。
<style>
h2{
color: aqua;
}
</style>
- 導入式：
<style type="text/css">
@import "style.css";
</style>
- 鏈接式：
<link href="style.css" rel="stylesheet" type="text/css"/>
導入式和鏈接式的區別
鏈接式：會在裝載頁面主體部分之前裝載css文件，這樣顯示出來的網頁從一開始就是帶有樣式效果的。
導入式：會在整個頁面裝載完成之后在裝入css文件，對于有的瀏覽器來說，在一些情況下，如果網頁文件的體積比較大，則會顯示無樣式的頁面，閃爍一下之后再出現設置樣式后的效果。從用戶的角度看，這是導入式的一個缺陷。
-
對于一些比較大的網站，為了便于維護，可能會希望把所有的css樣式分類別放到幾個CSS文件中，這樣如果使用鏈接式引入，就需要幾個語句分別導入CSS文件。如果要調整CSS文件的分類，就需要同時調整HTML文件，這對于維護工作來說，是一個缺陷，如果使用導入式，則可以只引進一個總的CSS文件，在這個文件中再導入其他獨立CSS文件；而連接則不具備這個特性。
因此給大家的建議是：如果僅需要引入一個CSS文件，則使用連接方式，如果需要引入多個CSS文件，則首先用連接方式引入一個“目錄”CSS文件，這個“目錄”CSS文件中再使用導入式引入其他CSS文件。如果希望用javascript來動態決定引入哪個css文件，則必須使用連接式才能實現。reference--在html中引入CSS的方法。
樣例：
源碼->：demo下載。
盒子模型（box-model）
- CSS框模型是Web上布局的基礎 - 每個元素都表示為一個矩形框，框的內容(content)，填充(padding)，邊框(border)和邊距(margin)彼此相似，如洋蔥層。作為瀏覽器呈現網頁布局，它制定了應用于每個框的內容的樣式，周圍的洋蔥層有多大，以及盒子相對于彼此的位置。
-
width和height：width和height的可以設定content的寬度和高度。 -
padding：padding（填充）是指css框的content的外邊緣和border的內邊緣之間的部分。padding-top，padding-bottom，padding-right，padding-left。 -
border：boder（邊框）位于padding的外邊緣和margin的內邊緣之間。border的默認大小為0，使其不可見。border可一次設置所有四面體，也可分開設置：-
border-top，border-right，border-bottom，border-left：設置厚度，款式和邊境一側的顏色。 -
border-width，border-style，border-color：設置僅厚，樣式或顏色獨立，但邊界的所有四個側面。 - 您還可以設置單獨的邊框的單面的三個屬性之一，使用
border-top-width，border-top-style，border-top-color，等。
-
-
margin：margin圍繞一個CSS框，并向上推動布局中的其他CSS框。它的行為很像padding; 速記屬性margin和個人屬性是margin-top，margin-right，margin-bottom，和margin-left。
2種盒子模型
w3c標準盒子模型
從上圖可以看到標準 w3c 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE盒子模型
從上圖可以看到 ie 盒子模型的范圍也包括 margin、border、padding、content，和標準 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。
