常用的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

Posted by rs5257 at 痞客邦 PIXNET 留言(0) 引用(0) 人氣()