https://www.andcycle.idv.tw/mediawiki/api.php?action=feedcontributions&feedformat=atom&user=61.144.122.45
TestingMediawiki - User contributions [en]
2026-05-02T01:48:43Z
User contributions
MediaWiki 1.43.3
https://www.andcycle.idv.tw/mediawiki/index.php?title=Computer:_Makeuper:_CSS:_Step01&diff=11545
Computer: Makeuper: CSS: Step01
2007-04-12T14:25:43Z
<p>61.144.122.45: </p>
<hr />
<div>----<br />
<br />
回到 [[Computer]] ‧ 回到 [[Computer: Makeuper]]<br>回到 [[Computer: Makeuper: CSS]]<br />
<br />
----<br />
<br />
將CSS套用至你的網頁中吧！<br />
<br />
<font color="#ff4444">（請邊開你的網頁編輯軟體邊把源碼給複製貼上以嘹解其顯示出的結果為何）</font><br />
<br />
----<br />
<br />
= 在HTML的標籤中套用樣式 =<br />
<br />
例如想在 <font color="green"><nowiki><p> </p></nowiki></font> 中套用字體顏色的樣式，只要在你的 <font color="#ff4444">*.html</font> 等的檔案中的標籤這樣寫就行了。<br />
<br />
<div style="background-color:#dddddd;padding:2%;"><nowiki><p style="color:blue;">我是被CSS給變成藍色的字呀！</p></nowiki></div><br />
<br />
亦即是加入「<font color="#ff4444">style=" "</font>」，就可以進行 CSS 樣式的定義了。<br />
<br />
要定義樣式時，前面要寫樣式名稱，中間則是用冒號「:」，與後面的樣式屬性隔開，各個樣式之間請用「;」分隔開來。<br />
<br />
----<br />
<br />
= 在HTML的HEAD處進行宣告 =<br />
<br />
HTML 文件中的 <font color="green"><nowiki><head> </head></nowiki></font> 之間是用來寫不會顯示在畫面上的一些資訊用的，你可以在此處宣告 CSS 樣式。<br />
<br />
<div style="background-color:#dddddd;padding:2%;"><br />
<nowiki><html></nowiki><br><br />
<nowiki><head></nowiki><br><br />
<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br><br />
<div style="background-color:#aadddd;"><br />
<nowiki><style type="text/css"></nowiki><br><br />
<nowiki><!--</nowiki><br><br />
<nowiki>div { color:red; font-size:100%; }</nowiki><br><br />
<nowiki>#eg01 { color:blue; font-size:120%; }</nowiki><br><br />
<nowiki>div.eg01 span { color:green; font-size:180%; }</nowiki><br><br />
<nowiki>--></nowiki><br><br />
<nowiki></style></nowiki><br><br />
</div><br />
<nowiki></head></nowiki><br><br />
<nowiki><body></nowiki><br><br />
<div style="background-color:#ffdddd;"><br />
<nowiki><div></nowiki><br><br />
<nowiki>我們是被定義為紅色顏色(color)的DIV元素下的字體，其字型大小(font-size)為 100% 。<br></nowiki><br><br />
<nowiki>我們是被定義為紅色字體的DIV元素下的字體，其字型大小為 100% 。<br></nowiki><br><br />
<nowiki>我們是被定義為紅色字體的DIV元素下的字體，其字型大小為 100% 。<br></nowiki><br><br />
<nowiki></div></nowiki><br><br />
</div><br />
<div style="background-color:#ddddff;"><br />
<nowiki><div id="eg01"></nowiki><br><br />
<nowiki>我們是被定義為藍色字體的字體，其字型大小為 120% 。<br></nowiki><br><br />
<nowiki>我們是被定義為藍色字體的字體，其字型大小為 120% 。<br></nowiki><br><br />
<nowiki>我們是被定義為藍色字體的字體，其字型大小為 120% 。<br></nowiki><br><br />
<nowiki></div></nowiki><br><br />
</div><br />
<div style="background-color:#ddffdd;"><br />
<nowiki><div class="eg01"></nowiki><br><br />
<nowiki><span>我們是被定義為綠色字體的DIV元素下SPAN元素下的字體，其字型大小為 180% 。</span><br></nowiki><br><br />
<nowiki><span>我們是被定義為綠色字體的DIV元素下SPAN元素下的字體，其字型大小為 180% 。</span><br></nowiki><br><br />
<nowiki><span>我們是被定義為綠色字體的DIV元素下SPAN元素下的字體，其字型大小為 180% 。</span><br></nowiki><br><br />
<nowiki>我因為不是 SPAN 標籤而遭人排擠，所以就算是在這個 DIV 元素下，還是只能用對全 DIV 下定義的那個樣式。（泣）</nowiki><br><br />
<nowiki></div></nowiki><br><br />
</div><br />
<nowiki></body></nowiki><br><br />
<nowiki></html></nowiki><br><br />
</div><br />
<br />
亦即是在 <font color="green"><nowiki><head> </head></nowiki></font> 處加入較深藍色那一塊中所寫的東西即可將 CSS 樣式套入此 HTML 文件中。<br />
<br />
<font color="green"><nowiki><style type="text/css"> 和 </style></nowiki></font> 中間所夾的便是 CSS 的樣式所套用到的 HTML 中的標籤名稱及其樣式了。<br />
<br />
而其內部最上跟最下那兩行的「<font color="green"><nowiki><!--</nowiki></font>」及「<font color="green"><nowiki>--></nowiki></font>」是用來避免有人的瀏覽器不支援 CSS 時，可以將其無視掉，而不會不小心變成顯示那堆 CSS 樣式的定義文字在畫面上（簡單說那是HTML中的備註字元啦）。<br />
<br />
依照「<font color="green">CLASS或ID之名稱 { CSS樣式屬性:CSS樣式屬性的值; }</font>」這樣的寫法便行作用了。<br />
<br />
在此要再進一步地說明其套用的規則，以及 Class 和 Id 這兩樣東西。<br />
<br />
在 HEAD 處，你可以看到三種樣式，即「<nowiki>div { color:red; font-size:100%; }</nowiki>」、「<br />
<nowiki>#eg01 { color:blue; font-size:100%; }</nowiki>」和「<br />
<nowiki>div.eg01 span { color:green; font-size:100%; }</nowiki>」。<br />
<br />
這三者分別對應到「<nowiki><div></nowiki>」、「<nowiki><div id="eg01></nowiki>」以及「<nowiki><div class="eg01"></nowiki>」三個淡紅、淡藍、淡綠的元素。<br />
<br />
第一種「<nowiki>div { color:red; font-size:100%; }</nowiki>」，會將此份文件中，所有的 <font color="red">DIV</font> 標籤都給套用上此樣式。<br />
<br />
第二種「<br />
<nowiki>#eg01 { color:blue; font-size:100%; }</nowiki>」，則是只會對其 Id 名稱為 eg01 的 <font color="red">任何</font> 標籤進行套用。不過要注意，如果你之前有對全 DIV 標籤進行樣式的定義（此例中以DIV為例，所以就拿DIV來說明了。），而這個 DIV 所引用的 Id 所定義的項目又比其少的話，依然還是會受到該全 DIV 樣式宣告的影響，所以碰上此情況時，如果不希望該 Id 的樣式受影響，就必須在該 Id 中再進行那些少宣告的樣式的宣告，簡單說就是「既然被改了，就再改回來就好了。」這樣。<br />
<br />
第三種「<br />
<nowiki>div.eg01 span { color:green; font-size:100%; }</nowiki>」，則是只會對其 Class 名稱為 eg01 的 <font color="red">DIV</font> 標籤，其底下的 <font color="red">SPAN</font> 標籤進行套用。<br />
<br />
*在此要說明一些事<br />
**Id 跟 Class 的名稱都會區分大小寫，所以請注意你的大小寫有沒有寫錯。<br />
**另外 id 跟 class 名稱的命名絕對不要用數字開頭（也別用中日文等的來命名），那樣是無法作用的。<br />
**另外若想對多數標籤下同一種樣式，可以像這個樣子寫， HTML 標籤放你想放的，不必照這兒寫的。「<font color="green"><nowiki>hr, table, th, td { border:1px solid #000000; }</nowiki></font>」<br />
**Id 跟 Class 不一定要接在標籤後，而變成「標籤.Class」之類的型式，這樣子只是為了要將其指定給某標籤用時才會這樣寫，基本上也可以只寫「.Class」這樣。<br />
**還有 class 可以做到 Tag01.ClassName01 、 Tag02.ClassName01 這種單一 ClassName 對應多重 Tag（標籤）的功能，但是 Id 是沒辦法的一份文件只能出現一個唯一名稱的 Id 而已，不過 Id 依然可以做到 Tag.Id 這樣子，這點在使用上也請注意一下。<br />
<br />
另外有人會使用 meta 標籤來定義文件中出現的 style 標籤的「類型 type」，這點請看「[[Computer: Makeuper: HTML: Ex03|meta的用處]]」的說明。<br />
<br />
----<br />
<br />
= 從外部引入樣式檔（*.css）至HTML文件中 =<br />
<br />
首先先新建一個文件，將其副檔名改為「<font color="red">css</font>」，此時你便建好了一個 CSS 的樣式檔案了。<br />
<br />
接著在你的 HTML 文件中的 HEAD 處加入下面這行語法，便能將該樣式檔套用在該 HTML 文件上面了。<br />
<br />
<div style="background-color:#dddddd;padding:2%;"><nowiki><Link REL=stylesheet TYPE="text/css" HREF="檔名.css"></nowiki></div><br />
<br />
接著全都跟前面說的差不多，只是要注意的是，樣式檔中只能有 <font color="red">CSS的語法</font> 出現而已，要是放入 HTML 標籤或是多餘的字進去可是會出問題的。如果想在樣式檔中加入備註，請用「<font color="green"><nowiki>/*</nowiki></font>」及「<font color="green"><nowiki>*/</nowiki></font>」夾住想備註的文字。<br />
<br />
你的樣式檔應該是長成類似這樣子。<br />
<br />
<div style="background-color:#dddddd;padding:2%;"><br />
<nowiki>body { background-color:#aaaaaa; font-size:100%; font-family:serif; }</nowiki><br><br />
<nowiki> </nowiki><br><br />
<nowiki>/* 我是可愛的備註文字哦！（羞） */</nowiki><br><br />
<nowiki> </nowiki><br><br />
<nowiki>p { line-height:200%; }</nowiki><br><br />
</div><br />
<br />
----<br />
<br />
= 在 HTML 文件的 HEAD 處使用匯入檔 =<br />
<br />
在 HTML 檔中的</div>
61.144.122.45