CSS

CSS 是「階層式樣式表【Cascading Style Sheets】」的縮寫。

是用來定義 HTML 的畫面效果，如文字顏色、畫面背景、各元素的框線、排版、滑鼠效果等樣式用的。

簡單呈現CSS的用處

在以往，我們寫一份 HTML 文件時，會這麼寫下面這樣子的玩意。（請自行複製貼上到你的網頁編輯軟體的純文字編輯區中來看其呈現的結果）

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=big5">
</head>
<body>
<ol>
<li><font color="red" size="100%">example_01</font></li>
<li><font color="red" size="100%">example_02</font></li>
<li><font color="red" size="100%">example_03</font></li>
<li><font color="red" size="100%">example_04</font></li>
<li><font color="red" size="100%">example_05</font></li>
</ol>
</body>
</html>

這時一定會有人覺得寫得又長又臭又難修改的很煩人吧。CSS的優點之一就在此時發揮功效了。

</head>
<body>

<ol class="eg01">
<li>example_01</li>
<li>example_02</li>
<li>example_03</li>
<li>example_04</li>
<li>example_05</li>
</ol>

</body>
</html>

這樣一來，本來要逐項修改底下同樣式的字體顏色跟字體大小的，但用了 CSS 後只要去處理 <head> 處的 <style type="text/css"> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <OL> 底下的所有未被宣告其它 CLASS 與 ID 的 <LI> 就通通會依照 <head> 處的 <style type="text/css"> 處的 CSS 語法所宣告的內容而變化了。

也就是說， CSS 的重點在於
1. 把 HTML 文件中指定外觀的語法（即 HTML 中的標籤 tag 中的屬性 attribute 及其值 value）抽離，並替換上用 CSS 定義過樣式的 CLASS 及 ID 的名稱，來將 CSS 的樣式套用進各「元素 element」中。
2. 並且利用定義 HTML 文件中的 element 所套用的 CLASS 及 ID 的方式，以達到套用同一個 CLASS 及 ID 的 element 的樣式能夠被一致化。
3. 另外 CSS 的能玩的花樣也比 HTML 的屬性多很多這樣。

使用CSS時的基本用語

CSS 是必須要嚴格要求其寫法的，從「套用css到文件中」這一章開始會慢慢地跟各位說明其規則。

HTML文件中的「構成元素 element」

而使用 CSS 時，必須要先瞭解「元素 element」的概念。

元素簡單說是成對的 HTML 標籤，如「<body> </body>」或「

」還有「

」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 或 IdName ，以將 CSS 的樣式套用進該元素中。

另外「標籤 tag 」則是指「元素的名稱」這樣的感覺，如元素 body 的標籤就是 body ，也就是說「<body> </body>」叫元素，而「body」就是其標籤的意思。

「類別 class」與「本我 id」

接著你會需要理解 CLASS 跟 ID 的概念。這兩者即是將 CSS 的樣式套用至元素上的關鍵屬性。

另外先說明一件事，不論是 class 還是 id ，名稱第一個字都不可以用「數字」開頭。如「123456」或「1abcd」都是錯誤的。

id =

一份文件中只會有一個 id
一個世界中只會有一個我
不同的世界中也會有同樣的我存在
不同的文件也會有同樣的 id 存在

沒錯，一份文件只會有唯一一個的 id 名稱，同樣名稱的 id 是不會共存於同一份文件中的，不過一份文件中可以存在著許多不同名字的 id ，不同的文件中也可以存在著共用同樣名稱的 id ，但是「一份文件中不會有重覆名稱的 id 存在」。

順帶一提，這個 id 還可以拿來當做「前往文件內部的連結」的目的地的名稱。如：
1. 某段落元素 p 的 id 叫 nana ：
2. 那麼可以在同一份文件中建立一個超連結方便跳至該段落： <a href="#nana"> </a>
3. 位在不同份的文件的話，在上述的「#IdName」前面加上目的地文件的檔名即可： <a href="HtmlFileName.html#nana"> </a>

class

一份文件中可存在有複數的同名稱的 class
class 可以和 id 一起在同一個 tag 中使用

class 跟 id 的使用方法是一樣的，「

」便能將 class 使用在段落元素 p 上面了。

想知道何時該使用 class ，何時該用 id ，可以看看好孩子的 X(Extensible)HTML 教室中的「XML 是什麼」。

各瀏覽器之間的差異

另外因為 Internet Explorer 6.0 以下對 CSS 的某些重要的樣式並不進行支援，所以在使用時請自行衡量一下，以免寫出來的網頁有人看來變得亂七八糟就有點尷尬了，該注意的樣式會在說到時提醒各位的，不必太擔心。

想嘹解「各瀏覽器對CSS的支援度」可以看這一頁。

好孩子的CSS講義其目錄

本wiki的教學區

Computer: Makeuper: CSS: Outline

Contents

CSS

簡單呈現CSS的用處

使用CSS時的基本用語

HTML文件中的「構成元素 element」

「類別 class」與「本我 id」

id =

class

各瀏覽器之間的差異

好孩子的CSS講義其目錄

Navigation menu

Computer: Makeuper: CSS: Outline

CSS

簡單呈現CSS的用處

使用CSS時的基本用語

HTML文件中的「構成元素 element」

「類別 class」與「本我 id」

id =

class

各瀏覽器之間的差異

好孩子的CSS講義其目錄

Navigation menu

Search