Computer: Makeuper: CSS: Outline: Difference between revisions

From TestingMediawiki
Jump to navigation Jump to search
No edit summary
 
(回復至未受 Spammer 破壞前)
 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
----
回到 [[Computer]] ‧ 回到 [[Computer: Makeuper]]
回到 [[Computer]] ‧ 回到 [[Computer: Makeuper]]


Line 7: Line 5:
----
----


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


<div style="background-color:#dddddd;padding:2%;">
<div style="background-color:#dddddd;padding:2%;">
<nowiki><html></nowiki><br>
<nowiki><html></nowiki><br />
<nowiki><head></nowiki><br>
<nowiki><head></nowiki><br />
<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br>
<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br />
<nowiki></head></nowiki><br>
<nowiki></head></nowiki><br />
<nowiki><body></nowiki><br>
<nowiki><body></nowiki><br />
<nowiki><font color="red" size="100%">example_01</font><br></nowiki><br>
<nowiki><ol></nowiki><br />
<nowiki><font color="red" size="100%">example_02</font><br></nowiki><br>
<nowiki><li><font color="red" size="100%">example_01</font></li></nowiki><br />
<nowiki><font color="red" size="100%">example_03</font><br></nowiki><br>
<nowiki><li><font color="red" size="100%">example_02</font></li></nowiki><br />
<nowiki><font color="red" size="100%">example_04</font><br></nowiki><br>
<nowiki><li><font color="red" size="100%">example_03</font></li></nowiki><br />
<nowiki><font color="red" size="100%">example_05</font><br></nowiki><br>
<nowiki><li><font color="red" size="100%">example_04</font></li></nowiki><br />
<nowiki></body></nowiki><br>
<nowiki><li><font color="red" size="100%">example_05</font></li></nowiki><br />
<nowiki></html></nowiki><br>
<nowiki></ol></nowiki><br />
<nowiki></body></nowiki><br />
<nowiki></html></nowiki><br />
</div>
</div>


Line 27: Line 35:


<div style="background-color:#dddddd;padding:2%;">
<div style="background-color:#dddddd;padding:2%;">
<nowiki><html></nowiki><br>
<nowiki><html></nowiki><br />
<nowiki><head></nowiki><br>
<nowiki><head></nowiki><br />
<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br>
<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br />
<div style="background-color:#aadddd;">
<div style="background-color:#aadddd;">
<nowiki><style type="text/css"></nowiki><br>
<nowiki><style type="text/css"></nowiki><br />
<nowiki>div.eg01 div { color:red; size:100%; }</nowiki><br>
<nowiki><!--</nowiki><br />
<nowiki></style></nowiki><br>
<nowiki>ol.eg01 li { color:red; font-size:100%; }</nowiki><br />
<nowiki>--></nowiki><br />
<nowiki></style></nowiki><br />
</div>
<nowiki></head></nowiki><br />
<nowiki><body></nowiki><br />
<div style="background-color:#ffdddd;">
<nowiki><ol class="eg01"></nowiki><br />
<nowiki><li>example_01</li></nowiki><br />
<nowiki><li>example_02</li></nowiki><br />
<nowiki><li>example_03</li></nowiki><br />
<nowiki><li>example_04</li></nowiki><br />
<nowiki><li>example_05</li></nowiki><br />
<nowiki></ol></nowiki><br />
</div>
</div>
<nowiki></head></nowiki><br>
<nowiki></body></nowiki><br />
<nowiki><body></nowiki><br>
<nowiki></html></nowiki><br />
<nowiki><div class="eg01"></nowiki><br>
<nowiki><div>example_01</div></nowiki><br>
<nowiki><div>example_02</div></nowiki><br>
<nowiki><div>example_03</div></nowiki><br>
<nowiki><div>example_04</div></nowiki><br>
<nowiki><div>example_05</div></nowiki><br>
<nowiki></div></nowiki><br>
<nowiki></body></nowiki><br>
<nowiki></html></nowiki><br>
</div>
</div>


可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><DIV></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><DIV></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID 來代替，以達到修改時的便利性。</font>
這樣一來，本來要逐項修改底下同樣式的字體顏色跟字體大小的，但用了 CSS 後只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><OL></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><LI></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了。
 
*也就是說， CSS 的重點在於
*#把 HTML 文件中指定外觀的語法（即 HTML 中的標籤 tag 中的屬性 attribute 及其值 value）抽離，並替換上用 CSS 定義過樣式的 CLASS 及 ID 的名稱，來將 CSS 的樣式套用進各「元素 element」中。
*#並且利用定義 HTML 文件中的 element 所套用的 CLASS 及 ID 的方式，以達到套用同一個 CLASS 及 ID 的 element 的樣式能夠被一致化。
*#另外 CSS 的能玩的花樣也比 HTML 的屬性多很多這樣。


另外 CSS 的特色還有 2.5D 的視覺效果，可以讓你把一堆區塊給交錯堆疊，並形成一種單純的視覺藝術。（我知道這名詞用的很爛，不過我一時想不出其它寫法來。）
= 使用CSS時的基本用語 =


----
CSS 是必須要嚴格要求其寫法的，從「[[Computer: Makeuper: CSS: Step01|套用css到文件中]]」這一章開始會慢慢地跟各位說明其規則。
 
== HTML文件中的「構成元素 element」 ==
 
而使用 CSS 時，必須要先瞭解「元素 element」的概念。
 
元素簡單說是成對的 HTML 標籤，如「&lt;body&gt; &lt;/body&gt;」或「&lt;p&gt; &lt;/p&gt;」還有「&lt;div&gt; &lt;/div&gt;」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 或 IdName ，以將 CSS 的樣式套用進該元素中。
 
另外「標籤 tag 」則是指「元素的名稱」這樣的感覺，如元素 body 的標籤就是 body ，也就是說「&lt;body&gt; &lt;/body&gt;」叫元素，而「body」就是其標籤的意思。
 
== 「類別 class」與「本我 id」 ==
 
接著你會需要理解 CLASS 跟 ID 的概念。這兩者即是將 CSS 的樣式套用至元素上的關鍵屬性。
 
另外先說明一件事，不論是 class 還是 id ，名稱第一個字都不可以用「數字」開頭。如「123456」或「1abcd」都是錯誤的。
 
=== id ====
 
# 一份文件中只會有一個 id
# 一個世界中只會有一個我
# 不同的世界中也會有同樣的我存在
# 不同的文件也會有同樣的 id 存在
 
沒錯，一份文件只會有唯一一個的 id 名稱，同樣名稱的 id 是不會共存於同一份文件中的，不過一份文件中可以存在著許多不同名字的 id ，不同的文件中也可以存在著共用同樣名稱的 id ，但是「一份文件中不會有重覆名稱的 id 存在」。
 
* 順帶一提，這個 id 還可以拿來當做「前往文件內部的連結」的目的地的名稱。如：
*# 某段落元素 p 的 id 叫 nana ： &lt;p id="nana"&gt; &lt;/p&gt;
*# 那麼可以在同一份文件中建立一個超連結方便跳至該段落 ： &lt;a href="#nana"&gt; &lt;/a&gt;
*# 位在不同份的文件的話，在上述的「#IdName」前面加上目的地文件的檔名即可 ： &lt;a href="HtmlFileName.html#nana"&gt; &lt;/a&gt;
 
=== class ===
 
# 一份文件中可存在有複數的同名稱的 class
# class 可以和 id 一起在同一個 tag 中使用
 
class 跟 id 的使用方法是一樣的，「&lt;p class="nana_class"&gt; &lt;/p&gt;」便能將 class 使用在段落元素 p 上面了。
 
想知道何時該使用 class ，何時該用 id ，可以看看 [[Computer: Makeuper: XHTML|好孩子的 X(Extensible)HTML 教室]] 中的「XML 是什麼」。
 
 
 
= 各瀏覽器之間的差異 =
 
另外因為 Internet Explorer 6.0 以下對 CSS 的某些重要的樣式並不進行支援，所以在使用時請自行衡量一下，以免寫出來的網頁有人看來變得亂七八糟就有點尷尬了，該注意的樣式會在說到時提醒各位的，不必太擔心。
 
想嘹解「各瀏覽器對CSS的支援度」可以看[[Computer: Makeuper: CSS: Step07|這一頁]]。
 
 
 
= 好孩子的CSS講義其目錄 =
 
*本wiki的教學區
**[[Computer: Makeuper: CSS: Outline|第零章：css能做什麼]]
**[[Computer: Makeuper: CSS: Step01|第一章：套用css到文件中]]
**[[Computer: Makeuper: CSS: Step02|第二章：區塊]]
**[[Computer: Makeuper: CSS: Step03|第三章：文字樣式]]
**[[Computer: Makeuper: CSS: Step04|第四章：段落樣式]]
**[[Computer: Makeuper: CSS: Step05|第五章：通用規則]]
**[[Computer: Makeuper: CSS: Step06|第六章：一些特殊樣式的活用]]
**[[Computer: Makeuper: CSS: Step07|第七章：各瀏覽器對css的支援度]]
**[[Computer: Makeuper: CSS: Step08|第八章：可參考網頁]]
**附錄章：利用CSS進行各類挑戰！
***[[Computer: Makeuper: CSS: Ex01|簡易文件編輯區塊的作法]]
***[[Computer: Makeuper: CSS: Ex02|讓瀏覽器選擇不同的樣式表的作法]]
***[[Computer: Makeuper: CSS: Ex03|製作各類表格]]
***[[Computer: Makeuper: CSS: Ex04|製作正體中文的注音標示及日文的ふりがな標示]]

Latest revision as of 21:38, 26 February 2006

回到 Computer ‧ 回到 Computer: Makeuper

回到 Computer: Makeuper: CSS

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 的重點在於
    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>」或「<p> </p>」還有「<div> </div>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 或 IdName ，以將 CSS 的樣式套用進該元素中。

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

「類別 class」與「本我 id」

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

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

id =

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

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

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

class

  1. 一份文件中可存在有複數的同名稱的 class
  2. 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講義其目錄

Retrieved from "https://www.andcycle.idv.tw/mediawiki/index.php?title=Computer:_Makeuper:_CSS:_Outline&oldid=9472"