|
CSS小教室
此篇資料是一些常用的CSS基本屬性概述,
提供給對CSS不熟悉的設計人員參考運用。 |
|
在 CSS 中設定顏色 |
|
在 CSS 屬性值中，設定顏色有多種方法：
- 傳統HTML設定法 background-color:#FFFFAA
- RGB色盤表示法 background-color:rgb(255,255,200)
- 指定顏色名 background-color:pink
|
|
| |
|
特殊屬性 |
|
屬性 |
用途 |
可設定值 |
例子 |
|
display |
這個性質可設定整個元件顯示的方式。 |
none代表不顯示，且此元件不佔任何空間。block代表顯示，並視為區塊，前後緊臨的元件將換行顯示。inline代表顯示，但前後緊臨的元件會排在其左右，並不會換行。 |
display:none，此元件就被隱藏了！ |
|
visibility |
設定此元件要不要顯示，這個性質與display有相似之處，但不相同。 |
可用值有visible（顯示）、inherit（繼承）、hidden（隱藏，但仍佔有空間，此與display:none不同）。 |
如visibility:hidden，則可隱藏此元件。 |
|
!important |
這個屬性質可跨越層級的優先順序而優先使用。 |
有加入!important的屬性會優先使用。例如：color:red !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 |
此性質可設定區塊的高度。 |
|
| |
