Computer: Makeuper: CSS: Step01: Difference between revisions
No edit summary |
No edit summary |
||
| Line 22: | Line 22: | ||
例：本文件採UTF-8編碼，外部呼叫 test.css 的 CSS 樣式表。此例以字型大小（font-size）來介紹CSS的套用順序的觀念，以及正確的套用法。 | 例：本文件採UTF-8編碼，外部呼叫 test.css 的 CSS 樣式表。此例以字型大小（font-size）來介紹CSS的套用順序的觀念，以及正確的套用法。 | ||
< | <nowiki>------------------------------------------------------------</nowiki> | ||
<font color="green">< | <font color="green"> | ||
< | <nowiki> <html> </nowiki><br> | ||
<br> | |||
<head> | <nowiki> <head> </nowiki><br> | ||
<title>test</title> | <nowiki> <title>test</title> </nowiki><br> | ||
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> | <nowiki> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> </nowiki><br> | ||
<link rel=stylesheet type="text/css" href="../test.css"> <!-- | <nowiki> <link rel=stylesheet type="text/css" href="../test.css"> <!--外部引入。另外這個被大於小於符號和驚嘆號及短橫線包住的是HTML的備註文字。--> </nowiki><br> | ||
<br> | |||
<style type="text/css"> < | <nowiki> <style type="text/css"> /*這個就是在內部開頭宣告CSS樣式，順帶一提，同樣的標籤，放越後面的，就是最後所呈現的樣式。另外這一行的寫法是CSS中備註文字的寫法，也就是斜線和星號這樣。*/ </nowiki><br> | ||
body { font-size:12px; } | <nowiki> body { font-size:12px; } </nowiki><br> | ||
</style> | <nowiki> </style> </nowiki><br> | ||
<br> | |||
</head> | <nowiki> </head> </nowiki><br> | ||
<br> | |||
<body style="font-size:16px;"> <!--這個就是在文件內的BODY標籤做宣告--> | <nowiki> <body style="font-size:16px;"> <!--這個就是在文件內的BODY標籤做宣告--> </nowiki><br> | ||
<br> | |||
<table style="font-size:24px;"> <!--下略（汗）反正被包越裏面的，就是最後顯示的啦。--> | <nowiki> <table style="font-size:24px;"> <!--下略（汗）反正被包越裏面的，就是最後顯示的啦。--> </nowiki><br> | ||
<br> | |||
<tr style="font-size:36px;"> | <nowiki> <tr style="font-size:36px;"> </nowiki><br> | ||
<td style="font-size:48px;"> | <nowiki> <td style="font-size:48px;"> </nowiki><br> | ||
<p style="font-size:120px;">test</p> | <nowiki> <p style="font-size:120px;">test</p> </nowiki><br> | ||
</td> | <nowiki> </td> </nowiki><br> | ||
</tr> | <nowiki> </tr> </nowiki><br> | ||
<br> | |||
</table> | <nowiki> </table> </nowiki><br> | ||
<br> | |||
<nowiki> </body> </nowiki><br> | |||
</body> | <nowiki> </html> </nowiki><br> | ||
</html> | </font> | ||
</nowiki>< | <nowiki>------------------------------------------------------------</nowiki> | ||
< | |||
例子中的該 test.css 檔內容： | 例子中的該 test.css 檔內容： | ||
Revision as of 13:48, 24 September 2004
回到 Computer ‧ 回到 Computer: Makeuper ‧ 回到 Computer: Makeuper: CSS
一般來說，要得到正確的CSS效果，就要捨棄IE， 不過保險一點的作法，是用IE確定有沒有漏宣告的地方， 因為有些地方沒做宣告，會由瀏覽器自行調整， 這樣就造成了各家瀏覽器看到的東西不同的情況了。
另外雖然不勉強大家學CSS一定要學HTML， 不過知道一些標籤的意思的話會比較好， 這點在以後會建個HTML專區做說明這樣。
CSS套用效果的順序如下，越後面的，最後顯示的就是這種效果。
１、 body
２、 div table p pre …這些看你怎麼包，包越裏面順位越後面。
３、以上標籤，外部先於內部處理，內部的HEAD內的宣告先於各標籤。
４、class跟id這種指定法也是遵循此順序
例：本文件採UTF-8編碼，外部呼叫 test.css 的 CSS 樣式表。此例以字型大小（font-size）來介紹CSS的套用順序的觀念，以及正確的套用法。
------------------------------------------------------------
<html>
<head>
<title>test</title>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<link rel=stylesheet type="text/css" href="../test.css"> <!--外部引入。另外這個被大於小於符號和驚嘆號及短橫線包住的是HTML的備註文字。-->
<style type="text/css"> /*這個就是在內部開頭宣告CSS樣式，順帶一提，同樣的標籤，放越後面的，就是最後所呈現的樣式。另外這一行的寫法是CSS中備註文字的寫法，也就是斜線和星號這樣。*/
body { font-size:12px; }
</style>
</head>
<body style="font-size:16px;"> <!--這個就是在文件內的BODY標籤做宣告-->
<table style="font-size:24px;"> <!--下略（汗）反正被包越裏面的，就是最後顯示的啦。-->
<tr style="font-size:36px;">
<td style="font-size:48px;">
<p style="font-size:120px;">test</p>
</td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------
例子中的該 test.css 檔內容：
==========
body { font-size:8px; }
==========
在本例子中，最後顯示在文件中的，就是 <p style="font-size:120px;">test</p> 了，如何，很簡單吧？（心虛）我知道這樣解說是有點太難便了啦…反正自己建一個HTML跟一個CSS檔再複製貼上這些內容就知道了。