常用的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 | 背景顏色 | 顏色
transparent(透空) | backgroun-color:yellow | | background-image | 背景圖片 | none(無背景圖)
url(****)(圖片位置) | background-image:url(test.jpg) | | 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 | | position | 定位方式 | absolute
(絕對定位-依視窗座標，原點為父視窗左上角)
relative
(相對定位-以一般網頁排列[right.center.left]後再根據座標定位，原點為定位後的位置)
static
(靜態定位-以一般網頁排列) | position:absolute | | top(物件的position屬性須為absolute或relative) | 物件的Y座標(原點根據postion屬性有所不同) | 數字 | | | left(物件的position屬性須為absolute或relative) | 物件的X座標(原點根據postion屬性有所不同) | 數字 | | 【文字設定可用值】 | 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=normal 700=bold ) | font-weight:bolder | | letter-spacing | 字元相距 | normal(普通)
數字(預設為0) | letter-spacing:5 | | text-align | 字元對齊 | left(左邊)
right(右邊)
center(中間)
justify(左右平分) | text-align:justify | | text-decoration | 字元樣式 | none(普通)
underline(加底線)
no-underline(不加底線)
blink(閃爍)
no-blink(不閃爍)
line-through(加刪除線)
no-line-through(不加刪除線)
overline(加頂線)
no-overline(不加頂線) | text-decoration:underline | 【長度單位】 | 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 | 背景顏色 | 顏色
transparent(透空) | backgroun-color:yellow | | background-image | 背景圖片 | none(無背景圖)
url(****)(圖片位置) | background-image:url(test.jpg) | | 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 | | position | 定位方式 | absolute
(絕對定位-依視窗座標，原點為父視窗左上角)
relative
(相對定位-以一般網頁排列[right.center.left]後再根據座標定位，原點為定位後的位置)
static
(靜態定位-以一般網頁排列) | position:absolute | | top(物件的position屬性須為absolute或relative) | 物件的Y座標(原點根據postion屬性有所不同) | 數字 | | | left(物件的position屬性須為absolute或relative) | 物件的X座標(原點根據postion屬性有所不同) | 數字 | | 【文字設定可用值】 | 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=normal 700=bold ) | font-weight:bolder | | letter-spacing | 字元相距 | normal(普通)
數字(預設為0) | letter-spacing:5 | | text-align | 字元對齊 | left(左邊)
right(右邊)
center(中間)
justify(左右平分) | text-align:justify | | text-decoration | 字元樣式 | none(普通)
underline(加底線)
no-underline(不加底線)
blink(閃爍)
no-blink(不閃爍)
line-through(加刪除線)
no-line-through(不加刪除線)
overline(加頂線)
no-overline(不加頂線) | text-decoration:underline | |
rs5257 發表在 痞客邦 留言(0) 人氣()
留言列表
影片分享 (2)