一． CSS基本介紹
級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。例如，如果想讓連結字未點擊時是藍色的，當滑鼠移上去後字變成紅色的且有底線，這就是一種風格。透過設立樣式表，可以統一控制HTML中各標誌的顯示屬性。級聯樣式表可以使人更能有效控制網頁外觀。使用級聯樣式表，可以擴充精確指定網頁元素位置，外觀以及創建特殊效果的能力。
CSS是英文CascadingStyle Sheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或XML等檔案樣式的電腦語言。 CSS目前最新版本為CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的物件的位置排版進行像素級的精確控制，支援幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文字展示最優秀的表現設計語言。 CSS能夠根據不同使用者的理解能力，簡化或優化寫法，針對各類人群，有較強的易讀性。
二． CSS的使用方法
有三種方法可以在網站網頁上使用樣式表：
內嵌樣式- 在HTML元素中使用" style" 屬性
內部樣式表-在HTML文檔頭部<head> 區域使用<style> 元素 來包含CSS
#外部引用- 使用外部CSS 檔案
每種方法都有其優缺點：
當要在網站上所有或部分網頁上一致地應用相同樣式時，可使用外部引用樣式表。在一個或多個外部樣式表中定義樣式，並將它們連結到所有網頁，以便確保所有網頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表中修改一次，而該更改會反映到所有與該樣式表相連結的網頁上。通常外部樣式表以 .css 做為檔案副檔名，例如新聞發布系統中的公共樣式Common.css。然後在需要此樣式的頁面中將其連結進來，如：
<link href="/css/Common.css" rel="stylesheet" type="text/css"/ >
當人們只是要定義目前網頁的樣式，就可以使用內部樣式表。內部樣式表是一種級聯樣式表，「嵌」在網頁的 <HEAD>標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。 如：
<style type="text/css">
<!-- /* 把宣告的樣式包含在一個html註解中，這樣可以解決較老的瀏覽器不識別style的問題*/ -->
body {background:grey;}
</style>
#使用內嵌樣式以套用級聯樣式表屬性到網頁元素上。如：
<pstyle="@importurl('style3.css');">CSS document</p>
#<!-- 不能在style屬性中使用@import -->
如果網頁連結到外部樣式表，則為網頁所建立的內聯的或內部樣式將擴充或覆寫外部樣式表中的指定屬性。
要在網頁上使用外部樣式表的樣式，可將該網頁連結到樣式表，方法是使用位於 “格式” 選單上的 “樣式表連接” 指令。可以連結一個或數個樣式表到網頁視圖模式下的目前網頁，或到在資料夾清單中的所選網頁，或到網站上的全部網頁。
此「樣式」 方塊列出標準 HTML 標記符，例如標題 1，也有嵌入的樣式表或連結到網頁的外部樣式表中所包含的類別或 ID 選擇器。若要套用樣式至網頁元素，請選取該樣式然後按一下 “樣式” 方塊中的樣式或選取器。
在 Microsoft FrontPage 2000中，某些格式設定特性會作為內嵌樣式自動套用。例如∶如果使用「邊框與陰影」 指令（在「格式」 選單上）在普通段落周圍套用框，FrontPage 會寫下格式設定訊息，作為段落標記的內嵌樣式屬性（例如∶ <pstyle=" border-style: solid">）。然而某些屬性的應用需要使用 CSS，其他則需要使用 HTML 。如果人們只想使用 CSS 套用內嵌樣式，可使用 “樣式”按鈕（位於網頁元素的 “屬性” 對話方塊中）套用類別或 ID 選擇器或嵌入式樣式。
實例1
背景色屬性（background-color）定義一個元素的背景顏色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body style="background-color: green;">
<h2 style="background-color: red;">标题</h2>
<p style="background-color: blue;">内容</p>
</body>
</html>
實例2
使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 style="font-family:verdana;">文字的标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">下面是一句话。</p>
</body>
</html>
實例3
使用text-align（文字對齊）屬性指定文字的水平與垂直對齊方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
</body>
</html>
#
下一節