3.CSS使用基礎(2)

a:link {color:#FF0000;}      /* unvisited link */ 
a:visited {color:#00FF00;}  /* visited link */ 
a:hover {color:#FF00FF;}  /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

當設置爲若干鏈路狀態的樣式，也有一些順序規則：

a:hover 必須跟在 a:link 和 a:visited後面

a:active 必須跟在 a:hover後面

常見的連接樣式

根據上述連接的顏色變化的例子，看它是在什麼狀態。

讓咱們經過一些其餘常見的方式轉到連接樣式：

文本修飾

text-decoration 屬性主要用於刪除連接中的下劃線：

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:active {text-decoration:underline;}

背景顏色

背景顏色屬性指定連接背景色：

a:link {background-color:#B2FF99;} 
a:visited {background-color:#FFFF85;} 
a:hover {background-color:#FF704D;} 
a:active {background-color:#FF704D;}

二.CSS 列表樣式(ul)

不一樣的列表項標記

list-style-type屬性指定列表項標記的類型是：

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

一些值是無序列表，以及有些是有序列表。

下列是對list-style-type屬性的常見屬性值的描述：

none：不使用項目符號
disc：實心圓
circle：空心圓
square：實心方塊
demical：阿拉伯數字
lower-alpha：小寫英文字母
upper-alpha：大寫英文字母
lower-roman：小寫羅馬數字

upper-roman：大寫羅馬數字

值	描述
none	無標記。
disc	默認。標記是實心圓。
circle	標記是空心圓。
square	標記是實心方塊。
decimal	標記是數字。
decimal-leading-zero	0開頭的數字標記。(01, 02, 03, 等。)
lower-roman	小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman	大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha	小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin	小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin	大寫拉丁字母(A, B, C, D, E, 等。)
hebrew	傳統的希伯來編號方式
armenian	傳統的亞美尼亞編號方式
georgian	傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic	簡單的表意數字
hiragana	標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

做爲列表項標記的圖像

要指定列表項標記的圖像，使用列表樣式圖像屬性：

ul
{
list-style-image: url('sqpurple.gif');
}

上面的例子在全部瀏覽器中顯示並不相同，IE和Opera顯示圖像標記比火狐，Chrome和Safari更高一點點。

提示：利用 list-style-position 能夠肯定標誌出如今列表項內容以外仍是內容內部。

若是你想在全部的瀏覽器放置一樣的形象標誌，就應使用瀏覽器兼容性解決方案，過程以下

瀏覽器兼容性解決方案

一樣在全部的瀏覽器，下面的例子會顯示的圖像標記：

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

值	描述
URL	圖像的路徑。
none	默認。無圖形被顯示。
inherit	規定應該從父元素繼承 list-style-image 屬性的值。

列表中列表項目標記的位置

CSS list-style-position 屬性

值	描述
inside	列表項目標記放置在文本之內，且環繞文本根據標記對齊。
outside	默認值。保持標記位於文本的左側。列表項目標記放置在文本之外，且環繞文本不根據標記對齊。
inherit	規定應該從父元素繼承 list-style-position 屬性的值。

列表 -縮寫屬性

在單個屬性中能夠指定全部的列表屬性。這就是所謂的縮寫屬性。

爲列表使用縮寫屬性，列表樣式屬性設置以下：
```
ul
{
list-style: square url("sqpurple.gif");
}
```
若是使用縮寫屬性值的順序是：
- list-style-type
- list-style-position (有關說明，請參見下面的CSS屬性表)
- list-style-image
若是上述值丟失一個，其他仍在指定的順序，就不要緊。

三.CSS Table(表格)

使用CSS能夠大大提升HTML表格的外觀

1.表格邊框

table, th, td 
{ 
border: 1px solid black; 
}

請注意，在上面的例子中的表格有雙邊框。這是由於表和th/ td元素有獨立的邊界。

爲了顯示一個表的單個邊框，使用 border-collapse屬性。

2.摺疊邊框

border-collapse 屬性設置表格的邊框是否被摺疊成一個單一的邊框或隔開：

table 
{ 
border-collapse:collapse; 
} 
table,th, td 
{ 
border: 1px solid black; 
}

3.表格寬度和高度

Width和height屬性定義表格的寬度和高度。

下面的例子是設置100％的寬度，50像素的th元素的高度的表格：

table 
{ 
width:100%; 
} 
th 
{ 
height:50px; 
}

4.表格文字對齊

表格中的文本對齊和垂直對齊屬性。

text-align屬性設置水平對齊方式，像左，右，或中心：

td 
{ 
text-align:right; 
}

垂直對齊屬性設置垂直對齊，好比頂部，底部或中間：

5.表格填充

若是在表的內容中控制空格之間的邊框，應使用td和th元素的填充屬性：

td 
{ 
padding:15px; 
}

6.表格顏色

下面的例子指定邊框的顏色，和th元素的文本和背景顏色：

table, td, th 
{ 
border:1px solid green; 
} 
th 
{ 
background-color:green; 
color:white; 
}

四.盒子模型

CSS 盒子模型(Box Model)

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

不一樣部分的說明：

Margin（外邊距） - 清除邊框區域。Margin沒有背景顏色，它是徹底透明
Border（邊框） - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
Padding（內邊距） - 清除內容周圍的區域。會受到框中填充的背景顏色影響
Content（內容） - 盒子的內容，顯示文本和圖像

爲了在全部瀏覽器中的元素的寬度和高度設置正確的話，你須要知道的盒模型是如何工做的。

提示：在盒模型中，外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距。

元素的寬度和高度

重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，徹底大小的元素，你還必須添加填充，邊框和邊距。.

下面的例子中的元素的總寬度爲300px：

width:250px;        
padding:10px;        
border:5px solid gray;        
margin:10px;

讓咱們本身算算：
250px (寬)
+ 20px (左 + 右填充)
+ 10px (左 + 右邊框)
+ 20px (左 + 右邊距)
= 300px

試想一下，你只有250像素的空間。讓咱們設置總寬度爲250像素的元素：

width:220px; 
padding:10px; 
border:5px solid gray; 
margin:0px;

最終元素的總寬度計算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

瀏覽器的兼容性問題

一旦爲頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現倒是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用本身的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。可是目前最好的解決方案是迴避這個問題。也就是，不要給元素添加具備指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持填充的寬度和邊框的寬度屬性設。

解決IE8及更早版本不兼容問題能夠在HTML頁面聲明 <!DOCTYPE html>便可。

詳見：https://www.w3cschool.cn/css_series/css_series-6tza24q1.html

五.CSS Border(邊框)

CSS 邊框 (border) 能夠是圍繞元素內容和內邊距的一條或多條線，對於這些線條，您能夠自定義它們的樣式、寬度以及顏色。使用CSS邊框屬性，咱們能夠建立出比HTML中更加優秀的效果。

1.邊框樣式（ border-style）屬性指定要顯示什麼樣的邊界。

border-style 值:

none: 默認無邊框

dotted: 定義一個點線框

dashed: 定義一個虛線框

solid: 定義實線邊界

double: 定義兩個邊界。兩個邊界的寬度和border-width的值相同

groove: 定義3D溝槽邊界。效果取決於邊界的顏色值

ridge: 定義3D脊邊界。效果取決於邊界的顏色值

inset:定義一個3D的嵌入邊框。效果取決於邊界的顏色值

outset: 定義一個3D突出邊框。效果取決於邊界的顏色值

2.邊框寬度

您能夠經過 border-width 屬性爲邊框指定寬度。

爲邊框指定寬度有兩種方法：能夠指定長度值，好比 2px 或 0.1em；或者使用 3 個關鍵字之一，它們分別是 thin 、medium（默認值）和 thick。

注意：CSS 沒有定義 3 個關鍵字的具體寬度，因此一個用戶代理可能把 thin 、medium 和 thick 分別設置爲等於 5px、3px 和 2px，而另外一個用戶代理則分別設置爲 3px、2px 和 1px。

p.one 
{ 
border-style:solid; 
border-width:5px; 
} 
p.two 
{ 
border-style:solid; 
border-width:medium; 
}

3.邊框顏色

border-color屬性用於設置邊框的顏色，它一次能夠接受最多 4 個顏色值。能夠設置的顏色：

name - 指定顏色的名稱，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16進制值, 如 "#ff0000"

您還能夠設置邊框的顏色爲"transparent"。

注意： border-color單獨使用是不起做用的，必須得先使用border-style來設置邊框樣式。3.

4.邊框-單獨設置各邊

在CSS中，能夠指定不一樣的側面不一樣的邊框：

p 
{ 
border-top-style:dotted; 
border-right-style:solid; 
border-bottom-style:dotted; 
border-left-style:solid; 
}

border-style屬性能夠有1-4個值：

border-style:dotted solid double dashed;
- 上邊框是 dotted
- 右邊框是 solid
- 底邊框是 double
- 左邊框是 dashed
border-style:dotted solid double;
- 上邊框是 dotted
- 左、右邊框是 solid
- 底邊框是 double
border-style:dotted solid;
- 上、底邊框是 dotted
- 左、右邊框是 solid
border-style:dotted;
- 四面邊框是 dotted

上面的例子用了border-style。然而，它也能夠和border-width 、 border-color一塊兒使用。

5.透明邊框

CSS2 引入了邊框顏色值 transparent，這個值用於建立有寬度的不可見邊框。

透明樣式的定義以下：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
 border-color: transparent;
  }
a:hover {border-color: gray;}

利用 transparent，使用邊框就像是額外的內邊距同樣；此外還有一個好處，就是能在你須要的時候使其可見。這種透明邊框至關於內邊距，由於元素的背景會延伸到邊框區域（若是有可見背景的話）。

6.邊框-簡寫屬性

上面的例子用了不少屬性來設置邊框。

你也能夠在一個屬性中設置邊框。

你能夠在"border"屬性中設置：

border-width
border-style (required)
border-color
```
border:5px solid red;
```
六.CSS 輪廓（outline）屬性

輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。

輪廓（outline）屬性指定了樣式，顏色和外邊框的寬度。

輪廓（outline）屬性的位置讓它不像邊框那樣參與到文檔流中，所以輪廓出現或消失時不會影響文檔流，即不會致使文檔的從新顯示。

"CSS" 列中的數字表示哪一個CSS版本定義了該屬性(CSS1 或者CSS2)。

屬性	說明	值	CSS
outline	在一個聲明中設置全部的外邊框屬性	outline-color outline-style outline-width inherit	2
outline-color	設置外邊框的顏色	color-name hex-number rgb-number invert inherit	2
outline-style	設置外邊框的樣式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	設置外邊框的寬度	thin medium thick length inherit	2

七.CSS Margin(外邊距)

CSS Margin(外邊距)屬性定義元素周圍的空間。

CSS Margin屬性接受任何長度單位、百分數值甚至負值。

Margin

margin清除周圍的元素（外邊框）的區域。margin沒有背景顏色，是徹底透明的

margin能夠單獨改變元素的上，下，左，右邊距。也能夠一次改變全部的屬性。

可能的值

值	說明
auto	設置瀏覽器邊距。這樣作的結果會依賴於瀏覽器
length	定義一個固定的margin（使用像素，pt，em等）
%	定義一個使用百分比的邊距

Margin可使用負值，重疊的內容。

八.CSS Padding（填充）

CSS Padding（填充）

CSS Padding（填充）屬性定義元素邊框與元素內容之間的空間。

Padding（填充）

當元素的 Padding（填充）（內邊距）被清除時，所"釋放"的區域將會受到元素背景顏色的填充。

單獨使用填充屬性能夠改變上下左右的填充。縮寫填充屬性也可使用，一旦改變一切都改變。

可能的值

值	說明
length	定義一個固定的填充(像素, pt, em,等)
%	使用百分比值定義一個填充

提示：CSS padding 屬性可使用長度值或百分比值，但與 margin 屬性不一樣，它不容許使用負值。

內邊距的百分比數值

CSS padding 屬性的百分比數值是相對於其父元素的 width 計算的，若是改變了父元素的 width，則它們也會改變。

如下是將段落的內邊距設置爲父元素 width 的 20% 的示例：

p {padding: 20%;}

假設一個段落的父元素是 div 元素，那麼它的 padding 的 width 計算是根據 div 進行的：

<div style="width: 200px;"> 
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> 
</div>

注意：上下內邊距與左右內邊距一致，即上下內邊距的百分數會相對於父元素寬度設置，而不是相對於高度。

填充- 單邊內邊距屬性

在CSS中，它能夠指定不一樣的側面不一樣的填充：

padding-top:25px; 
padding-bottom:25px; 
padding-right:50px; 
padding-left:50px;

Padding屬性，能夠有一到四個值。

padding:25px 50px 75px 100px;

上填充爲25px
右填充爲50px
下填充爲75px
左填充爲100px

padding:25px 50px 75px;

上填充爲25px
左右填充爲50px
下填充爲75px

padding:25px 50px;

上下填充爲25px
左右填充爲50px

padding:25px;

全部的填充都是25px

九.CSS 分組和嵌套

CSS 分組和嵌套選擇器

CSS 分組能夠將具備相一樣式的選擇器進行分組，減小代碼量。

CSS 嵌套適用於選擇器內部的選擇器的樣式。

1.Grouping Selectors

在樣式表中有不少具備相一樣式的元素。

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

爲了儘可能減小代碼，你可使用分組選擇器。

每一個選擇器用逗號分隔.

在下面的例子中，咱們對以上代碼使用分組選擇器：

h1,h2,p 
{ 
color:green; 
}

提示：您能夠對任意多個選擇器進行分組，CSS 對此沒有任何限制。

2.嵌套選擇器

它可能適用於選擇器內部的選擇器的樣式。

在下面的例子，爲全部p元素指定一個樣式，爲全部元素指定一個class="marked"的樣式，並僅用於class="標記"，類內的p元素指定第三個樣式：

p 
{ 
color:blue; 
text-align:center; 
} 
.marked 
{ 
background-color:red; 
} 
.marked p 
{ 
color:white; 
}

十.CSS組合選擇符

CSS 組合選擇符

CSS 組合選擇符可讓你直觀的明白選擇器與選擇器之間的關係。

CSS 組合選擇符

組合選擇符說明了兩個選擇器直接的關係。

CSS組合選擇符包括各類簡單選擇符的組合方式。

在 CSS3 中包含了四種組合方式:

後代選取器(以空格分隔)
子元素選擇器(以大於號分隔）
相鄰兄弟選擇器（以加號分隔）
普通兄弟選擇器（以波浪號分隔）
1.後代選取器

後代選取器匹配全部指定元素的後代元素。

如下實例選取全部 <p> 元素插入到 <div> 元素中:
```
div p 
{ 
background-color:yellow; 
}
```
2.子元素選擇器

與後代選擇器相比，子元素選擇器（Child selectors）只能選擇做爲某元素子元素的元素。

如下實例選擇了<div>元素中全部直接子元素 <p> ：
實例
```
div>p 
{ 
background-color:yellow; 
}
```
3.相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另外一元素後的元素，且兩者有相同父元素。

若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，可使用相鄰兄弟選擇器（Adjacent sibling selector）。

如下實例選取了全部位於 <div> 元素後的第一個 <p> 元素:
```
div+p 
{ 
background-color:yellow; 
}
```
4.普通相鄰兄弟選擇器

普通兄弟選擇器選取全部指定元素的相鄰兄弟元素。

如下實例選取了全部 <div> 元素以後的全部相鄰兄弟元素 <p> :
```
div~p 
{ 
background-color:yellow; 
}
```

十一.CSS僞類

CSS 僞類(Pseudo-classes)

CSS僞類是用來添加一些選擇器的特殊效果。

因爲狀態的變化是非靜態的，因此元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此能夠看出，它的功能和class有些相似，但它是基於文檔以外的抽象，因此叫僞類。

僞類的語法：

selector:pseudo-class {property:value;}

CSS類也可使用僞類：

selector.class:pseudo-class {property:value;}

anchor僞類

在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以以不一樣的方式顯示

a:link {color:#FF0000;} /* 未訪問的連接 */ 
a:visited {color:#00FF00;} /* 已訪問的連接 */ 
a:hover {color:#FF00FF;} /* 鼠標劃過連接 */ 
a:active {color:#0000FF;} /* 已選中的連接 */

注意： 在CSS定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。

注意： 在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

注意：僞類的名稱不區分大小寫。

僞類和CSS類

僞類能夠與 CSS 類配合使用：

a.red:visited {color:#FF0000;}       
<a class="red" href="css-syntax.html">CSS Syntax</a>

CSS - :first - child僞類

您可使用 :first-child 僞類來選擇元素的第一個子元素

注意：在IE8的以前版本必須聲明<!DOCTYPE> ，這樣 :first-child 才能生效。

匹配第一個 <p> 元素

在下面的例子中，選擇器匹配做爲任何元素的第一個子元素的 <p> 元素：

<html> 
<head> 
<style> 
p:first-child 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a strong man.</p> 
<p>I am a strong man.</p> 
</body> 
</html>

匹配全部<p> 元素中的第一個 <i> 元素

在下面的例子中，選擇相匹配的全部<p>元素的第一個 <i>元素：

<html> 
<head> 
<style> 
p > i:first-child 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
</body> 
</html>

匹配全部做爲第一個子元素的<p> 元素中的全部 <i> 元素

在下面的例子中，選擇器匹配全部做爲元素的第一個子元素的<p> 元素中的全部 <i> 元素：

<html> 
<head> 
<style> 
p:first-child i 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> 
</body> 
</html>

CSS - :lang 僞類

:lang 僞類使你有能力爲不一樣的語言定義特殊的規則

注意：IE8必須聲明<!DOCTYPE>才能支持;lang僞類。

在下面的例子中，:lang 類爲屬性值爲 no 的q元素定義引號的類型：

<html> 
<head> 
<style> 
q:lang(no) {quotes: "~" "~";} 
</style> 
</head> 

<body> 
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> 
</body> 
</html>

全部CSS僞類/元素

選擇器	示例	示例說明
:link	a:link	選擇全部未訪問連接
:visited	a:visited	選擇全部訪問過的連接
:active	a:active	選擇正在活動連接
:hover	a:hover	把鼠標放在連接上的狀態
:focus	input:focus	選擇元素輸入後具備焦點
:first-letter	p:first-letter	選擇每一個<p> 元素的第一個字母
:first-line	p:first-line	選擇每一個<p> 元素的第一行
:first-child	p:first-child	選擇器匹配屬於任意元素的第一個子元素的 <]p> 元素
:before	p:before	在每一個<p>元素以前插入內容
:after	p:after	在每一個<p>元素以後插入內容
:lang(language)	p:lang(it)	爲<p>元素的lang屬性選擇一個開始值

擴展閱讀

CSS拾遺系列：淺談CSS中的僞元素和僞類

十二.CSS 僞元素

CSS 僞元素

CSS僞元素是用來添加一些選擇器的特殊效果。

CSS僞元素控制的內容和元素是沒有差異的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此稱爲僞元素。

僞元素的語法：
 selector:pseudo-element {property:value;}
CSS類也可使用僞元素：
 selector.class:pseudo-element {property:value;}

1.:first-line 僞元素

"first-line" 僞元素用於向文本的首行設置特殊樣式。

在下面的例子中，瀏覽器會根據 "first-line" 僞元素中的樣式對 p 元素的第一行文本進行格式化：

p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}

注意："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" 僞元素用於向文本的首字母設置特殊樣式：

p:first-letter 
{
color:#ff0000;
font-size:xx-large;
}

注意： "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

提示：有關 first-letter 僞元素的相關描述，你能夠參考本站的CSS :first-letter 僞元素一節。

僞元素和CSS類

僞元素能夠結合CSS類：

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

上面的例子會使全部 class 爲 article 的段落的首字母變爲紅色。

Multiple Pseudo-elements

能夠結合多個僞元素來使用。

在下面的例子中，段落的第一個字母將顯示爲紅色，其字體大小爲 xx-large。第一行中的其他文本將爲藍色，並以小型大寫字母顯示。

段落中的其他文本將以默認字體大小和顏色來顯示：

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line 
{
color:#0000ff;
font-variant:small-caps;
}

CSS - :before 僞元素

":before" 僞元素能夠在元素的內容前面插入新內容。

下面的例子在每一個 <h1>元素前面插入一幅圖片：

h1:before 
{
content:url(smiley.gif);
}

CSS - :after 僞元素

":after" 僞元素能夠在元素的內容以後插入新內容。

下面的例子在每一個 <h1> 元素後面插入一幅圖片：

h1:after
{
content:url(smiley.gif);
}

全部CSS僞類/元素

選擇器	示例	示例說明
:link	a:link	選擇全部未訪問連接
:visited	a:visited	選擇全部訪問過的連接
:active	a:active	選擇正在活動連接
:hover	a:hover	把鼠標放在連接上的狀態
:focus	input:focus	選擇元素輸入後具備焦點
:first-letter	p:first-letter	選擇每一個<p> 元素的第一個字母
:first-line	p:first-line	選擇每一個<p> 元素的第一行
:first-child	p:first-child	選擇器匹配屬於任意元素的第一個子元素的 <]p> 元素
:before	p:before	在每一個<p>元素以前插入內容
:after	p:after	在每一個<p>元素以後插入內容
:lang(language)	p:lang(it)	爲<p>元素的lang屬性選擇一個開始值

十三.導航欄

導航欄

熟練使用導航欄，對於任何網站都很是重要。

使用CSS你能夠轉換成好看的導航欄而不是枯燥的HTML菜單。

導航欄=連接列表

做爲標準的HTML基礎一個導航欄是必須的。

在咱們的例子中咱們將創建一個標準的HTML列表導航欄。

導航條基本上是一個連接列表，因此使用 <ul> 和 <li> 元素很是有意義：

<ul> 
<li><a href="default.asp">Home</a></li> 
<li><a href="news.asp">News</a></li> 
<li><a href="contact.asp">Contact</a></li> 
<li><a href="about.asp">About</a></li> 
</ul>

從列表中刪除邊距和填充：

ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
}

例子解析：

list-style-type:none - 移除列表前小標誌。一個導航欄並不須要列表標記
移除瀏覽器的默認設置將邊距和填充設置爲0

上面的例子中的代碼是垂直和水平導航欄使用的標準代碼。

垂直導航欄

上面的代碼，咱們只須要元素的樣式，創建一個垂直的導航欄：

a 
{ 
display:block; 
width:60px; 
}

示例說明：

display:block - 顯示塊元素的連接，讓總體變爲可點擊連接區域（不僅是文本），它容許咱們指定寬度
width:60px - 塊元素默認狀況下是最大寬度。咱們要指定一個60像素的寬度

提示：查看徹底樣式的垂直導航欄的示例.

注意： 請務必指定元素在垂直導航欄的的寬度。若是省略寬度，IE6可能產生意想不到的效果。

水平導航欄

有兩種方法建立橫向導航欄。使用內聯或浮動的列表項。

這兩種方法都很好，但若是你想連接到具備相同的大小，你必須使用浮動的方法。

內嵌列表項

創建一個橫向導航欄的方法之一是指定

元素，上述代碼是標準的內嵌:

li 
{ 
display:inline; 
}

實例解析：

display:inline - 默認狀況下，<li>元素是塊元素。在這裏，咱們刪除換行符以前和以後每一個列表項，以顯示一行。

提示: 查看徹底樣式的水平導航欄的示例.

浮動列表項

在上面的例子中連接有不一樣的寬度。

對於全部的連接寬度相等，浮動

元素，並指定爲元素的寬度：

li 
{ 
float:left; 
} 
a 
{ 
display:block; 
width:60px; 
}

實例解析：

float:left - 使用浮動塊元素的幻燈片彼此相鄰
display:block - 顯示塊元素的連接，讓總體變爲可點擊連接區域（不僅是文本），它容許咱們指定寬度
width:60px - 塊元素默認狀況下是最大寬度。咱們要指定一個60像素的寬度
display:inline; -默認狀況下，
元素是塊元素。在這裏，咱們刪除換行符以前和以後每一個列表項，以顯示一行。

Tip:查看徹底樣式的橫向導航欄的示例..

十四.CSS 下拉菜單

CSS 下拉菜單

使用 CSS 建立一個鼠標移動上去後顯示下拉菜單的效果。

基本下拉菜單

當鼠標移動到指定元素上時，會出現下拉菜單。

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

實例解析

HTML 部分：

咱們可使用任何的 HTML元素來打開下拉菜單，如：<span>, 或 a <button> 元素。

使用容器元素 (如： <div>) 來建立下拉菜單的內容，並放在任何你想放的位置上。

使用 <div> 元素來包裹這些元素，並使用 CSS 來設置下拉內容的樣式。

CSS 部分：

.dropdown 類使用 position:relative, 這將設置下拉菜單的內容放置在下拉按鈕 (使用 position:absolute) 的右下角位置。

.dropdown-content 類中是實際的下拉菜單。默認是隱藏的，在鼠標移動到指定元素後會顯示。注意 min-width 的值設置爲 160px。你能夠隨意修改它。 注意: 若是你想設置下拉內容與下拉按鈕的寬度一致，可設置 width 爲 100% ( overflow:auto 設置能夠在小尺寸屏幕上滾動)。

咱們使用 box-shadow 屬性讓下拉菜單看起來像一個"卡片"。

:hover 選擇器用於在用戶將鼠標移動到下拉按鈕上時顯示下拉菜單。

下拉菜單

建立下拉菜單，並容許用戶選取列表中的某一項：

這個實例相似前面的實例，當咱們在下拉列表中添加了連接，並設置了樣式：

<style>
/* 下拉按鈕樣式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 須要定位下拉內容 */
.dropdown {
    position: relative;
    display: inline-block;
}

/* 下拉內容 (默認隱藏) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜單的連接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠標移上去後修改下拉菜單連接顏色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠標移上去後顯示下拉菜單 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 當下拉內容顯示後修改下拉按鈕的背景顏色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜單</button>
  <div class="dropdown-content">
    <a href="#">W3Cschool教程 1</a>
    <a href="#">W3Cschool教程 2</a>
    <a href="#">W3Cschool教程 3</a>
  </div>
</div>

下拉內容對齊方式

float:left;

float:right;

若是你想設置右浮動的下拉菜單內容方向是從右到左，而不是從左到右，能夠添加如下代碼 `right: 0;`

.dropdown-content {
    right: 0;
}

十五.CSS圖片廓

圖片廊

如下是使用CSS建立圖片廊：

<html>
<head>
<style>
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

十六.圖片透明與不透明

實例1 - 建立一個透明圖像

CSS3中屬性的透明度是 opacity.

img
 {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
 }

IE9，Firefox，Chrome，Opera，和Safari瀏覽器使用透明度屬性能夠將圖像變的不透明。 Opacity屬性值從0.0 - 1.0。值越小，使得元素更加透明。

IE8和早期版本使用濾鏡：alpha（opacity= x）。 x能夠採起的值是從0 - 100。較低的值，使得元素更加透明。

提示：在本站的CSS參考手冊中對 CSS opacity 屬性有詳細介紹。

實例2 - 圖像的透明度 - 懸停效果

img
 {
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
 }
 img:hover
 {
 opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */
 }

第一個CSS塊是和例1中的代碼相似。此外，咱們還增長了當用戶將鼠標懸停在其中一個圖像上時發生什麼。在這種狀況下，當用戶將鼠標懸停在圖像上時，咱們但願圖片是清晰的。

此CSS是：opacity=1.

IE8和更早版本使用： filter:alpha(opacity=100).

當鼠標指針遠離圖像時，圖像將從新具備透明度。

實例3 - 透明的盒子中的文字

<html>
<head>
<style>
div.background  
{  
width:500px;  
height:250px;  
background:url(klematis.jpg) repeat; 
border:2px solid black;  
}
div.transbox  
{  
width:400px;  
height:180px;  
margin:30px 50px;  
background-color:#ffffff;  
border:1px solid black;  
opacity:0.6;  
filter:alpha(opacity=60); /* For IE8 and earlier */  
}
div.transbox p  
{  
margin:30px 40px;  
font-weight:bold;  
color:#000000;  
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

首先，咱們建立一個固定的高度和寬度的div元素，帶有一個背景圖片和邊框。而後咱們在第一個div內部建立一個較小的div元素。這個div也有一個固定的寬度，背景顏色，邊框 - 並且它是透明的。透明的div裏面，咱們在P元素內部添加一些文本。

十七.圖片拼合技術

CSS 圖像拼合技術

圖像拼合

圖像拼合就是單個圖像的集合。

有許多圖像的網頁可能須要很長的時間來加載和生成多個服務器的請求。

使用圖像拼合會下降服務器的請求數量，並節省帶寬。

圖像拼合 - 簡單實例

與其使用三個獨立的圖像，不如咱們使用這種單個圖像（"img_navsprites.gif"）：

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

實例解析：

<img class="home" src="img_trans.gif" /> -由於不能爲空,src屬性只定義了一個小的透明圖像。顯示的圖像將是咱們在CSS中指定的背景圖像
寬度：46px;高度：44px; - 定義咱們使用的那部分圖像
background:url(img_navsprites.gif) 0 0; - 定義背景圖像和它的位置（左0px，頂部0px）

這是使用圖像拼合最簡單的方法，如今咱們使用連接和懸停效果。

圖像拼合 - 建立一個導航列表

咱們想使用拼合圖像 ("img_navsprites.gif")，以建立一個導航列表。

咱們將使用一個HTML列表，由於它能夠連接，同時還支持背景圖像：

#navlist{
position:relative;
}
#navlist li{
margin:0;padding:0;
list-style:none;
position:absolute;top:0;
}
#navlist li, #navlist a{
height:44px;
display:block;
}

#home{l
eft:0px;width:46px;
}
#home{
background:url('img_navsprites.gif') 0 0;
}

#prev{
left:63px;width:43px;
}
#prev{
background:url('img_navsprites.gif') -47px 0;
}

#next{
left:129px;width:43px;
}
#next{
background:url('img_navsprites.gif') -91px 0;
}

實例解析：

#navlist{position:relative;} - 位置設置相對定位，讓裏面的絕對定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding設置爲0，列表樣式被刪除，全部列表項是絕對定位
#navlist li, #navlist a{height:44px;display:block;} - 全部圖像的高度是44px

如今開始每一個具體部分的定位和樣式：

#home{left:0px;width:46px;} - 定位到最左邊的方式，以及圖像的寬度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定義背景圖像和它的位置（左0px，頂部0px）
#prev{left:63px;width:43px;} - 左外邊距定位63px（＃home寬46px+項目之間的一些多餘的空間），寬度爲43px。
#prev{background:url('img_navsprites.gif') -47px 0;} - 定義背景圖像向右側定位47px（＃home寬46px+分隔線的1px）
#next{left:129px;width:43px;}- 左外邊距定位129px(#prev 63px + #prev寬是43px + 剩餘的空間), 寬度是43px.

#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定義背景圖像向右側定位91px（＃home 46px+1px的分割線+＃prev寬43px+1px的分隔線）

圖像拼合 - 懸停效果

如今，咱們但願咱們的導航列表中添加一個懸停效果。

:hover 選擇器用於鼠標懸停在元素上的顯示的效果

提示： :hover 選擇器能夠運用於全部元素。在本站CSS參考手冊的CSS:hover選擇器一節，你能夠更加了解該選擇器的用法。

咱們的新圖像 ("img_navsprites_hover.gif") 包含三個導航圖像和三幅圖像：

由於這是一個單一的圖像，而不是6個單獨的圖像文件，當用戶停留在圖像上不會有延遲加載。

咱們添加懸停效果只添加三行代碼：

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

實例解析：

因爲該列表項包含一個連接，咱們可使用：hover僞類
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 對於全部三個懸停圖像，咱們指定相同的背景位置，只是每一個再向下45px

十八.CSS媒體類型

CSS 媒體類型

媒體類型容許你指定文件將如何在不一樣媒體呈現。該文件能夠以不一樣的方式顯示在屏幕上，在紙張上，或聽覺瀏覽器等等。

媒體類型

某些 CSS 屬性僅僅被設計爲針對某些媒介。比方說 "voice-family" 屬性被設計爲針對聽覺用戶終端。其餘一些屬性可用於不一樣的媒體類型。例如，"font-size"屬性可用於屏幕和印刷媒體，但有不一樣的值。屏幕和紙上的文件不一樣，一般須要一個更大的字體，sans - serif字體比較適合在屏幕上閱讀，而serif字體更容易在紙上閱讀。

@media 規則

@media 規則容許在相一樣式表爲不一樣媒體設置不一樣的樣式。

在下面的例子告訴咱們瀏覽器屏幕上顯示一個14像素的Verdana字體樣式。可是若是頁面打印，將是10個像素的Times字體。請注意，font-weight在屏幕上和紙上設置爲粗體：

<html>
<head>
<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>
</head>

<body>
....
</body>
</html>

你能夠本身嘗試看看 ! 若是您使用的是Mozilla / Firefox或IE5+打印此頁，你會看到，"Media Types"將使用另外一種比其餘文本字體大小小點的字體顯示。

提示：有關 @media 規則的更多信息，請參考CSS參考手冊的CSS @media 查詢部分。

其餘媒體類型

注意：媒體類型名稱不區分大小寫。

媒體類型	描述
all	用於全部的媒體設備。
aural	用於語音和音頻合成器。
braille	用於盲人用點字法觸覺回饋設備。
embossed	用於分頁的盲人用點字法打印機。
handheld	用於小的手持的設備。
print	用於打印機。
projection	用於方案展現，好比幻燈片。
screen	用於電腦顯示器。
tty	用於使用固定密度字母柵格的媒體，好比電傳打字機和終端。
tv	用於電視機類型的設備。

擴展閱讀

CSS3教程：CSS3 多媒體查詢

十九.CSS 屬性選擇器

CSS 屬性選擇器

顧名思義，CSS 屬性選擇器就是指能夠根據元素的屬性以及屬性值來選擇元素。

具備特定屬性的HTML元素樣式

具備特定屬性的HTML元素樣式不只僅是class和id。

注意：IE7和IE8需聲明!DOCTYPE才支持屬性選擇器！IE6和更低的版本不支持屬性選擇器。

屬性選擇器

下面的例子是把包含標題（title）的全部元素變爲藍色：

[title] 
{ 
color:blue; 
}

屬性和值選擇器

下面的實例改變了標題title='w3cschool'元素的邊框樣式:

[title=w3cschool] 
{ 
border:5px solid green; 
}

屬性和值的選擇器 - 多值

下面是包含指定值的title屬性的元素樣式的例子，使用（~）分隔屬性和值:

[title~=hello] { color:blue; }

下面是包含指定值的lang屬性的元素樣式的例子，使用（|）分隔屬性和值:

[lang|=en] { color:blue; }

表單樣式

屬性選擇器樣式無需使用class或id的形式:

input[type="text"] 
{ 
width:150px; 
display:block; 
margin-bottom:10px; 
background-color:yellow; 
} 
input[type="button"] 
{ 
width:120px; 
margin-left:35px; 
display:block; 
}