Computer: Makeuper: CSS: Step01

回到 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"> <!--外部引入-->

<style type="text/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檔再複製貼上這些內容就知道了。

Computer: Makeuper: CSS: Step01

Navigation menu

Search