Computer: Makeuper: CSS: Outline: Difference between revisions
No edit summary |
回復至未受 Spammer 破壞前 |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 7: | Line 7: | ||
= CSS = | = CSS = | ||
CSS | CSS 是「[http://www.google.com.tw/search?hl=zh-TW&q=%E9%9A%8E%E5%B1%A4%E5%BC%8F%E6%A8%A3%E5%BC%8F%E8%A1%A8&btnG=%E6%90%9C%E5%B0%8B&meta= 階層式樣式表]【[http://www.google.com.tw/search?hl=zh-TW&q=Cascading+Style+Sheets&btnG=%E6%90%9C%E5%B0%8B&meta= Cascading Style Sheets]】」的縮寫。 | ||
是用來定義 HTML 的畫面效果，如文字顏色、畫面背景、各元素的框線、排版、滑鼠效果等樣式用的。 | |||
= 簡單呈現CSS的用處 = | = 簡單呈現CSS的用處 = | ||
| Line 63: | Line 63: | ||
*也就是說， CSS 的重點在於 | *也就是說， CSS 的重點在於 | ||
*#把 HTML 文件中指定外觀的語法（即 HTML 中的標籤 tag 中的屬性 | *#把 HTML 文件中指定外觀的語法（即 HTML 中的標籤 tag 中的屬性 attribute 及其值 value）抽離，並替換上用 CSS 定義過樣式的 CLASS 及 ID 的名稱，來將 CSS 的樣式套用進各「元素 element」中。 | ||
*#並且利用定義 HTML 文件中的 element 所套用的 CLASS 及 ID 的方式，以達到套用同一個 CLASS 及 ID 的 element 的樣式能夠被一致化。 | *#並且利用定義 HTML 文件中的 element 所套用的 CLASS 及 ID 的方式，以達到套用同一個 CLASS 及 ID 的 element 的樣式能夠被一致化。 | ||
*#另外 CSS 的能玩的花樣也比 HTML 的屬性多很多這樣。 | *#另外 CSS 的能玩的花樣也比 HTML 的屬性多很多這樣。 | ||
= 使用CSS時的基本用語 = | = 使用CSS時的基本用語 = | ||
Latest revision as of 21:38, 26 February 2006
回到 Computer ‧ 回到 Computer: Makeuper
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的優點之一就在此時發揮功效了。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=big5">
<style type="text/css">
<!--
ol.eg01 li { color:red; font-size:100%; }
-->
</style>
</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 的重點在於
- 把 HTML 文件中指定外觀的語法（即 HTML 中的標籤 tag 中的屬性 attribute 及其值 value）抽離，並替換上用 CSS 定義過樣式的 CLASS 及 ID 的名稱，來將 CSS 的樣式套用進各「元素 element」中。
- 並且利用定義 HTML 文件中的 element 所套用的 CLASS 及 ID 的方式，以達到套用同一個 CLASS 及 ID 的 element 的樣式能夠被一致化。
- 另外 CSS 的能玩的花樣也比 HTML 的屬性多很多這樣。
使用CSS時的基本用語
CSS 是必須要嚴格要求其寫法的，從「套用css到文件中」這一章開始會慢慢地跟各位說明其規則。
HTML文件中的「構成元素 element」
而使用 CSS 時，必須要先瞭解「元素 element」的概念。
元素簡單說是成對的 HTML 標籤，如「<body> </body>」或「<p> </p>」還有「<div> </div>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 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 還可以拿來當做「前往文件內部的連結」的目的地的名稱。如：
- 某段落元素 p 的 id 叫 nana ： <p id="nana"> </p>
- 那麼可以在同一份文件中建立一個超連結方便跳至該段落 ： <a href="#nana"> </a>
- 位在不同份的文件的話，在上述的「#IdName」前面加上目的地文件的檔名即可 ： <a href="HtmlFileName.html#nana"> </a>
class
- 一份文件中可存在有複數的同名稱的 class
- class 可以和 id 一起在同一個 tag 中使用
class 跟 id 的使用方法是一樣的，「<p class="nana_class"> </p>」便能將 class 使用在段落元素 p 上面了。
想知道何時該使用 class ，何時該用 id ，可以看看 好孩子的 X(Extensible)HTML 教室 中的「XML 是什麼」。
各瀏覽器之間的差異
另外因為 Internet Explorer 6.0 以下對 CSS 的某些重要的樣式並不進行支援，所以在使用時請自行衡量一下，以免寫出來的網頁有人看來變得亂七八糟就有點尷尬了，該注意的樣式會在說到時提醒各位的，不必太擔心。
想嘹解「各瀏覽器對CSS的支援度」可以看這一頁。
好孩子的CSS講義其目錄
- 本wiki的教學區