什麼是CSS？

         CSS原文是 Cascading Style Sheet，中文直譯是『階層(Cascade)式的樣式(Style)表(Sheet)』，它是輔助HTML可以製作更豐富網頁格式的一種機制。它可以是直接插入HTML標籤內，有如屬性一樣使用的定義語句(style)；也可以在網頁一開始的HEAD區塊內定義一套格式，然後在網頁的任何地方需要用到時直接套用；也可以獨立為副檔名為CSS的檔案，讓網頁經過連結匯入使用。
        目前多數的網頁不論顏色、背景、字型、版面甚至滑鼠互動反應都十分精緻美麗，主要原因就是充分使用CSS的美化格式功能，光靠HTML語言有限的編排能力是做不到的！設計過網頁的人多半知道可以套用現有的版面套件，這些套件的主要內容就是一些CSS檔案了！
        事實上，現在我們使用任何網頁設計軟體時，改變任何圖文或表格物件的格式時，多半都是以CSS的方式加入到網頁的HTML原始碼之中，打開任何網頁的原始碼，你都會看到很多 "style" 這樣的字眼，那些就是CSS了！

CSS使用方式之一：直接加入HTML標籤

如上範例，直接在段落標籤的屬性位置加入style="..."就可以設定格式。上面三個段落<p>標籤分別定義字型大小(font-size)為20~60點，預設是使用像素點；第二段加上定義字型(font-family)與文字置中，第三段加入文字靠右且顏色為紅色，再用span標籤包覆第三段，定義背景為黃色，就顯示如上效果。span標籤是一個區段的意思，CSS最常使用這個標籤包覆需要改變格式的HTML內容。

請注意：CSS內的屬性名稱習慣用冒號 ":" 與屬性直相連，如 color: red，多個屬性之間則必須用分號 ";" 隔開！

CSS使用方式之二：寫在網頁的HEAD區塊

打開Visual Web Developer新增一個HTML網頁，隨便寫幾個字，選取文字之後將它置中，並設定背景為黃色，切到原始碼，並執行看看會變成這樣：

這是CSS的另一種執行方式，先在HEAD區塊內建立<style>標籤，標籤內可以建立好幾個所謂的class，每個class以『.』+名稱的方式命名，預設就用style1,2,3...。內容以大括號包覆，屬性寫法則與前面方式一樣。

這裡比較有趣的是套用CSS的方式，此地有兩種樣式，可以分別使用<p>與<span>標籤，最終都套用到網頁文字，呼叫的語法就不是前面的syle="..."了！而是 class="style1"等等。

練習：請試著在原始碼內再加入一行文字，譬如"你又是誰？"，然後套用CSS格式，也修改一下格式使用標楷體，或者換顏色等等。另外也可以試試看兩個style設定不同的屬性值，譬如內層用紅色字，外層用藍色字，看看最後網頁會聽誰的？正確答案應該是最靠近目標(文字)的樣式會被採用。

CSS使用方式之三：連結外部CSS檔案

你如果使用過FrontPage設計網頁就會知道『佈景主題』很好用，網頁的樣式可以隨時套用，此時就是使用網頁外部的CSS檔案。在此先將上面範例中的style標籤內剪下貼到一個記事本檔案，再儲存為網站內的一個"a.css"檔案，接著修改原始碼如下：

HEAD區塊內的style標籤改成<link>連結標籤，等於匯入外部檔案到此網頁，rel="stylesheet"是告訴網頁此連結應該當作樣式表使用，type="text/css"是指明樣式表的格式是css。你會發現執行效果與之前一模一樣！

練習：複製a.css成為另一個檔案b.css，修改內容後更改link連結檔案，看看是否能夠成功的套用？這就是最簡易版的佈景主題了！