Computer: Makeuper: CSS: Step01: Difference between revisions

From TestingMediawiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
----
----


回到 [[Computer]] ‧ 回到 [[Computer: Makeuper]] ‧ 回到 [[Computer: Makeuper: CSS]]
回到 [[Computer]] ‧ 回到 [[Computer: Makeuper]]<br>回到 [[Computer: Makeuper: CSS]]


----
----


一般來說，要得到正確的CSS效果，就要捨棄IE，
將CSS套用至你的網頁中吧！
不過保險一點的作法，是用IE確定有沒有漏宣告的地方，
因為有些地方沒做宣告，會由瀏覽器自行調整，
這樣就造成了各家瀏覽器看到的東西不同的情況了。


另外雖然不勉強大家學CSS一定要學HTML，
<font color="#ff4444">（請邊開你的網頁編輯軟體邊把源碼給複製貼上以嘹解其顯示出的結果為何）</font>
不過知道一些標籤的意思的話會比較好，
這點在以後會建個HTML專區做說明這樣。


CSS套用效果的順序如下，越後面的，最後顯示的就是這種效果。<br>
----
１、 body<br>
 
２、 div table p pre …這些看你怎麼包，包越裏面順位越後面。<br>
= 在HTML的標籤中套用樣式 =
３、以上標籤，外部先於內部處理，內部的HEAD內的宣告先於各標籤。<br>
 
４、class跟id這種指定法也是遵循此順序<br>
例如想在 <font color="green"><nowiki><p> </p></nowiki></font> 中套用字體顏色的樣式，只要在你的 <font color="#ff4444">*.html</font> 等的檔案中的標籤這樣寫就行了。
 
<div style="background-color:#dddddd;padding:2%;"><nowiki><p style="color:blue;">我是被CSS給變成藍色的字呀！</p></nowiki></div>
 
亦即是加入「<font color="#ff4444">style=" "</font>」，就可以進行 CSS 樣式的定義了。
 
要定義樣式時，前面要寫樣式名稱，中間則是用冒號「:」，與後面的樣式屬性隔開，各個樣式之間請用「;」分隔開來。
 
----
 
= 在HTML的HEAD處進行宣告 =
 
HTML 文件中的 <font color="green"><nowiki><head> </head></nowiki></font> 之間是用來寫不會顯示在畫面上的一些資訊用的，你可以在此處宣告 CSS 樣式。
 
<div style="background-color:#dddddd;padding:2%;">
<nowiki><html></nowiki><br>
<nowiki><head></nowiki><br>
<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br>
<div style="background-color:#aadddd;">
<nowiki><!--</nowiki><br>
<nowiki><style type="text/css"></nowiki><br>
<nowiki>div { color:red; font-size:100%; }</nowiki><br>
<nowiki>#eg01 { color:blue; font-size:120%; }</nowiki><br>
<nowiki>div.eg01 span { color:green; font-size:180%; }</nowiki><br>
<nowiki></style></nowiki><br>
<nowiki>--></nowiki><br>
</div>
<nowiki></head></nowiki><br>
<nowiki><body></nowiki><br>
<div style="background-color:#ffdddd;">
<nowiki><div></nowiki><br>
<nowiki>我們是被定義為紅色顏色(color)的DIV區塊下的字體，其字型大小(font-size)為 100% 。<br></nowiki><br>
<nowiki>我們是被定義為紅色字體的DIV區塊下的字體，其字型大小為 100% 。<br></nowiki><br>
<nowiki>我們是被定義為紅色字體的DIV區塊下的字體，其字型大小為 100% 。<br></nowiki><br>
<nowiki></div></nowiki><br>
</div>
<div style="background-color:#ddddff;">
<nowiki><div id="eg01"></nowiki><br>
<nowiki>我們是被定義為藍色字體的字體，其字型大小為 120% 。<br></nowiki><br>
<nowiki>我們是被定義為藍色字體的字體，其字型大小為 120% 。<br></nowiki><br>
<nowiki>我們是被定義為藍色字體的字體，其字型大小為 120% 。<br></nowiki><br>
<nowiki></div></nowiki><br>
</div>
<div style="background-color:#ddffdd;">
<nowiki><div class="eg01"></nowiki><br>
<nowiki><span>我們是被定義為綠色字體的DIV區塊下SPAN區塊下的字體，其字型大小為 180% 。</span><br></nowiki><br>
<nowiki><span>我們是被定義為綠色字體的DIV區塊下SPAN區塊下的字體，其字型大小為 180% 。</span><br></nowiki><br>
<nowiki><span>我們是被定義為綠色字體的DIV區塊下SPAN區塊下的字體，其字型大小為 180% 。</span><br></nowiki><br>
<nowiki></div></nowiki><br>
</div>
<nowiki></body></nowiki><br>
<nowiki></html></nowiki><br>
</div>
 
亦即是在 <font color="green"><nowiki><head> </head></nowiki></font> 處加入較深藍色那一塊中所寫的東西即可將 CSS 樣式套入此 HTML 文件中。其上下的 <font color="green"><nowiki><!-- 及 --></nowiki></font> 是用來避免有人的瀏覽器不支援 CSS 時，可以將其無視掉，而不會不小心變成顯示那堆字在畫面上。而 <font color="green"><nowiki><style type="text/css"> 和 </style></nowiki></font> 中間所夾的便是 CSS 的樣式所套用到的 HTML 中的標籤名稱及其樣式了，依照「<font color="green">HTML標籤 { CSS樣式名稱:CSS樣式屬性; }</font>」這樣的寫法便行作用了。
 
在此要說明其套用的規則，以及 Class 和 Id 這兩樣東西。


例：本文件採UTF-8編碼，外部呼叫 test.css 的 CSS 樣式表。此例以字型大小（font-size）來介紹CSS的套用順序的觀念，以及正確的套用法。
在 HEAD 處，你可以看到三種樣式，即「<nowiki>div { color:red; size:100%; }</nowiki>」、「
<nowiki>#eg01 { color:blue; size:100%; }</nowiki>」和「
<nowiki>div.eg01 span { color:green; size:100%; }</nowiki>」。


<nowiki>------------------------------------------------------------</nowiki>
這三者分別對應到「<nowiki><div></nowiki>」、「<nowiki><div id="eg01></nowiki>」以及「<nowiki><div class="eg01"></nowiki>」三個淡紅、淡藍、淡綠的區塊。
<font color="green">
<nowiki> <html> </nowiki><br>
<br>
<nowiki> <head> </nowiki><br>
<nowiki> <title>test</title> </nowiki><br>
<nowiki> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> </nowiki><br>
<nowiki> <link rel=stylesheet type="text/css" href="../test.css"> <!--外部引入。另外這個被大於小於符號和驚嘆號及短橫線包住的是HTML的備註文字。--> </nowiki><br>
<br>
<nowiki> <style type="text/css"> /*這個就是在內部開頭宣告CSS樣式，順帶一提，同樣的標籤，放越後面的，就是最後所呈現的樣式。另外這一行的寫法是CSS中備註文字的寫法，也就是斜線和星號這樣。*/ </nowiki><br>
<nowiki> body { font-size:12px; } </nowiki><br>
<nowiki> </style> </nowiki><br>
<br>
<nowiki> </head> </nowiki><br>
<br>
<nowiki> <body style="font-size:16px;"> <!--這個就是在文件內的BODY標籤做宣告--> </nowiki><br>
<br>
<nowiki> <table style="font-size:24px;"> <!--下略（汗）反正被包越裏面的，就是最後顯示的啦。--> </nowiki><br>
<br>
<nowiki> <tr style="font-size:36px;"> </nowiki><br>
<nowiki> <td style="font-size:48px;"> </nowiki><br>
<nowiki> <p style="font-size:120px;">test</p> </nowiki><br>
<nowiki> </td> </nowiki><br>
<nowiki> </tr> </nowiki><br>
<br>
<nowiki> </table> </nowiki><br>
<br>
<nowiki> </body> </nowiki><br>
<nowiki> </html> </nowiki><br>
</font>
<nowiki>------------------------------------------------------------</nowiki>


例子中的該 test.css 檔內容：
第一種「<nowiki>div { color:red; size:100%; }</nowiki>」，會將此份文件中，所有的 <font color="red">DIV</font> 標籤都給套用上此樣式。


第二種「
<nowiki>#eg01 { color:blue; size:100%; }</nowiki>」，則是只會對其 Id 名稱為 eg01 的 <font color="red">任何</font> 標籤進行套用。不過要注意，如果你之前有對全 DIV 標籤進行樣式的定義（此例中以DIV為例，所以就拿DIV來說明了。），而這個 DIV 所引用的 Id 所定義的項目又比其少的話，依然還是會受到該全 DIV 樣式宣告的影響，所以碰上此情況時，如果不希望該 Id 的樣式受影響，就必須在該 Id 中再進行那些少宣告的樣式的宣告，簡單說就是「既然被改了，就再改回來就好了。」這樣。


<pre>==========</pre>
第三種「
<font color="green"><pre><nowiki>
<nowiki>div.eg01 span { color:green; size:100%; }</nowiki>」，則是只會對其 Class 名稱為 eg01 的 <font color="red">DIV</font> 標籤，其底下的 <font color="red">SPAN</font> 標籤進行套用。
body { font-size:8px; }
</nowiki></pre></font>
<pre>==========</pre>


在本例子中，最後顯示在文件中的，就是 <font color="red"><nowiki><p style="font-size:120px;">test</p></nowiki></font> 了，如何，很簡單吧？（心虛）我知道這樣解說是有點太難便了啦…反正自己建一個HTML跟一個CSS檔再複製貼上這些內容就知道了。
*在此要說明一些事
**Id 跟 Class 的名稱都會區分大小寫，所以請注意你的大小寫有沒有寫錯。
**另外 id 跟 class 名稱的命名絕對不要用數字開頭（也別用中日文等的來命名），那樣是無法作用的。
**另外若想對多數標籤下同一種樣式，可以像這個樣子寫， HTML 標籤放你想放的，不必照這兒寫的。「<font color="green"><nowiki>hr, table, th, td { border:1px solid #000000; }</nowiki></font>」
**Id 跟 Class 不一定要接在標籤後，成「標籤.Class」之類的型式，這樣子只是為了要將其指定給某標籤用時才會這樣寫，基本上也可以只寫「.Class」這樣。
**還有 class 可以做到 Tag01.ClassName01 、 Tag02.ClassName01 這種單一 ClassName 對應多重 Tag（標籤）的功能，但是 ID 是沒辦法的，在使用上也請注意一下。


----
----

Revision as of 14:31, 14 October 2004

回到 Computer ‧ 回到 Computer: Makeuper
回到 Computer: Makeuper: CSS

將CSS套用至你的網頁中吧！

（請邊開你的網頁編輯軟體邊把源碼給複製貼上以嘹解其顯示出的結果為何）

在HTML的標籤中套用樣式

例如想在 <p> </p> 中套用字體顏色的樣式，只要在你的 *.html 等的檔案中的標籤這樣寫就行了。

<p style="color:blue;">我是被CSS給變成藍色的字呀！</p>

亦即是加入「style=" "」，就可以進行 CSS 樣式的定義了。

要定義樣式時，前面要寫樣式名稱，中間則是用冒號「:」，與後面的樣式屬性隔開，各個樣式之間請用「;」分隔開來。

在HTML的HEAD處進行宣告

HTML 文件中的 <head> </head> 之間是用來寫不會顯示在畫面上的一些資訊用的，你可以在此處宣告 CSS 樣式。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=big5">

<!--
<style type="text/css">
div { color:red; font-size:100%; }
#eg01 { color:blue; font-size:120%; }
div.eg01 span { color:green; font-size:180%; }
</style>
-->

</head>
<body>

<div>
我們是被定義為紅色顏色(color)的DIV區塊下的字體，其字型大小(font-size)為 100% 。<br>
我們是被定義為紅色字體的DIV區塊下的字體，其字型大小為 100% 。<br>
我們是被定義為紅色字體的DIV區塊下的字體，其字型大小為 100% 。<br>
</div>

<div id="eg01">
我們是被定義為藍色字體的字體，其字型大小為 120% 。<br>
我們是被定義為藍色字體的字體，其字型大小為 120% 。<br>
我們是被定義為藍色字體的字體，其字型大小為 120% 。<br>
</div>

<div class="eg01">
<span>我們是被定義為綠色字體的DIV區塊下SPAN區塊下的字體，其字型大小為 180% 。</span><br>
<span>我們是被定義為綠色字體的DIV區塊下SPAN區塊下的字體，其字型大小為 180% 。</span><br>
<span>我們是被定義為綠色字體的DIV區塊下SPAN區塊下的字體，其字型大小為 180% 。</span><br>
</div>

</body>
</html>

亦即是在 <head> </head> 處加入較深藍色那一塊中所寫的東西即可將 CSS 樣式套入此 HTML 文件中。其上下的 <!-- 及 --> 是用來避免有人的瀏覽器不支援 CSS 時，可以將其無視掉，而不會不小心變成顯示那堆字在畫面上。而 <style type="text/css"> 和 </style> 中間所夾的便是 CSS 的樣式所套用到的 HTML 中的標籤名稱及其樣式了，依照「HTML標籤 { CSS樣式名稱:CSS樣式屬性; }」這樣的寫法便行作用了。

在此要說明其套用的規則，以及 Class 和 Id 這兩樣東西。

在 HEAD 處，你可以看到三種樣式，即「div { color:red; size:100%; }」、「 #eg01 { color:blue; size:100%; }」和「 div.eg01 span { color:green; size:100%; }」。

這三者分別對應到「<div>」、「<div id="eg01>」以及「<div class="eg01">」三個淡紅、淡藍、淡綠的區塊。

第一種「div { color:red; size:100%; }」，會將此份文件中，所有的 DIV 標籤都給套用上此樣式。

第二種「 #eg01 { color:blue; size:100%; }」，則是只會對其 Id 名稱為 eg01 的 任何 標籤進行套用。不過要注意，如果你之前有對全 DIV 標籤進行樣式的定義（此例中以DIV為例，所以就拿DIV來說明了。），而這個 DIV 所引用的 Id 所定義的項目又比其少的話，依然還是會受到該全 DIV 樣式宣告的影響，所以碰上此情況時，如果不希望該 Id 的樣式受影響，就必須在該 Id 中再進行那些少宣告的樣式的宣告，簡單說就是「既然被改了，就再改回來就好了。」這樣。

第三種「 div.eg01 span { color:green; size:100%; }」，則是只會對其 Class 名稱為 eg01 的 DIV 標籤，其底下的 SPAN 標籤進行套用。

  • 在此要說明一些事
    • Id 跟 Class 的名稱都會區分大小寫，所以請注意你的大小寫有沒有寫錯。
    • 另外 id 跟 class 名稱的命名絕對不要用數字開頭（也別用中日文等的來命名），那樣是無法作用的。
    • 另外若想對多數標籤下同一種樣式，可以像這個樣子寫， HTML 標籤放你想放的，不必照這兒寫的。「hr, table, th, td { border:1px solid #000000; }」
    • Id 跟 Class 不一定要接在標籤後，成「標籤.Class」之類的型式，這樣子只是為了要將其指定給某標籤用時才會這樣寫，基本上也可以只寫「.Class」這樣。
    • 還有 class 可以做到 Tag01.ClassName01 、 Tag02.ClassName01 這種單一 ClassName 對應多重 Tag（標籤）的功能，但是 ID 是沒辦法的，在使用上也請注意一下。
Retrieved from "https://www.andcycle.idv.tw/mediawiki/index.php?title=Computer:_Makeuper:_CSS:_Step01&oldid=1730"