14 CSS進階與DIV標籤介紹

一、CSS 樣式表
 二、樣式表範例 三、內部、外部樣式表
四、標籤參數 五、DIV標籤 六、版面設計+DIV+CSS
一、CSS 樣式表
CSS是由一些樣式集合而成的「樣式表」，就像WORD中的樣式概念一樣，只是WORD中的樣式是針對「文字、段落」所能設定的「文字大小、字型、顏色、間距、對齊...」等屬性來定義樣式。
而CSS能完成的：
一、 樣式可以套用於「部分文字<span>、<p>、<table>、<tr>、<td>、<div>...等」，來改變諸如文字的大小顏色間距、段落的縮排行距、表格框線網底背景圖案、儲存格的內距...等。
這類型的樣式，會以下面的方式出現於程式碼檔頭的部分，樣式名稱前方有 . ：
  .style1 {
font-size: 16px;
padding: 10px;
}
二、 可重新定義預設的標籤（如影像標籤<img>、超連結標籤<a>...）屬性，例如重新定義<img>標籤可以讓所有的圖片外觀改變（如四邊留10PX白邊）、或重新定義<a>標籤讓所有的超連結的顏色。
這類型的樣式定義，會以下面的方式出現於程式碼檔頭的部分：
  img {
padding: 10px;
background-color: #000000;
}
a:link {
color: #0000CC;
}
  這邊先提醒，的超連結的狀態有四種，為「link」「visited」「hover」「active」，各代表「一般」「造訪過」「滑鼠移上時」「作用中的」四種狀態，也各可以重新定義。
三、 因為上面「二」的樣式作用會影響整個頁面，因此，如果只有想針對頁面某個區域的預設標籤來修改（例如只想改變某一個表格裡面的超連結樣式），則
（做法1）可以將該區域（例如<table><div>）先來指定ID名稱(編號)，再進一步定義這些ID之下的預設標籤。如此一來，例如將ID命名(編號)為「A1」的表格，其表格內的超連結樣式將發生改變。
（做法2）對一般類別樣式(如下面的style1)，進階定義在其套用範圍內的預設標籤(如a:link、a:hover)，如此一來，例如只要套用style1類別的表格，其中的超連結就會改觀。
這類型的樣式定義，會以下面的方式出現於程式碼檔頭的部分，樣式名稱前方有 #ID編號名稱 或 類別名稱 ：
 

#A1 a:link { display: block; }
#A1 a:hover { background-color: #DFE8E2; display: block; }

.style1 a:link { display: block; }
.style1 a:hover { background-color: #DFE8E2; display: block; }
四、 CSS結合DIV標籤，可以使用在網頁文件的結構設計上（如固定網頁內容要放置的寬度、設定背景圖、頁面中不同層次的資料縮排...），如果再配合外部樣式檔，則可以統一多個頁面的外觀與設計。

超連結的CSS樣式設定需要依照順序「a:link 」「a:visited 」「a:hover 」「a:active」，而且最好四個樣式都設定。

二、樣式表範例
以下為使用CSS製作的頁面
三、內部、外部樣式表
四、標籤參數
以下詳細列舉了一些CSS標籤，可提供為需要時查閱:
五、DIV標籤
1、網頁的頁面常常因為功能、視覺設計，而需要分隔為不同的區塊，而DIV標籤可以方便地達到區塊分隔的需求。
2、結合CSS樣式來定義區塊的外觀，替不同目的的區塊，設計不同的外觀(例如長、寬、顏色、背景...等)。
3、DIV可以用巢狀的方式(層層相包)組合，例如【DIV.黃色背景的CSS類別】+【DIV.20像素縮排的CSS類別】，如此可以以相加的方式製作不同外觀、功能的DIV區塊。
4、使用CSS外部檔，更可以套用於每一個網頁，而且方便管理與修改、統一網站的風格。

DIV及所套用的CSS範例
.欄位間隔20PX {
padding: 20px;
}
.底圖字12大小紅色 {
font-size: 12px;
color: #990000;
background-image: url(../00_images_Scripts/bg1.gif);
}
左方儲存格放置了一個【DIV.欄位間隔20PX類別】 ，裡面又放了一個【DIV.底圖字12大小紅色】，
等於兩種效果加在一起。

練習

1、此壓縮檔中有三個基本文字頁面 ，依照前面所學先製作為如此範例（上為表格、下有Iframe）

2、再進階使用外部「共同的」CSS樣式檔、製作為如此範例。
六、版面設計+DIV+CSS
1、製作網站時，往往需要以一個版面設計，套用至多個頁面(數目甚至達數十個、數百個)。
2、依照之前的頁面設計方法，是以【切片+表格】來製作，散落在這些頁面中的每個表格，基本上都有各自的藍寬度、列高度、儲存格背景圖...等設定，如果一旦修改原始版面設計(例如寬度由960PX->900PX)，那麼勢必需要動用到所有的頁面...，非常的耗時。
3、使用DIV設計，可以用CSS規範DIV的寬度、底圖、或定位文字，而一旦使用外部CSS檔來定義這些規則，代表著若要更動數十個、數百個頁面的外觀時，只需要修改一個地方(CSS檔)即可!!!

以下範例的頁面(有多個頁面的互相連結、不同的高度，可視為網頁樣板)

以下範例頁面的說明(另開視窗，顯示此網頁模板的結構及說明)

以下範例頁面的資源下載(含PSD版面檔、CSS樣式檔)，可下載、解壓縮至本地資料夾

頁面有可能比較短
也有可能比較長，但是寬度維持一定，
而中間內容區的高度必須為【彈性】。
版面設計:切片區塊一 HEADER
版面設計:切片區塊二 CONTENT
版面設計:切片區塊三 FOOTER
i