一個在大型網站常見的格式,就是將文字繞著一個圖案顯現。這是用 float (浮動) 這個屬性來達成的。
float 屬性有三個可能的值:left、right、和 none。來看看以下的例子:
例 1:若有以下的 CSS 宣告,
#leftfloat { |
一個在大型網站常見的格式,就是將文字繞著一個圖案顯現。這是用 float (浮動) 這個屬性來達成的。
float 屬性有三個可能的值:left、right、和 none。來看看以下的例子:
例 1:若有以下的 CSS 宣告,
#leftfloat { |
以下是幾個最常被用到與文字樣式有關的 CSS 屬性。
direction 屬性是用來設定文字的方向。可能的值為 'ltr' 及 'rtl'。
舉例來說,若 CSS 宣告是,
p { |
在 CSS 中常見的位置 (position) 屬性有以下幾種:
position 屬性制定出要用哪一類的位置。可能的值有:
在 HTML 中,常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。如果我們有透過 CSS 來制定表格的樣式,那就不需要在 HTML 之內用到這些屬性了。
table、th、tr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性,例如 文字、字體、邊框、顏色、以及 背景。
來看個例子。假設我們想要把以下的樣式加入表格內:
我們就會使用以下的樣式表:
在 CSS 中常見的清單 (list) 屬性有以下幾種:
list-style-type 屬性是用來設定在清單中,每一條之前的記號要用什麼。最常見的 list-style-type 設定值為:
連接的預設樣式是藍色,且有下劃線。可是,有的時候,我們會想要改變一下這個預設的樣式。這可以透過以下幾個選擇器來達成:
a:link: 設定當連接過去的網頁尚未被看過時,該連接的樣式。
a:visited: 設定當連接過去的網頁已經看過時,該連接的樣式。
a:hover: 設定當滑鼠蓋在連接上面時,該連接的樣式。
a:active: 設定當連接被點擊時,該連接的樣式。
在 CSS 中常見的字體 (font) 屬性有以下幾種:
font-family 屬性是用來設定字體的類別。
CSS 樣式 | 顯現結果 |
p {font-family: verdana;} |
color (顏色) 屬性能讓我們在 CSS 中設定一個元素的顏色。
這個屬性可以有以下三類的設定值:
color 屬性的語法如下:
十六進位值:
{color:#XXXXXX;}
在 CSS 中常見的背景 (background) 屬性有以下幾種:
background-color 屬性是用來指定背景的顏色。
CSS 樣式 | 顯現結果 |
p {background-color: 00FF00;} |
我們從盒子模式那一頁看到,留白 (padding) 是在內容外,邊框內的部分。一個盒子有四個邊,所以我們可以對這四個邊的留白逐一設定:
在 CSS 中常見的邊框 (border) 屬性有以下幾種:
border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值,以及每一個值顯現出來的結果。
CSS 樣式 | 顯現結果 |
p {border-style:solid;} |
實線 |
如我們在盒子模式那一頁看到的,邊界 (margin) 是在邊框之外,並且是用來設定各個元素之間的距離。一個盒子有四個邊,所以我們可以對這四個邊逐一設定:
盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣:
在盒子模式中,內容 (content) 是最內層的部分,接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。
相關的 CSS 指令為 margin、border、以及 padding。在下面的三頁我們會一一介紹。
在 CSS ,長度單位可以分為兩大類:絕對 (absolute) 單位以及相對 (relative) 單位。
相對單位包括:
絕對單位包括:
Div 這個標籤目的是將內容分為不同的區域,而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level container),這代表在 </div> 標籤後會換行。
舉例來說,如果我們有以下的 CSS 樣式:
.large { |
Class 的宣告法,是先放一個句點 (.),之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下:
.【Class 名稱】{
屬性:設定值;
...
}
舉例來說,如果我們有以下的樣式:
p { color: #00FF00; } strong { font-size:20px; } |
下面這行 HTML 碼,
<p>這是一個 <strong>繼承的例子。</strong></p> |
CSS 的全名為 Cascading Style Sheets。如果只有一個樣式表,那『串接』(cascade) 這個部分就不重要。若一個 HTML 文件中包含有多個樣式表,那串接這個概念就非常重要了。
串接是指當不同樣式表中對相同屬性有不同定義時,應該要用哪一個樣式表中的定義的規則。
最基本的規則是,越接近 HTML 本身的樣式越有優先權。因此,內行套用的樣式通常會有最高的優先權,因為它最接近 HTML 的元素。接下來的是嵌入套用的樣式表;這一類的樣式表是在 <head> 內宣告的。再下來是匯入套用的樣式表。若有多個樣式表被匯入,越後被匯入的越有優先權。優先權最低的是外部連接套用的樣式表。若有多個外部樣式表被連接,越後被匯入的越有優先權。
另外,每一個瀏覽器也都有自己的樣式表 (這就是為什麼超連接文字通常會是藍色,而且下面有一條線)。這一類的樣式表優先權比以上的幾種都低。
所以,從最高優先權到最低優先權的排名如下:
不同的媒體類別可以用不同的 CSS 樣式表。舉例來說,在螢幕上的文件可能適用某一個 CSS 樣式表,而同一份文件在被列印時,可以用一個不同的 CSS 樣式表。標出一個 CSS 樣式表媒體類別的語法如下:
外部連接套用
<link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">
嵌入套用
<style type="text/css" media="【媒體類別】">