Computer: Makeuper: CSS: Outline: Difference between revisions
No edit summary |
No edit summary |
||
| Line 4: | Line 4: | ||
回到 [[Computer: Makeuper: CSS]] | 回到 [[Computer: Makeuper: CSS]] | ||
[[#簡單呈現CSS的用處|簡單呈現CSS的用處]]<br> | |||
[[#其它CSS的基本介紹|其它CSS的基本介紹]]<br> | |||
[[#好孩子的CSS講義其目錄|好孩子的CSS講義其目錄]]<br> | |||
---- | ---- | ||
在以往，我們寫一份 HTML | = 簡單呈現CSS的用處 = | ||
在以往，我們寫一份 HTML 文件時，會這麼寫下面這樣子的玩意。（請自行複製貼上到你的 網頁編輯軟體的純文字編輯區中來看其呈現的結果） | |||
<div style="background-color:#dddddd;padding:2%;"> | <div style="background-color:#dddddd;padding:2%;"> | ||
| Line 56: | Line 62: | ||
可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><DIV></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><FONT></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID 來代替，以達到修改時的便利性。</font> | 可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><DIV></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><FONT></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID 來代替，以達到修改時的便利性。</font> | ||
（另外有一點要偷偷說明一下，HTML標籤中的『size="100%"』跟CSS語法中的『font-size:100%;』其實顯示出來的效果是不同的，原因我一時想不出來，可能要去[http://www.w3c.org/ W3C]那找資料才行了，總之別在意這種小事啦，不用百分比，還有pt和px可用來指定大小呀。） | |||
---- | |||
= 其它CSS的基本介紹 = | |||
CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。 | |||
而使用 CSS 時，必須要先嘹解「區塊」的概念。 | |||
區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<nowiki><body> </body></nowiki>」或「<nowiki><p> </p></nowiki>」還有「<nowiki><div> </div></nowiki>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。 | |||
另外因為 InternetExplorer 對 CSS 的某些樣式不進行支援，所以在使用時請自行衡量一下，以免寫出來的網頁有人看來變得亂七八糟就有點尷尬了，該注意的樣式會在說到時提醒各位的，不必太擔心。 | |||
---- | |||
= 好孩子的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|製作正體中文的注音標示及日文的ふりがな標示]] | |||
---- | ---- | ||
Revision as of 13:23, 14 October 2004
回到 Computer ‧ 回到 Computer: Makeuper
簡單呈現CSS的用處
其它CSS的基本介紹
好孩子的CSS講義其目錄
簡單呈現CSS的用處
在以往，我們寫一份 HTML 文件時，會這麼寫下面這樣子的玩意。（請自行複製貼上到你的 網頁編輯軟體的純文字編輯區中來看其呈現的結果）
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=big5">
</head>
<body>
<font color="red" size="100%">example_01</font><br>
<font color="red" size="100%">example_02</font><br>
<font color="red" size="100%">example_03</font><br>
<font color="red" size="100%">example_04</font><br>
<font color="red" size="100%">example_05</font><br>
</body>
</html>
這時一定會有人覺得寫得又長又臭又難修改的很煩人吧。CSS的優點之一就在此時發揮功效了。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=big5">
<!--
<style type="text/css">
div.eg01 span { color:red; size:100%; }
</style>
-->
</head>
<body>
<div class="eg01">
<span>example_01</span><br>
<span>example_02</span><br>
<span>example_03</span><br>
<span>example_04</span><br>
<span>example_05</span><br>
</div>
</body>
</html>
可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <head> 處的 <style type="text/css"> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <DIV> 底下的所有未被宣告其它 CLASS 與 ID 的 <FONT> 就通通會依照 <head> 處的 <style type="text/css"> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID 來代替，以達到修改時的便利性。
（另外有一點要偷偷說明一下，HTML標籤中的『size="100%"』跟CSS語法中的『font-size:100%;』其實顯示出來的效果是不同的，原因我一時想不出來，可能要去W3C那找資料才行了，總之別在意這種小事啦，不用百分比，還有pt和px可用來指定大小呀。）
其它CSS的基本介紹
CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。
而使用 CSS 時，必須要先嘹解「區塊」的概念。
區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<body> </body>」或「<p> </p>」還有「<div> </div>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。
另外因為 InternetExplorer 對 CSS 的某些樣式不進行支援，所以在使用時請自行衡量一下，以免寫出來的網頁有人看來變得亂七八糟就有點尷尬了，該注意的樣式會在說到時提醒各位的，不必太擔心。
好孩子的CSS講義其目錄
- 本wiki的教學區