HTML5權威指南筆記：24-其他css屬性和特性

1 設置元素的顏色和透明度

屬性	說明	值
color	設置元素的前景色	＜顏色＞
opacity	設置顏色的透明度	＜數值＞

例子：使用color屬性

color: rgba(255, 255, 255, 0.7);
color: red;

例子：使用opacity屬性

opacity: 0.4;

2 設置表格樣式

屬性	說明	值
border-collapse	設置相鄰單元格的邊框處理樣式	collapse separate
border-spacing	設置相鄰單元格邊框的間距	1~2個長度值
caption-side	設置表格標題的位置	top bottom
empty-cells	設置空單元格是否顯示邊框	hide show
table-layout	指定表格的佈局樣式	auto fixed

2.1 合井表格邊框

/*collapse值告訴瀏覽器不要爲相鄰元素繪製兩個邊框*/
border-collapse: collapse;

2.2 配置獨立邊框

/*先使用border-collapse設置爲separate*/
border-collapse: separate;
/*然後使用border-spacing爲邊框設置間距*/
border-spacing: 10px;

2.3 處理空單元格

/*
設置爲show會顯示空單元格邊框。
設置爲hide會隱藏空單元格邊框。
*/
empty-cells: hide;

2.4 設置標題的位置

/*
設置爲top標題在上部
設置爲bottom標題在下部
*/
caption-side: bottom;

2.5 指定表格佈局

/*
設置爲auto爲自動改變表格大小
設置爲fixed爲使用width指定表格大小
*/
table-layout: fixed;
width: 100%;

3 設置列表樣式

屬性	說明	值
list-style-type	指定列表中使用的標記的類型	參見3.1
list-style-image	指定圖像作爲列表標記	＜圖像＞
list-style-position	指定標記相對於列表項目盒子的位置	inside outside
list-style	設置所有列表特徵的簡寫屬性	見下面

list-style簡寫屬性的格式如下所示：

list-style: <list-style-type> <list-style-position> <list-style-image>

3.1 設置列表標記類型

list-style -type屬性的值：

值	說明
none	沒有標記
box check circle diamond disc dash square	使用指定形狀的標記，注意並不是所有的瀏覽器都支持每一種形狀
decimal	使用十進制數字作爲標記
binary	使用二進制數作爲標記
lower-alpha	使用小寫字母字符作爲標記
upper-alpha	使用大寫字母字符作爲標記

例子：

ol {
    list-style-type: lower-alpha;
}

3.2 使用圖像作爲列表標記

ul {
    list-style-image: url('圖片路徑');
}

3.3 設置列表標記的位置

list - style-position屬性指定標記相對於li元素內容框的位置。
inside值：定義標記位於內容框內部。
outside值：定義標記位於內容框外部。

例子：

li.inside { 
    list-style-position: inside;
}

4 設置光標樣式

cursor屬性的值：auto、crosshair 、default、help 、move 、pointer 、progress 、text 、wait 、n-resize 、s-resize 、e-resize、w-resize 、ne-resize 、nw-resize 、se-resize 、sw-resize。

例子：

#banana {
    cursor: progress;
}