css|滑鼠
CSS滑鼠屬性
習慣於使用 Windows 的使用者對各種各樣的滑鼠樣式一定不會陌生，當滑鼠移動到不同的地方時，當滑鼠需要執行不同的功能時，當系統處於不同的狀態時，都會使滑鼠形狀發生改變。
雖然在網路上有各種各樣的滑鼠可供下載，圖形五花八門，但是就 Windows 的預設系統來說，這些圖形是固定不變的。改變滑鼠的屬性，簡單說就是當滑鼠移動到不同的元素對象上面時，讓滑鼠以不同的形狀、圖案顯示。這種樣式是通過改變“cursor”屬性來完成的。下面的表格把滑鼠的完部屬性都列出來，可供參考：
關鍵字的解釋和圖例
關鍵字 解釋
auto 滑鼠按照預設的狀態根據頁面上的元素自行改變樣式.
crosshair 精確定位“十”字。
default 預設指標
hand 手形
move 移動
e-resize 箭頭朝右方
ne-resize 箭頭朝右上方
nw-resize 箭頭朝左上方
n-resize 箭頭朝上方
se-resize 箭頭朝右下方
sw-resize 箭頭朝左下方
s-resize 箭頭朝下方
w-resize 箭頭朝左方
text 文本“I”形
wait 等待
help 協助
CSS分級屬性
使用過 Word 的使用者都知道有一個“項目符號和編號”的功能。在 HTML 文檔中，設計者無需使用前面提到的一些字型、顏色、容器屬性來格式化對象的字型、顏色、邊距和填充距等。因為在 CSS 中，已經提供了進行分級的專用分級屬性。需要注意的是，無論如何，這些屬性只能夠被用於“列項”值是“顯示”的元素。
display
屬性值：block | inline | list-item | none
初始值：block
適用於：所有元素
繼承：否
百分比值：不適用
這些屬性中的前三個屬性在 Internet Explorer 4 中並不支援。
如果是“block”，那麼在頁面上就會開啟一個新的“容器”，這個“容器”被定位在相對於鄰近的“容器”，並遵循 CSS 格式化模型的地方。當使用“block”作為屬性值時，在元素的前後都會出現一個斷行。如果是“list-item”它的效果與“block”的效果有一些相似，唯一不同的是其中加入的一個列項標記。如果使用“inline”作為“display”的屬性值，元素前後不會被加上斷行。如果是“none”那麼顧名思義，該元素就不會顯示出來。
list-style-type
屬性值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值：disc
適用於：“display”值是“list-item”的元素
繼承：是
百分比值：不適用
在列項的前面通常要為每一項加上項目符號或編號，以區分不同的列項。共有九個關鍵字可以描述“list-style-type”的符號或者編號，說明和圖例如下：
關鍵字 說明 圖例
disc 圓盤 l
circle 圓圈 m
square 方塊 n
decimal 十進位數 1、2、3、4、5、..........
lower-roman 小寫羅馬數字 i、ii、iii、iv、v、..........
upper-roman 大寫羅馬數字 I、II、III、IV、V、.........
lower-alpha 小寫字母 a、b、c、d、e、..........
upper-alpha 大寫字母 A、B、C、D、E、...........
none 不顯示項目符號和編號 無
list-style-image
屬性值：<url> | none
初始值：none
適用於：“display”值是“list-item”的元素
繼承：是
百分比值：不適用
在項目的前面，不但可以使用“list-style-type”加上項目符號和編號，還可以使用“list-style-image”來為項目加上圖片符號。當載入圖片時，不論是否定義了“list-style-type”屬性，瀏覽器都會使用圖片來代替項目符號或編號。
list-style-position
屬性值：inside | outside
初始值：outside
適用於：“display”值是“list-item”的元素
繼承：是
百分比值：不適用
“list-style-position”的值有兩個：“inside”或者是“outside”，其中“outside”值是預設的值。它們決定了列項中的第二行文字的起始位置。
CSS容器屬性
出於 CSS 精確定義網頁樣式的本意，在格式化頁面對象時， CSS 將所有的元素都放置在一個“容器”裡面，這個“容器”叫做 BOX。對於容器的格式化，CSS 提供了強大的支援，現在，首先瞭解一下與格式化“容器”有關的屬性。
“容器”的屬性共有以下的幾類：
l 邊距(margin)類的屬性設定了一個元素在四個方向上距離瀏覽器視窗邊界或上階項目的邊距。它用來控制一個元素在頁面上位置。
l 填充距(padding)類的屬性決定了究竟在邊框和內容之間應該插入多少空間的距離。
l 邊框(border)類的屬性定義了一個元素邊距的樣式。
l 剩下的一類中包括了寬度和高度屬性以及浮動和清除屬性。
margin-top
屬性值：<length> | <percentage> | <auto>
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
該屬性設定了一個元素頂端的邊距，這個邊距可以是相對於瀏覽器視窗邊框來說，也可以是相對於上階項目來說。比如：BODY{margin-top:0px} 就是將瀏覽器視窗中的內容緊貼視窗的上邊界。
注意：這個屬性可以是負值，但是，很遺憾的是 Netscape 4 不支援這個負的邊距值。
margin-right
屬性值：<length> | <percentage> | auto
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
該屬性設定了一個元素右側的邊距，這個邊距可以是相對於瀏覽器視窗邊框來說，也可以是相對於上階項目來說。
注意：這個屬性可以是負值。
margin-bottom
屬性值：<length> | <percentage> | auto
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
該元素設定了一個元素底部的邊距，這個邊距可以是相對於瀏覽器視窗邊框來說，也可以是相對於上階項目來說。
注意：這個屬性可以是負值。
margin-left
屬性值：<length> | <percentage> | auto
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
該元素設定了一個元素左側的邊距，這個邊距可以是相對於瀏覽器視窗邊框來說，也可以是相對於上階項目來說。具體以上四個屬性我們可以通過以下這個例子就會明白的。
<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
margin-top:0em;
margin-right:2em;
margin-bottom:3em;
margin-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p>
</body>
</HTML>
padding-top
屬性值：<length> | <percentage>
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
該屬性設定了一個元素的頂端填充距。它的屬性值可以使用長度值或者百分比值來指定。但它的值不能為負，如果指定了負值，那麼瀏覽器在執行時將把它變成所能支援的最接近的值：0
P{padding-top:15px}
padding-right
屬性值：<length> | <percentage>
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
該屬性設定了一個元素的右側填充距。它的屬性值可以使用長度值或者百分比值來指定，但是不能使用負值。
padding-bottom
屬性值：<length> | <percentage>
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
在動態頁面裡恰當地種用這些滑鼠有時可以起到意想不到的效果。例如，有一個連結的目標為協助檔案，於是可以使用協助形式的滑鼠。還有在一些需要使用滑鼠事件的頁面中，如果想告訴使用者哪裡可以點擊滑鼠，那麼只要在頁面上特定的位置讓滑鼠變成手形，使用者就會辨認出頁面上的即時區域。
該屬性設定了一個元素的底端填充距。它的屬性值可以使用長度值或者百分比值來指定，但是不能使用負值。
padding-left
屬性值：<length> | <percentage>
初始值：0
適用於：所有元素
繼承：否
百分比值：參考上階項目的寬度
該屬性設定了一個元素的底端填充距。
它的屬性值可以使用長度值或者百分比值來指定，但是不能使用負值。上面所介紹的四個屬性我們可以通過以下例子看出：
<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
padding-top:0em;
padding-right:2em;
padding-bottom:3em;
padding-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p>
</body>
</HTML>
border-top-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用於：所有元素
百分比值：不適用
繼承：否
該元素設定了元素頂端邊框的寬度，其屬性值可以使用關鍵字或數字來指定。關鍵字共有三個：其中thin表示為最細的邊框，thick表示為最粗，medium表示為中等寬度。
border-right-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用於：所有元素
百分比值：不適用
繼承：否
該元素設定了元素右邊邊框的寬度，其屬性值可以使用關鍵字或數字來指定。
border-bottom-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用於：所有元素
百分比值：不適用
繼承：否
該元素設定了元素底端邊框的寬度，其屬性值可以使用關鍵字或數字來指定。
border-left-width
屬性值：thin | medium | thick | <length>
初始值：“medium”
適用於：所有元素
百分比值：不適用
繼承：否
該元素設定了元素左邊邊框的寬度，其屬性值可以使用關鍵字或數字來指定。
border-color
屬性值：<color>{1,4}
初始值：“color”屬性的值
適用於：所有元素
繼承：否
百分比值：不適用
邊框顏色屬性可以設定元素四條邊框的顏色，當你給出四個顏色屬性值時，它們的表示順序為上，右，下，左。如果僅給出一個值，那麼四條邊框的顏色都一樣。如果給出兩個或三個值，那麼缺失邊的顏色將從對邊擷取。如果在指定邊框時沒有給出顏色值，那麼，邊框的顏色就等於該元素“color”屬性值的顏色。
border-style
屬性值：none | dotted | dashed | solid | double | groove | ridge | inset | outset
初始值：none
適用於：所有元素
繼承：否
百分比值：不適用
“border-style”決定了邊框的樣式。如果在邊框寬度時值為0，那麼這個屬性值就無效了。也就是說，這個屬性必須用於可見的邊框。
“border-style”屬性值共有九個關鍵字來描述，它們的名稱和定義如下：
關鍵字 解釋
none 不畫邊框，不論border-width的寬度是多少，邊框都不會顯示。
dotted 邊框的樣式為由點組成的虛線。
dash 邊框的樣式為由短線組成的虛線。
solid 邊框為實線。
double 邊框線為雙線。雙線再加上它們之間的空白部分的寬度就等於border-width寬度。
groove 3D溝槽狀的邊框。
ridge 3D脊狀的邊框。
inset 3D內嵌的邊框(顏色較深)
outset 3D外嵌的邊框(顏色較淺)
屬性值可以指定一個、兩個、三個或四個。如果僅給出一個屬性值，那麼所有的邊框都是這個樣式，如果給出四個值，它們分別作用於上、右、下、左四條邊框。如果僅給出兩個或三個值，那麼缺失邊的屬性值將從對邊擷取。
width
屬性值：<length> | <percentage> | auto
初始值：auto
適用於：區塊層級元素和可替換元素
繼承：否
百分比值：參考上階項目的寬度
所有的區塊層級元素和可替換元素都擁有 width(寬度) 屬性。寬度可以用長度值、百分比值來定義元素的寬度。
height
屬性值：<length> | auto
初始值：auto
適用於：區塊層級元素和可替換元素
繼承：否
所有的區塊層級元素和可替換元素都可以擁有 height 屬性。它的定義方式與 width 屬性是相似的。不過需要注意的是，height 屬性不能用百分比值來指定。如果把 height 和 width 結合起來使用就能夠很好地控制一個元素的高度和寬度值。在 height 和 width 都是“auto”的情況下，改變它們任何一個都可以相應地使圖片按比例縮放。
float
屬性值：left | right | none
初始值：none
適用於：所有元素
繼承：否
百分比值：不適用
使用 float 元素可以使文字環繞在一個元素的四周。當屬性值是 right 或 left 時，該元素就會相應地出現在右邊或邊，即：文字環繞於該元素的左邊或右邊。
clear
屬性值：none | left | right | both
初始值：none
適用於：所有元素
繼承：否
百分比值：不適用
這個屬性是與 float 有關的，它可以指定在一個元素的某一邊是否允許有環繞的文字（或其它對象）出現。如果指定屬性值是“right”，那麼該元素右側的所有空間都不會放進任何對象。如果屬性值是“none”，那麼該元素四周都有對象環繞，這也是預設的屬性值。
