Computer: Makeuper: CSS: Outline: Difference between revisions
| Line 68: | Line 68: | ||
CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。 | CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。 | ||
而使用 CSS | 而使用 CSS 時，必須要先瞭解「區塊」的概念。 | ||
區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<nowiki><body> </body></nowiki>」或「<nowiki><p> </p></nowiki>」還有「<nowiki><div> </div></nowiki>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。 | 區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<nowiki><body> </body></nowiki>」或「<nowiki><p> </p></nowiki>」還有「<nowiki><div> </div></nowiki>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。 | ||
Revision as of 22:58, 20 January 2005
回到 Computer ‧ 回到 Computer: Makeuper
簡單呈現CSS的用處
其它CSS的基本介紹
好孩子的CSS講義其目錄
簡單呈現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 文件中指定外觀的語法抽離，而用 CSS 的 CLASS 及 ID 對區塊進行命名，並且利用定義一個個的區塊的方式，以達到修改套用同一樣式的標籤時的便利性。
其它CSS的基本介紹
CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。
而使用 CSS 時，必須要先瞭解「區塊」的概念。
區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<body> </body>」或「<p> </p>」還有「<div> </div>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。
另外因為 InternetExplorer 對 CSS 的某些樣式不進行支援，所以在使用時請自行衡量一下，以免寫出來的網頁有人看來變得亂七八糟就有點尷尬了，該注意的樣式會在說到時提醒各位的，不必太擔心。
好孩子的CSS講義其目錄
- 本wiki的教學區