蒐集：
自訂式樣教學 2011/04/13 20:47
CSS特殊屬性
|
特殊屬性
|
|
屬性
|
用途
|
可設定值
|
例子 |
|
display
|
這個性質可設定整個元件顯示的方式。
|
none代表不顯示，且此元件不佔任何空間。block代表顯示，並視為區塊，前後緊臨的元件將換行顯示。inline代表顯示，但前後緊臨的元件會排在其左右，並不會換行。
|
display:none，
此元件就被隱藏了！ |
|
visibility
|
設定此元件要不要顯示，這個性質與display有相似之處，但不相同。
|
可用值有visible（顯示）、inherit（繼承）、hidden（隱藏，但仍佔有空間，此與display:none不同）。
|
如visibility:hidden，則
可隱藏此元件。 |
|
!important
|
這個屬性質可跨越層級的優先順序而優先使用。
|
有加入!important的屬性會優先使用。
例如：color:red !important; 這時即使優先權較低，文字也會變成紅色。
註:IE6 及舊版 IE，處理 !important 時出現一點小問題。如果在同一個風格定義區塊中先宣告此行：如下
語法設定一 : 值一 !important;
之後相同的 "語法設定一" 又宣告一次，
語法設定一 : 值二;
這會導致第二個宣告蓋過第一個宣告。
| |
| |
|
背景屬性(background系)
|
|
屬性
|
用途
|
可設定值
|
例子 |
| background-color |
設定背景顏色
|
background-color:#FFCC99
|
| background-image |
指定背景圖
|
圖形位址 background-image:url(123.jpg)
|
| background-position |
決定背景圖的初始位置
|
決定背景圖的初始位置 含單位的長度值：background:position:5px
|
|
設定百分比，會依照元件大小算出設定值：background-position:10%
|
|
特徵字指定法：可用特徵字有︰top、center、bottom、left、center、right，其中前三個只能選其一，後三個也只能選其一：background-position:top right
|
| background-attachment |
決定當捲軸捲動時，圖要不要跟著捲動。
|
fixed、scroll
|
background-attachment:fixed |
| background-repeat |
決定背景圖形要不要重複顯示（一張接著一張縫合）
|
repeat、repeat-x、repeat-y、no-repeat
|
background-repeat:repeat-x |
| background |
這是一個集合，凡background-開頭的，都可用這個屬性一次設定完，只要在不同種類的值中間加一空白。
|
background:url(1.jpg) repeat fixed
| |
|
常用的字型屬性(font系)
|
|
屬性
|
用途
|
可設定值
|
例子 |
|
font-size
|
設定字型大小
|
設定值有很多種，列舉如下： font-size:11pt，直接設定字體大小為11點。 font-size:200%，用百分比來表示字體大小。 font-size:12px，直接設定字體大小為12像素。 font-size:xx-small、x-small、small、medium、large、x-large、xx-large等七種。
|
|
font-family
|
設定字體
|
可以設多於一個，只需以逗號隔開。排前面的會優先被使用。 可用的值分兩類： 第一類直接指定字體名稱 第二類指定字體家族，字體家族名稱常用的有︰Times、Helvetica、Western、Courier等。
|
font-family:Arial,Courier,Western
|
|
font-weight
|
決定字的粗細
|
100至900的數字，越大字越粗。 直接指定特徵值，如normal、bold、bolder、lighter
|
font-weight:700與font-weight:bold同義
|
|
font-style
|
決定字的特徵，如斜體、正體等
|
normal、italic、oblicque
|
font-style:normal
| |
| |
|
常用的段落屬性(文字text系)
|
|
屬性
|
用途
|
可設定值
|
例子 |
|
letter-spacing
|
設定字距，也就是字與字的間隔
|
含單位的長度值、normal（設為預設值）
|
letter-spacing:3px，則設定字距為3px。
|
|
line-height
|
設定列高
|
含單位的長度值、normal（設為預設值）或百分比均可。
|
line-height:3px，則設定列高為3px。
|
|
text-align
|
決定文句在區塊內的水平對齊方式
|
left、right、center、justify
|
text-align:center
|
|
text-indent
|
設定段落的首行縮排
|
含單位的長度值，或是百分比值。
|
text-indent:24px，則縮排24px。
|
|
text-justify
|
設定段落中各句如何調整，使段落左右之邊界對齊。
|
inter-word（利用調整字距） newspaper（利用調整字距或字母間距） distribute（與newspaper很像，但最適用於東亞）
distribute-all-lines（連最後一行也調整至同寬，一般不會用這個值） inter-ideograph（利用增加或減少字距來調整） auto（由瀏覽器語系決定）。
|
一般都用text-justify:auto。
|
|
text-transform
|
設定英文字母大小寫顯示法。
|
none（不自動轉換） capitalize（第一個字母自動轉為大寫） uppercase（全部自動轉換為大寫） lowercase（全部自動轉換為小寫）
|
text-transform:lowercase (全部英文字自動
轉為小寫)
|
|
text-decoration
|
設定此區塊內的字句要不要加線。
|
none（不加） underline（加底線）overline（加頂線）line-through（加刪除線）
|
text-decoration:underline
| |
| |
|
常用的邊框線屬性(border系)
|
|
屬性
|
用途
|
可設定值
|
例子 |
|
border-top-width
|
設定元件邊框之上邊的粗細。
|
可指定特徵字或數值。
特徵字有thin、medium、thick，其中medium為預設值，用法：border-width:thin。
數值用法：border-width:3px，當然我們也可以用不同的長度單位來指定它。
|
|
border-bottom-width
|
設定元件邊框之下邊的粗細。
|
|
border-left-width
|
設定元件邊框之左邊的粗細。
|
|
border-right-width
|
設定元件邊框之右邊的粗細。
|
|
border-width
|
通常設定框線粗細是用這一個性質，因為它可一次設定好四邊的框線。
|
|
border-top-color
|
這個性質是設定框線之上邊的顏色。
|
顏色設定值，如border-color:pink，則框線四邊都會是粉紅色。
|
|
border-bottom-color
|
這個性質是設定框線之下邊的顏色。
|
|
border-left-color
|
這個性質是設定框線之左邊的顏色。
|
|
border-right-color
|
這個性質是設定框線之右邊的顏色。
|
|
border-color
|
這個性質可一次設定框線之四邊的顏色，通常是用這一個屬性。
|
|
border-top-style
|
這個性質可設定邊框之上邊的框線樣式。
|
可用值有none、dotted、dashed、solid、double、groove、ridge、inset、outset等樣式，如border-style:solid，則設定上邊為實線框線。
|
|
border-bottom-style
|
這個性質可設定邊框之下邊的框線樣式。
|
|
border-left-style
|
這個性質可設定邊框之左邊的框線樣式。
|
|
border-right-style
|
這個性質可設定邊框之右邊的框線樣式。
|
|
border-style
|
這個性質可一次設定框線四邊的樣式，通常我們都是使用這個性質一次設定好四邊。
|
|
border-top
|
這是一個框線之上邊所有性質的集合。
|
如border:3px groove blue就一次設定好四邊的粗細、樣式、顏色。
|
|
border-bottom
|
這是一個框線之下邊所有性質的集合。
|
|
border-left
|
這是一個框線之左邊所有性質的集合。
|
|
border-right
|
這是一個框線之右邊所有性質的集合。
|
|
border
|
這是一個四邊框線性質的集合。一般來講，這是最常用的框線屬性值。
| |
| |
|
邊距屬性(padding系)與邊界屬性(margin系)
|
|
屬性
|
用途
|
可設定值
|
例子 |
|
padding-top
|
設定此區塊內部元件與區塊上邊界的間格距離。
|
含單位的長度值或百分比。
|
padding-top:3px，則內部元件與上邊界空3px。
|
|
padding-bottom
|
設定此區塊內部元件與區塊下邊界的間格距離。
|
|
padding-left
|
設定此區塊內部元件與區塊左邊界的間格距離。
|
|
padding-right
|
設定此區塊內部元件與區塊右邊界的間格距離。
|
|
padding
|
這個性質一次設定上、下、左、右邊界的間格距離。
|
使用時應依序指定上、右、下、左，如padding:3px 2px 5px 1px。亦可一次指定四邊，如padding:2px，則全部均設2px。
|
|
margin-top
|
設定此區塊之上邊界與區塊外之元件間格距離。
|
含單位的長度值或百分比。
|
margin-top:3px，則周圍元件與上邊界空3px。
|
|
margin-bottom
|
設定此區塊之下邊界與區塊外之元件間格距離。
|
|
margin-left
|
設定此區塊之左邊界與區塊外之元件間格距離。
|
|
margin-right
|
設定此區塊之右邊界與區塊外之元件間格距離。
|
|
margin
|
這個性質一次設定上、下、左、右邊界與區塊外之元件間格距離。
|
使用時應依序指定上、右、下、左，如margin:3px 2px 5px 1px。亦可一次指定四邊，如margin:2px，則全部均設2px。
| |
| |
|
CSS定位
|
|
屬性
|
用途
|
可設定值
|
例子 |
|
position
|
這個性質是設定元件的擺放方式。
|
可用的屬性值有︰absolute（絕對定位）、relative（相對定位）、 static（靜態定位）。
所謂position:absolute就是指元件定位法是以父元件（通常就是此網頁）的絕對座標來定位（原點為父元件左上角）。
而position:relative是指讓此元件以一般網頁排列方式決定位置後，再以此點為相對座標定位。
至於position:static是如同舊式瀏覽器般，以一般網頁排列方式決定位置，並且不能再加以定位。這個屬性設定將會影響座標系統的原點。
absolute原點為父元件左上角、relative原點為應有之自然位置、static不可用座標系統。通常用了這個屬性後，要配合top、left屬性來決定元件位置。
|
|
top
|
這個性質決定元件的垂直位置。
|
含單位的長度值。注意，可以指定負值！
|
如top=20px，則會依座標系統將此元件擺放在原點下方+20px的位置。
|
|
left
|
這個性質決定元件的水平位置。
|
|
width
|
此性質可設定區塊的寬度。
|
可用單位或百分比法來指定其值，或是用特徵字auto。
|
如width:30px或width:50%均是可行的方法，而width:auto代表讓瀏覽器幫你決定。
|
|
height
|
此性質可設定區塊的高度。
| |
| |
文章引用於:
http://help.web66.com.tw/web66/_file/1794/upload/designdesc/dd_css07.html
