css基本使用

CSS 的選擇器

CSS 每一條樣式規則由三部分構成：
選擇器（selector）、屬性（properties）和屬性值（value)

選擇器（selector)也被稱爲選擇符，它不僅是 HTML 5 文檔中的元素標記，還能夠是類、ID或是元素的某種狀態。
根據 CSS 選擇器的用途能夠把選擇器分爲

標籤選擇器（標籤名） 
類選擇器（.類名）
ID選擇器（#ID）
全局選擇器（*）
組合選擇器
僞類選擇器

CSS中的屬性

顏色單位
1）名字顏色，如gray、blue等
2）RGB顏色，如 p{color: rgb(255,0,0)}
3）十六進制顏色，如 #FF0000
4) RGBA顏色，a爲不透明度，     如 p{color: rgb(255,0,0,0.8)}
5) HSL顏色：色相（Hue，0-360），飽和度（Saturation，取值0-100）和明度（Lightness，取值0-100），如 HSL(120, 80%, 80%) 
//rgb與rgba顏色都是用rgb(),只是參數不一樣。

長度單位
1）絕對單位：英寸in，釐米cm，毫米mm，磅pt（印刷標準，72磅爲1英寸）等
2）相對單位：
em，相對於當前對象內文本的字體尺寸，如 h1{font-size: 20pt}   h1{margin-left: 1em}
ex，一個字體的 x-height (一般是字體尺寸的一半)
px，像素 (計算機屏幕上的一個點)，最爲經常使用

超級連接屬性，經過僞類選擇器實現，包括：

a:link       定義a對象在未被訪問前的樣式
a:hover      定義a對象在鼠標懸停時的樣式
a:active     定義a對象被用戶激活時的樣式
a:visited    定義a對象在連接地址已被訪問過期的樣式

帶有提示信息的超級連接：經過Tips方式爲這個連接加上的介紹性信息。
能夠在代碼中添加一個描述標記title來達到這個效果。

設置超級連接的背景圖

超級連接裏還能夠添加圖片做爲背景圖，來增長超鏈接的顯示效果，一般使用background-image來實現。

設置超級連接的按鈕效果

按鈕效果就是，當鼠標指針移動到一個超級連接上的時候，超級連接的文字或圖片會有一種凹陷的效果。
利用CSS中的a:hover，當鼠標通過連接時，將鏈接向下、向右各移一個像素，就能夠達到這種效果

a:hover{
        color:#821818;
        padding:5px 8px 3px 12px;
        background-color:#e2c4c9;
        border-top:1px solid #717171;
        border-left:1px solid #717171;
        border-bottom:1px solid #EEEEEE;
        border-right:1px solid #EEEEEE;
}

使用CSS3美化鼠標特效

CSS3 中，鼠標的箭頭樣式能夠經過cursor屬性實現。

設置表格的樣式

設置表格邊框的樣式
在顯示錶格數據時，一般都帶有表格邊框，用來界定不一樣單元格的數據。
當table表格的描述標記 border 值大於0時，顯示邊框，若是 border 的值爲0，則不顯示邊框。
邊框顯示後，能夠使用CSS3的border-collapse屬性對邊框進行修飾。

在CSS中，能夠使用 border-width 屬性來設置表格邊框的寬度

設置表格邊框的顏色

在CSS中，一般使用 color 屬性來設置表格中的文本顏色，使用 background-color 屬性來設置表格的背景色。 若是爲了突出表格中的某一個單元格，還能夠使用 background-color 屬性來設置某一個單元格的顏色。