一、一般定位(圖片、表格、文字等網頁元件之定位)
表1 一般定位方式常用的屬性
| 屬性名稱 | 屬性用途 | 設定值 | 備註 |
| position | 設定網頁元件之位置 | absolute | |
| width | 指定網頁元件之寬度 | width:50px | |
| height | 指定網頁元之高度 | height:50px | |
| left | 指定元件與邊界之距離 | left:50px | 輸入數值庂單位可以是px或pt |
| top | 指定元件與邊界之距離 | top:50px | 輸入數值庂單位可以是px或pt |
| overflow | 設定超出邊界顯示方式 | visible | |
| visibility | 設定是否顯示 | ||
二、圖層定位
壹、設定背景顏色
網頁背景配色及圖案之選用，關係著網頁整體之設計感。在CSS樣式表中也有屬性可以用來設定網頁背景及圖片。在CSS語法中，設定背景顏色之屬性為『background-color』屬性，相當於HTML語法中之『bgcolor』屬性，其輸入之語法如下所示：
body { background-color:設定值; }
【小提示：『background-color』屬性之設定值可以用顏色名稱(英文)、HEX碼及RGB碼來設定。】
圖1為利用CSS語法設定背景顏色(採用『內嵌宣告』之方式) 之範例，圖2為該範例以瀏覽器執行之結果。由圖1及圖2之內容可發現，：『background-color』屬性不僅只可用於網頁背景顏色之設定，亦可用於表格背景顏色之設定。
(CSS%C2%9E%C3%95-%C2%9A%C3%8CoOr%5B3%5D.jpg "利用CSS語法設定背景顏色")
圖1 利用CSS語法設定背景顏色(採用『內嵌宣告』之方式)
(CSS%C2%9E%C3%95-%C2%9A%C3%8CoOr2%5B4%5D.jpg "利用CSS語法設定背景顏色2")
圖2 以圖1之內容製作之網頁內容(以瀏覽器執行之結果)
貳、設定背景圖案
表1 設定背景圖案之屬性一覽表
| 屬性 | 屬性用途 | 設定值 | 備註 |
| background-image | 設定背景圖案 | url(圖檔相對路徑) | url(images/background.jpg) |
| background-repeat | 設定是否重複顯示背景圖案 | 1.repeat | url(images/background.jpg) |
| background-attachment | 設定背景圖案是否隨網頁捲軸捲動 | 1.fixed(固定) | url(images/background.jpg) |
| background-position | 背景圖案位置 | 1.x% y% | url(images/background.jpg) |
| background | 綜合應用 | 可以設定好所有背景圖案之屬性。 | url(images/background.jpg) |
一、<background-image>屬性
圖3 <background-image>屬性之輸入語法(採用『內嵌宣告』之方式)
圖4 以圖3之內容製作之網頁內容(以瀏覽器執行之結果)
二、<background-repeat>屬性
<background-repeat>屬性之設定值共有以下四種，詳細說明如下：
- repeat：預設值，重複並排顯示，即填滿整個背景或儲存格，示如圖4。
- repeat-x：x軸方向(水平方向)重複顯示，示如圖6。
- repeat-y：y軸方向(垂直方向)重複顯示。
- no-repeat：不重複顯示。
圖5 <background-repeat>屬性之輸入語法
圖6 以圖5之內容製作之網頁內容(以瀏覽器執行之結果)
三、<background-attachment>屬性
四、<background-position>屬性
<background-position>屬性之設定值必須有兩個數值，分別為x軸與y軸之數值，而其輸入之數值可以是座標數值(例如輸入x軸與y軸之座標：20px 50px)或直接輸入位置(例如center right)。其輸入之語法如下：
<style type="text/css">body { background-position:20px 50px } </style>
或是<style type="text/css">body { background-position:20px 50% } </style>
圖7 <background-position>屬性之使用範例(採用『內嵌宣告』之方式)
圖8 以圖7之內容製作之網頁內容(以瀏覽器執行之結果)
五、<background>屬性
使用<background>屬性時，可以一次將背景圖片之屬性設定完成，其輸入語法如下：
<style type="text/css">body { background：url(images/open.jpg) repeat-x fixed 100% 100%; } </style>
【小提示：在設定<background>屬性之設定值時，各個設定值沒有前後順序，只要以空格分開就可以了。】
壹、文字型式屬性
文字樣式不外乎文字顏色、字型、字體大小、文字特效等，雖然HTML本身有空制文字外觀的標記，不過文字之樣式選擇性較少；而CSS語法提供較多的文字樣式，可以較有彈性地調整網頁內容中之文字外觀。
常用之新字字型屬性示如下表：
表1 常用文字字型屬性一覽表
| 屬性 | 屬性用途 | 設定值 | 備註 |
| color | 設定字體顏色 | 1.顏色名稱(英文) | |
| font-family | 指定字型樣式 | 1.字型名稱(例如"標楷體"、"boardway") | |
| font-size | 設定字體大小 | 1.設定值+百比分(%) | |
| font-style | 設定文字呈現之型式 (普通、斜體) | 1.normal(普通) | |
| font-weight | 設定文字之粗細 (普通、粗體、超粗體及細體) | 1.normal(普通) |
一、<color>屬性
二、<font-family>屬性
三、<font-size>屬性
四、<font-style>屬性
五、<font-weight>屬性
貳、文字效果屬性
在編輯網頁內容時，可能會需要上標字、下標字(例如編輯數學公式、化學反應式或註解時)，或是為文字加上底線之類的效果，CSS也有提供類似的屬性。常用之文字效果屬性一覽表如下表所示：
表2 常用文字效果屬性一覽表
| 屬性 | 屬性用途 | 設定值 | 備註 |
| vertical-align | 重垂對齊 | 1.baseline(一般位置) | |
| text-decoration | 增加文字之底線、上方線、刪除線 | 1.none | |
| text-trasform | 轉換字母大小寫 | 1.none |
一、<vertical-align>屬性
二、<text-decoration>屬性
三、<text-trasform>屬性
利用HTML標記(如<h1>、<h2>或<font>等標記)做為選擇器(selector)，再利用『連結外部樣式檔』與『內嵌宣告』之方式(詳細介紹請詳網頁教學：如何用套用CSS樣式表)，就可以將HTML程式碼裡中之HTML標記都套用同一種樣式。但是如果希望樣式可以套用到不同之HTML標記，可以利用HTML標記(如<font>標記)的『class』屬性及『id』屬性來達到目的，即利用『.class屬性之設定值』或『#id屬性之設定值』來作為選擇器。【小提示：CSS樣式表係由選擇器(selector)與樣式規則(rules)所組成，示如圖1 ，詳細介紹請詳網頁教學：CSS之基本格式。】
圖1 CSS樣式表係由選擇器(selector)與樣式規則(rules)所組成
一、以『.class屬性之設定值』為選擇器
- 首先要在HTML標記裡加入『class』屬性。在此以<font>標記來說明，其輸入語法如下：
<font class="test1">
【小提示：『class』屬性之設定值是我們自己命名的，盡量不要使用HTML標記名稱作為『class』屬性之設定值，以免混淆。】 - 接著只要在CSS樣式表裡加入以『.class屬性之設定值』為選擇器之樣式規則。其輸入語法如下：
.test1{font-size:16px; color:#FFFFFF; font-weight:bold; }
圖2 以『.class屬性之設定值』為選擇器
圖3 以圖2內容所製作之網頁內容(以瀏覽器執行之結果)
二、以『.id屬性之設定值』為選擇器
- 首先要在HTML標記裡加入『id』屬性。在此以<font>標記來說明，其輸入語法如下：
<font id="test2">
【小提示：『id』屬性之設定值是我們自己命名的，盡量不要使用HTML標記名稱作為『id』屬性之設定值，以免混淆。】 - 接著只要在CSS樣式表裡加入以『#id屬性之設定值』為選擇器之樣式規則。其輸入語法如下：
#test2{font-size:16px; color:#FFFFFF; font-weight:bold; }
三、只在指定之HTML標記上套用CSS樣式表
當你設定了利用『.class屬性之設定值』或『#id屬性之設定值』來作為選擇器之CSS樣式，只要在欲套用之HTML標記中加入『class』屬性及『id』屬性，即可套用CSS樣式。如果你只希望在指定之HTML標記上套用CSS樣式，可以在『.class屬性之設定值』或『#id屬性之設定值』前加上指定之HTML標記名稱。其輸入語法如下所示：
font.class屬性之設定值{font-size:16px; color:#FFFFFF; font-weight:bold;}
font.test1{font-size:16px; color:#FFFFFF; font-weight:bold;}
及font#test2{font-size:16px; color:#FFFFFF; font-weight:bold;}
如何將網頁內容套用CSS樣式呢？一般來說有三種方式，包括『連結外部樣式檔』、『內嵌宣告』及『行內宣告』等三種。簡略說明如下：
- 第一種是『連結外部樣式檔』：這種方式就是將CSS樣式表儲存成獨立的檔案(*.CSS)，然後在網頁程式碼中以連結之方式宣告。以圖1之內容來看，先將CSS樣式表儲存成『test.css』之檔案，然後在網頁程式碼中以連結之方式宣告，其連結之語法如下：
連結外部樣式檔之語法：<link rel=stylesheet type="text/css" href="test.css">
圖1 在網頁程式碼中以連結之方式宣告CSS樣式表
- 第二種是『內嵌宣告』，就係將CSS樣式表放在放在HTML程式碼的標頭(<head>標記)區域，也就是指<head>與</head>標記裡。圖2之內容中，<style type="text/css">與</style>標記係用來宣告CSS樣式表，其中『type』屬性是用來通知瀏覽器(IE、FIREFOX)這個宣告係使用CSS樣式。『內嵌宣告』之好處係可以該網頁裡的CSS樣式統一管理，但僅能套用於設定之網頁本身，如果要讓網站裡所有網頁都要使用相同的樣式，就必須要一頁一頁設定，所以碰到網頁頁面很多之網站時，此種作法會讓後續維修很麻煩，所以檔你製作之網站其頁面很多時，可以考慮『連結外部樣式檔』之方式。
圖2 『內嵌宣告』，將CSS樣式表放在放在HTML程式碼的標頭(<head>標記)區域
圖3 以圖2之內容製作之網頁內容(以瀏覽器執行之結果)
- 第三種是『行內宣告』，在HTML標記裡利用『style』屬性宣告CSS語法，並寫明『樣式規則』。此種方法適用在網頁內容中僅有少數HMTL程式碼需要套用CSS樣式。其輸入之語法如下：
<h1 style="font-family:Broadway BT";border:1px #FF00FF solid;">The honesty is the policy！</h1>
圖4為『行內宣告』之範例。由圖4之內容可以看到，其HTML程式碼中有二個<h1>標記，第一個<h1>標記有使用到『style』屬性，『style』屬性係用來宣告CSS樣式表，所以在網頁內容之呈現上，就有二種不同的樣式(示如圖5)。利用此種型式套用CSS樣式表，只對該行之程式碼有效，所以當有許多HTML程式碼都需要套用CSS樣式表時，不僅費時，也會讓網頁之程式碼看起來非常複雜，並且增加日後進行維護作業之困難度。
圖4 『行內宣告』之輸入語法
圖5 以圖4內容製作之網頁內容(以瀏覽器執行之結果)
【小提示：CSS全名為「串接式樣式表」，而且有三種套用之方法，表示是可串接使用的。但如果套用之CSS樣式表之內容有重複『樣式規則』時，優先之順序為『行內宣告』-->『內嵌宣告』-->『連結外部樣式檔』。】
圖1是CSS樣式表之基本格式。CSS樣式表係由選擇器與樣式規則所組成。
圖1 CSS樣式表之基本格式(CSS樣式檔案名稱為test.css)
圖2 在網頁內容中套用CSS樣式文件(採用『連結外部樣式檔』之方式)
圖3 依據圖2內容製作之網頁內容(以瀏覽器瀏覽之結果)
一、選擇器(selector)
選擇器係指CSS樣式要套用的目標，套用之目標可以是HTML標記。由圖1之內容來看，<h2>標記就是一個HTML的標記，而在CSS樣式表中，<h2>就是一個選擇器，只要網頁之內容套用了圖1內容之CSS樣式表，網頁內容中所有<h2>標記皆會套用圖1內容之CSS樣式表之內容。
二、樣式規則(rule)
樣式規則係用大括號 { 與 } 括起來之部分，示如圖1。每一樣式規則係由屬性及設定值組成。由圖1之內容來看，<color>就是屬性，而『blue』就是設定質。此外，一個選擇器中可以設定多種不同的規則，各種不同規則間只要以分號(;)分隔就可以。舉例來說，在設定網頁內容中<h2>標記時，除了可設定文字之顏色外，亦可以設定字型(font-family)與字體粗細(font-weight)(示如圖1)。
三、加入註解
為了讓製作之CSS樣式表內容更容易閱讀，以方便之後網頁內容之維護，除了在撰寫CSS樣式表時將樣式規則(rule)分行撰寫，還可以在CSS樣式表內容中加入註解。圖1之內容中，是否可看到「/*文字大小*/」、「/*設定行高*/」等字串，這就是CSS樣式表加入註解之語法，/*與*/間之文件內容，在用瀏覽器瀏覽網頁時並不會顯示。
【小提示：還記得嗎？在HTML之語法裡，註解的輸入語法係將文字寫在<！--與-->之間。】
訂閱：
文章 (Atom)
