阿瑟 發表
這些值可以讓你的CSS設定出來的文字或者物件更漂亮喔！
這些值可以讓你的CSS設定出來的文字或者物件更漂亮喔！| CSS可使用長度單位 | ||
| 單位 | 單位說明 | 範例 |
| pt | Point，就像是Word裡面的Point一樣大小 | font-size:10pt |
| px | Pixels，依您螢幕解析度而決定大小 | font-size:10px |
| pc | Pica，6個Pica是一英吋 | font-size:10pc |
| mm | 公厘，用過尺...這個設定值完全不會因為其他設定而改變 | font-size:10mm |
| cm | 公分，不會因為使用者設定而改變 | font-size:10cm |
| % | 百分比，大部分是指所在位置寬度或者長度百分比 | font-size:10% |
| CSS可用顏色表示方式 | ||
| 表示方式 | 表示方式說明 | 範例 |
| #rrggbb | 可以用Windows色彩選擇工具找到 | color:#feefc7 |
| rgb(#,#,#) | 用數字來表示紅色藍色以及綠色的混合...也可以用Windows色彩選擇工具找 | color:rgb(135,255,124) |
| rgb(%,%,%) | 用百分比來代表紅色藍色以及綠色的強度來混合顏色 | color:rgb(70%,35%,41%) |
| 顏色名稱 | 用顏色的名稱來指定艷色 | color:brown |
| CSS可用背景值 | |||
| 名稱 | 說明 | 可能值 | 範例 |
| background | 背景 | 下面的背景設定值皆適用 | background:fixed |
| background-attachment | 背景圖性是否固定 | fixed, scroll | background-attachment:fixed |
| background-color | 背景顏色 | 任何顏色表示方法 | backgroun-color:yellow |
| background-position | 背景圖位置 | 水平 垂直 | background-position:135 159 |
| background-repeat | 背景是否重複 |
repeat(重複) repeat-x(水平重複) repeat-y(垂直重複) no-repeat(不重複) |
background-repeat:repeat |
| CSS可用屬性值 | |||
| 名稱 | 說明 | 可能值 | 範例 |
| visibility | 顯示或是隱藏 |
inherit(父元件決定) hidden(隱藏) visible(顯示) |
visibility:hidden |
| width | 寬度 |
auto(自動決定) 數字 |
width:135 |
| height | 高度 |
auto(自動決定) 數字 |
height:100 |
| z-index | Z軸高度(立體，是否在另一個元件之上) |
auto(自動決定) 數字 |
z-index:135 |
| CSS可用文字設定值 | |||
| 名稱 | 說明 | 可能值 | 範例 |
| font | 文字設定 |
以下所有皆可使用 |
font:arial |
| font-family | 字體 | 字體名稱 | font-family:arial |
| font-size | 字體大小 | 百分比或是數字(單位) | font-size:12px |
| font-style | 字型樣式 |
normal(普通) italic(斜體) oblique(斜體) |
font-style:italic |
| font-variant | 字型特別樣式 |
normal(普通) small-caps(大小英文字母) |
font-variant:small-caps |
| font-weight | 字型粗細 |
normal(普通) bold(粗體) bolder(超粗體) lighter(細體) 數字(預設值為400) |
font-weight:bolder |
| letter-spacing | 字元相距 |
normal(普通) 數字(預設為0) |
letter-spacing:5 |
| text-align | 字元對齊 |
left(左邊) right(右邊) center(中間) justify(左右平分) |
text-align:justify |
| text-decoration | 字元樣式 |
none(普通) underline(加底線) blink(閃爍) line-through(加刪除線) overline(加頂線) |
text-decoration:underline |
| CSS可用表格設定值 | |||
| 名稱 | 說明 | 可能值 | 範例 |
| border | 表格邊框設定 |
以下所有皆可使用 |
border:green |
| border-color: | 邊框顏色 | 任何顏色表示方法 | border-color:blue |
| border-style | 邊框樣式 |
none(無邊框) dotted(點線) dashed(虛線) solid(實線) double(雙線) groove(立體凹線) ridge(立體凸線) inset(立體嵌入線) outset(立體隆起線) |
border-style:dotted |
| border-width | 邊框寬度 | 數字 | border-width:5 |
| padding | 邊框補白 | 數字 | padding:5 |
| CSS可用滑鼠游標設定值 | |||
| 名稱 | 說明 | 可能值 | 範例 |
| cursor | 游標圖示 |
auto(自動決定) default(預設值) crosshair(十字) hand(手形) move(移動時的游標) help(有問號的游標) text(文字編輯的游標) wait(忙碌中的游標) w-resize(向左箭頭) e-resize(向右箭頭) n-resize(向上箭頭) ne-resize{向右上箭頭) nw-resize(向左上箭頭) s-resize(向下箭頭) se-resize(向右下箭頭) sw-resize(向左下箭頭) |
cursor:hand |
上面的值要應用並不難，就只是加到您的CSS設定中而已。其實CSS就是這個樣子吧，其他的功能也都大同小異，如果您能夠將CSS妥善運用的話，您就應該可以很輕易地寫出自己喜歡的網頁了。
下一章節阿得將為您講解如何製作自己的排版設定檔案並且將這個檔案應用到多個網頁上，這樣更方便囉！如果您有任何的問題歡迎來信諮詢 阿得，我都會很樂意地為您服務。