Computer: Makeuper: CSS: Outline: Difference between revisions
No edit summary |
No edit summary |
||
| Line 32: | Line 32: | ||
<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 | <nowiki>div.eg01 font { color:red; size:100%; }</nowiki><br> | ||
<nowiki></style></nowiki><br> | <nowiki></style></nowiki><br> | ||
</div> | </div> | ||
| Line 40: | Line 40: | ||
<nowiki><div class="eg01"></nowiki><br> | <nowiki><div class="eg01"></nowiki><br> | ||
</div> | </div> | ||
<nowiki>< | <nowiki><font>example_01</font><br></nowiki><br> | ||
<nowiki>< | <nowiki><font>example_02</font><br></nowiki><br> | ||
<nowiki>< | <nowiki><font>example_03</font><br></nowiki><br> | ||
<nowiki>< | <nowiki><font>example_04</font><br></nowiki><br> | ||
<nowiki>< | <nowiki><font>example_05</font><br></nowiki><br> | ||
<div style="background-color:#ffdddd;"> | <div style="background-color:#ffdddd;"> | ||
<nowiki></div></nowiki><br> | <nowiki></div></nowiki><br> | ||
| Line 52: | Line 52: | ||
</div> | </div> | ||
可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><DIV></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki>< | 可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <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> | ||
另外 CSS 的特色還有 2.5D 的視覺效果，可以讓你把一堆區塊給交錯堆疊，並形成一種單純的視覺藝術。（我知道這名詞用的很爛，不過我一時想不出其它寫法來。） | 另外 CSS 的特色還有 2.5D 的視覺效果，可以讓你把一堆區塊給交錯堆疊，並形成一種單純的視覺藝術。（我知道這名詞用的很爛，不過我一時想不出其它寫法來。） | ||
至於區塊的觀念，則待第二章節再講解。第一章節將先介紹文字的效果。 | |||
---- | ---- | ||
Revision as of 01:19, 25 September 2004
回到 Computer ‧ 回到 Computer: Makeuper
在以往，我們寫一份 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 font { color:red; size:100%; }
</style>
</head>
<body>
<div class="eg01">
<font>example_01</font><br>
<font>example_02</font><br>
<font>example_03</font><br>
<font>example_04</font><br>
<font>example_05</font><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 來代替，以達到修改時的便利性。
另外 CSS 的特色還有 2.5D 的視覺效果，可以讓你把一堆區塊給交錯堆疊，並形成一種單純的視覺藝術。（我知道這名詞用的很爛，不過我一時想不出其它寫法來。）
至於區塊的觀念，則待第二章節再講解。第一章節將先介紹文字的效果。