css權威指南(13) 使用者介面樣式

2021-08-15 09:17:11 字數 2827 閱讀 9574

系統字型

css2定義了6個系統字型關鍵字,如下:

1.caption 由標題控制項使用的字型樣式,如按鈕和下拉控制項

2.icon 作業系統圖表標籤使用的字型樣式,如硬碟驅動器,資料夾和檔案圖示

3.menu 下拉列表和選單列表中文字使用的字型樣式

4.message-box 對話方塊中文字使用的字型樣式

5.small-caption 對話方塊中文字使用的字型樣式

6.status-bar 視窗狀態中文字使用的字型樣式

這些屬性只能適用於font屬性

body

系統顏色

如果你想重用使用者作業系統中指定的顏色,css2為此定義了一系列系統顏色關鍵字。只要能用color值的環境,就可以使用這些值。例如,下面宣告可以讓乙個元素的背景與使用者的桌面顏色一致:

body

可以如下為文件指定系統的預設文字顏色和背景顏色

body

游標 cursor

值:url | default | auto | crosshair | pointer | move | e-resize| nw-resize | ne-resize| n-resize| se-resize | sw-resize| s-resize| s-resize | w-resize | text | wait | help | url | inherit

1.url 需使用的自定義游標的 url。(請在此列表的末端始終定義一種普通的游標,以防沒有由 url 定義的可用游標。)

default 預設游標(通常是乙個箭頭)

auto 預設。瀏覽器設定的游標。

crosshair 游標呈現為十字線。

pointer 游標呈現為指示鏈結的指標(乙隻手)

move 此游標指示某物件可被移動。

e-resize 此游標指示矩形框的邊緣可被向右(東)移動。

ne-resize 此游標指示矩形框的邊緣可被向上及向右移動(北/東)。

nw-resize 此游標指示矩形框的邊緣可被向上及向左移動(北/西)。

n-resize 此游標指示矩形框的邊緣可被向上(北)移動。

se-resize 此游標指示矩形框的邊緣可被向下及向右移動(南/東)。

sw-resize 此游標指示矩形框的邊緣可被向下及向左移動(南/西)。

s-resize 此游標指示矩形框的邊緣可被向下移動(南)。

w-resize 此游標指示矩形框的邊緣可被向左移動(西)。

text 此游標指示文字。

wait 此游標指示程式正忙(通常是乙隻表或沙漏)。

help 此游標指示可用的幫助(通常是乙個問號或乙個氣球)

輪廓樣式 outline-style

值:none | dotted | dashed | double | groove |ridge | inset | outset | inherit

1.none 預設。定義無輪廓。

dotted 定義點狀的輪廓。

dashed 定義虛線輪廓。

solid 定義實線輪廓。

double 定義雙線輪廓。雙線的寬度等同於 outline-width 的值。

groove 定義 3d 凹槽輪廓。此效果取決於 outline-color 值。

ridge 定義 3d 凸槽輪廓。此效果取決於 outline-color 值。

inset 定義 3d 凹邊輪廓。此效果取決於 outline-color 值。

outset 定義 3d 凸邊輪廓。此效果取決於 outline-color 值。

inherit 規定應該從父元素繼承輪廓樣式的設定。

輪廓寬度 outline-width

值:thin | medium | thick | length | inherit

1.thin 規定細輪廓。

medium 預設。規定中等的輪廓。

thick 規定粗的輪廓。

length 允許您規定輪廓粗細的值。

inherit 規定應該從父元素繼承輪廓寬度的設定。

2.outline-width 屬性設定元素整個輪廓的寬度,只有當輪廓樣式不是 none 時,這個寬度才會起作用。如果樣式為 none,寬度實際上會重置為 0。不允許設定負長度值。

輪廓顏色 outline-color

值:color_name | hex_number | rgb_number | invert | inherit

1.color_name 規定顏色值為顏色名稱的輪廓顏色(比如 red)。

hex_number 規定顏色值為十六進製制值的輪廓顏色(比如 #ff0000)。

rgb_number 規定顏色值為 rgb **的輪廓顏色(比如 rgb(255,0,0))。

invert 預設。執行顏色反轉(逆向的顏色)。可使輪廓在不同的背景顏色中都是可見。

inherit 規定應該從父元素繼承輪廓顏色的設定。

彙總 outline

值:outline-color | outline-style | outline-width | inherit

1.outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

2.inherit 規定應該從父元素繼承 outline 屬性的設定。

css使用者介面樣式

css 滑鼠樣式cursor 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動 text 文字 輪廓 outline 是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。outline outlin...

css權威指南

第二章 選擇器 一 屬性選擇器 1 content 新增需要設定樣式的屬性,下面例子使用的是class屬性名,即帶有class屬性名的h1元素都設定顏色為sliver 2 根據具體屬性值改變樣式 這種格式必須與屬性值完全匹配。3 根據部分屬性值選擇,也就是部分匹配 p class warning w...

CSS之使用者介面樣式

所謂的介面樣式,就是更改一些使用者操作樣式,比如 更改使用者的滑鼠樣式,表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制,因此我們就放棄了。防止表單域拖拽 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動...