自行設計主題風格

架構說明

Step by step

1. 首頁

2. 內頁框架

3. 首頁資料區

4. 右邊幅

檔案命名規則

CSS說明

完工檢查表

   重點說明◆首頁CSS ◆內頁框架CSS  |  ◆intro CSS  |  ◆edge CSS  |  進階用法(跨越版型限制)  |  CSS基本概述(參考)

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

此性質可設定區塊的高度。