margin-top 設定上邊界
margin-right 設定右邊界
margin-bottom 設定下邊界
margin-left 設定左邊界
margin 可同時設定四個邊界(margin:[上邊界] [右邊界] [下邊界] [左邊界])
== 設定邊框(border)的屬性
border-style(屬性值有solid-實線;dashed-虛線;double-雙線;dotted-點線;groove-凹線;ridge-凸線;inset-嵌入線;outset-浮出線)
border-width
border-color
border-top-, border-left-, border-bottom-, border-right- : -後可接 style, width 或 color 以設定單邊的屬性
border 同時設定四個邊框的屬性
== 設定留白(padding)的屬性
padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)
padding 同時設定四邊留白的屬性(padding:[上留白] [右留白] [下留白] [左留白])
== 設定背景(background)的屬性
background-color : 背景顏色
background-image ; 背景圖片
background-repeat : 設定背景圖片是否重覆, 預設 repeat(x 及 y方向均重覆), 其他值有 x-repeat(x-方向重複)、y-repeat(y-方向重複)及 no-repeat(不重複)
background-attachment : 指定背景圖案是否固定在螢幕上, 其值有 fixed(固定不動) 及 scroll (跟著移動)
background-position : 用來指定背景圖案的位置, 有兩個參數
第一個參數設定水平位置(x方向), 可為 left,center,right,百分比或px數值
第二個參數設定垂直位置(y方向), 可為 top,center,bottom,百分比或px數值
註:background-repeat值預設是重覆, 也就是以圖片填滿視窗, 此時 background-attachment 及 background-position 的屬性均無效
CSS3 以後還增加了調整圖片尺寸的屬性
background-size 或 -webkit-background-size(chrome 瀏覽器使用) 或 -moz-background-size(firefox 瀏覽器使用), 其參數是以寛和高兩個數值(100px 80px)或百分比(80% 40%)
EX:
background-size:50% 50%;
-moz-background-size:50% 50%;
-webkit-background-size:50% 50%;
color : 顏色屬性值的設定有三種方式
十六進位值, 如 {color:#XXXXXX;}
RGB 碼, 如 {color:rgb(X,Y,Z);}
顏色名稱, 如 {color:red;}
CSS3 以後顏色可用 rgba() 函數設定(增加透明度的值)
== 設定字體(font)的屬性
font-family
font-size
font-weight : 字的粗細度(可為100~900的數值或 bold(厚)、bolder(更厚)、及 normal(正常))
font-style
font-variant
== 設定 <A> 標籤 連接狀態的屬性
a:link : 設定當連接過去的網頁尚未被看過時，該連接的樣式。
a:visited : 設定當連接過去的網頁已經看過時，該連接的樣式。
a:hover : 設定當滑鼠蓋在連接上面時，該連接的樣式。
a:active : 設定當連接被點擊時，該連接的樣式。
== 設定清單(list)的屬性( <ul><li> 標籤的屬性)
list-style-type : 設定清單中每個項目前的標記符號, 其值有
none(沒有);disc(全黑圓圈);circle(空心圓圈);square(正方形)
或以upper-latin(大寫拉丁文);lower-latin(小寫拉丁文);upper-roman(大寫羅馬文);lower-roman(小寫羅馬文);upper-alpha(大寫希臘文);lower-alpha(小寫希臘文)等文字的數值編號
list-style-position : 設定標記符號是否為是文字的一部份(決定同一清單項目換行時是否有內縮的情形)
其屬性值有inside(是文字的一部份) 及 outside(否是文字的一部份), 預定值為 outside
list-style-image : 設定以特定圖案做為標記符號, 設定方式為 list-style-image:url([image_url]);
list-style : 直接以本項屬性設定前三項屬性, 如 list-style: url("circle.gif") none inside; 其三個參數沒有順序性
== 設定表格(table)的屬性
在 HTML 中 <table> 標籤內常有 border、cellpadding 及 cellspacing 等屬性, 這些屬性均可透過CSS方式直接設定
另一般常用的文字、字體、邊框、顏色 及 背景等屬也可在 table、th、tr 及 td 等選擇器內直接引用
== 與位置(position)相關的屬性
position : 用於設定元件放置位置的類型, 其值有
static(預設值): 表元素依預設位置擺放(設為 statics 時其 top、bottom、left 和 right 等屬性值均無效)
absolute: 表元素依 top、bottom、left 和 right 等設定值與區塊內的絕對位置擺放
relative: 表元素依 top、bottom、left 和 right 等設定值與區塊內預設位置的相對位置擺放
fixed:表元素依 top、bottom、left 和 right 等設定值在瀏覽器的絕對位置擺放
top, right, left, bottom : 設定四邊位置的擺放值, 其值可以是長度、百分比 或是 auto
overflow : 用於設定當內容放不下時的處理方式, 其值包含
visible : 內容完全呈現，不管放得下放不下。
hidden : 放不下的內容就不顯示出來。
scroll : 無論內容放得下放不下，都加入上下捲軸及左右捲軸的功能。
auto : 當內容放不下時，加上捲軸的功能。
z-index : 用於設定元素重疊時的順序(Z軸), z-index 值比較大的元素會被放在上面
== 與文字樣式相關的屬性
direction : 設定文字的方向, 其值包括 ltr(靠左向右排列) 及 rtl(靠右向左排列)
letter-spacing : 設定每個字與字的間隙
line-height : 設定兩行起點之間的距離(行高)
text-align : 設定文字對齊方式, 其值包括 left(靠左對齊), right(靠右對齊), center(置中), justify(左右對齊)
text-decoration : 設定文字的裝飾樣式, 其值包括 underline(下邊線), overline(上邊線), line-through(中間線), blink(閃爍)
text-indent : 設定每段第一行前段間所要保留的空間, 其設定值可為百分比或長度
text-transform : 設定文字大小寫的展現方式, 其值包括 capitalize(每個字的第一個字母都大寫, 其他字母不變), uppercase(所有字母都大寫), lowercase(所有字母都小寫), none(不改變)
word-spacing : 設定每個字與每個字之間的距離。
== 浮動(float)與清除(clear)的屬性
float : 用於設定文字在圖的左邊或右邊浮動的狀態, 其值包含left、right 和 none
clear : 當設定 float 屬性時可用 clear 來清除原 float 所設定的狀態
== 滑鼠游標圖案的屬性
cursor 屬性可用於設定滑鼠游標的圖案, 其設定值有 crosshair, pointer, text, move, wait, help, progress, not-allowed, no-drop, no-vertical-text, all-scroll, col-resize, row-resize, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize
另外也可以使用{cursor:url(圖案網址);語法自定游標圖案
沒有留言:
張貼留言