Computer: Makeuper: CSS: Step01 - Revision history

Wini: Reverted edits by 61.144.122.45 (Talk); changed back to last version by Wini

2007-04-13T05:31:14Z

Reverted edits by 61.144.122.45 (Talk); changed back to last version by Wini

← Older revision		Revision as of 05:31, 13 April 2007
Line 127:		Line 127:
	= 在 HTML 文件的 HEAD 處使用匯入檔 =		= 在 HTML 文件的 HEAD 處使用匯入檔 =

	在 HTML 檔中的		在 HTML 檔中的 <STYLE> 與 </STYLE> 之間加入

			''' @import URL("樣式檔位址") ; '''

			若 HTML 文件中有指定同樣的 id 或 class 名稱時，

			會採以下優先順序來選擇要套用何者的樣式

			# HTML 標籤內所指定的
			# HEAD 處的 style 標籤所指定的
			# @import 所指定的
			# HEAD 處的 link 標籤所指定的

			以上四種皆可混合使用。

			----

61.144.122.45 at 14:25, 12 April 2007

2007-04-12T14:25:43Z

← Older revision		Revision as of 14:25, 12 April 2007
Line 127:		Line 127:
	= 在 HTML 文件的 HEAD 處使用匯入檔 =		= 在 HTML 文件的 HEAD 處使用匯入檔 =

	在 HTML 檔中的 ~~<STYLE> 與 </STYLE> 之間加入~~		在 HTML 檔中的

	~~''' @import URL("樣式檔位址") ; '''~~

	~~若 HTML 文件中有指定同樣的 id 或 class 名稱時，~~

	~~會採以下優先順序來選擇要套用何者的樣式~~

	~~# HTML 標籤內所指定的~~
	~~# HEAD 處的 style 標籤所指定的~~
	~~# @import 所指定的~~
	~~# HEAD 處的 link 標籤所指定的~~

	~~以上四種皆可混合使用。~~

	~~----~~

Wini: /* 在HTML的HEAD處進行宣告 */

2005-01-22T21:39:41Z

在HTML的HEAD處進行宣告

← Older revision		Revision as of 21:39, 22 January 2005
Line 44:		Line 44:
	<div style="background-color:#ffdddd;">		<div style="background-color:#ffdddd;">
	<nowiki><div></nowiki><br>		<nowiki><div></nowiki><br>
	<nowiki>我們是被定義為紅色顏色(color)~~的DIV區塊下的字體，其字型大小~~(font-size)為 100% 。<br></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區塊下的字體，其字型大小為~~ 100% 。<br></nowiki><br>		<nowiki>我們是被定義為紅色字體的DIV元素下的字體，其字型大小為 100% 。<br></nowiki><br>
	<nowiki></div></nowiki><br>		<nowiki></div></nowiki><br>
	</div>		</div>
Line 58:		Line 58:
	<div style="background-color:#ddffdd;">		<div style="background-color:#ddffdd;">
	<nowiki><div class="eg01"></nowiki><br>		<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><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>我因為不是 SPAN 標籤而遭人排擠，所以就算是在這個 DIV ~~區塊下，還是只能用對全~~ DIV 下定義的那個樣式。（泣）</nowiki><br>		<nowiki>我因為不是 SPAN 標籤而遭人排擠，所以就算是在這個 DIV 元素下，還是只能用對全 DIV 下定義的那個樣式。（泣）</nowiki><br>
	<nowiki></div></nowiki><br>		<nowiki></div></nowiki><br>
	</div>		</div>
Line 74:		Line 74:
	而其內部最上跟最下那兩行的「<font color="green"><nowiki><!--</nowiki></font>」及「<font color="green"><nowiki>--></nowiki></font>」是用來避免有人的瀏覽器不支援 CSS 時，可以將其無視掉，而不會不小心變成顯示那堆 CSS 樣式的定義文字在畫面上（簡單說那是HTML中的備註字元啦）。		而其內部最上跟最下那兩行的「<font color="green"><nowiki><!--</nowiki></font>」及「<font color="green"><nowiki>--></nowiki></font>」是用來避免有人的瀏覽器不支援 CSS 時，可以將其無視掉，而不會不小心變成顯示那堆 CSS 樣式的定義文字在畫面上（簡單說那是HTML中的備註字元啦）。

	依照「<font color="green">~~HTML標籤~~ { ~~CSS樣式名稱~~:~~CSS樣式屬性~~; }</font>」這樣的寫法便行作用了。		依照「<font color="green">CLASS或ID之名稱 { CSS樣式屬性:CSS樣式屬性的值; }</font>」這樣的寫法便行作用了。

	~~在此要說明其套用的規則，以及~~ Class 和 Id 這兩樣東西。		在此要再進一步地說明其套用的規則，以及 Class 和 Id 這兩樣東西。

	在 HEAD 處，你可以看到三種樣式，即「<nowiki>div { color:red; font-size:100%; }</nowiki>」、「		在 HEAD 處，你可以看到三種樣式，即「<nowiki>div { color:red; font-size:100%; }</nowiki>」、「
Line 82:		Line 82:
	<nowiki>div.eg01 span { color:green; font-size:100%; }</nowiki>」。		<nowiki>div.eg01 span { color:green; font-size:100%; }</nowiki>」。

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

	第一種「<nowiki>div { color:red; font-size:100%; }</nowiki>」，會將此份文件中，所有的 <font color="red">DIV</font> 標籤都給套用上此樣式。		第一種「<nowiki>div { color:red; font-size:100%; }</nowiki>」，會將此份文件中，所有的 <font color="red">DIV</font> 標籤都給套用上此樣式。
Line 96:		Line 96:
	**另外 id 跟 class 名稱的命名絕對不要用數字開頭（也別用中日文等的來命名），那樣是無法作用的。		**另外 id 跟 class 名稱的命名絕對不要用數字開頭（也別用中日文等的來命名），那樣是無法作用的。
	**另外若想對多數標籤下同一種樣式，可以像這個樣子寫， HTML 標籤放你想放的，不必照這兒寫的。「<font color="green"><nowiki>hr, table, th, td { border:1px solid #000000; }</nowiki></font>」		**另外若想對多數標籤下同一種樣式，可以像這個樣子寫， HTML 標籤放你想放的，不必照這兒寫的。「<font color="green"><nowiki>hr, table, th, td { border:1px solid #000000; }</nowiki></font>」
	**Id 跟 Class ~~不一定要接在標籤後，成「標籤~~.Class」之類的型式，這樣子只是為了要將其指定給某標籤用時才會這樣寫，基本上也可以只寫「.Class」這樣。		**Id 跟 Class 不一定要接在標籤後，而變成「標籤.Class」之類的型式，這樣子只是為了要將其指定給某標籤用時才會這樣寫，基本上也可以只寫「.Class」這樣。
	**還有 class 可以做到 Tag01.ClassName01 、 Tag02.ClassName01 這種單一 ClassName 對應多重 Tag（標籤）的功能，但是 Id ~~是沒辦法的，不過~~ Id 依然可以做到 Tag.Id 這樣子，這點在使用上也請注意一下。		**還有 class 可以做到 Tag01.ClassName01 、 Tag02.ClassName01 這種單一 ClassName 對應多重 Tag（標籤）的功能，但是 Id 是沒辦法的一份文件只能出現一個唯一名稱的 Id 而已，不過 Id 依然可以做到 Tag.Id 這樣子，這點在使用上也請注意一下。

			另外有人會使用 meta 標籤來定義文件中出現的 style 標籤的「類型 type」，這點請看「[[Computer: Makeuper: HTML: Ex03\|meta的用處]]」的說明。

	----		----

Wini: /* 在 HTML 文件的 HEAD 處使用匯入檔 */

2005-01-10T07:16:42Z

在 HTML 文件的 HEAD 處使用匯入檔

← Older revision		Revision as of 07:16, 10 January 2005
Line 129:		Line 129:
	''' @import URL("樣式檔位址") ; '''		''' @import URL("樣式檔位址") ; '''

	~~這種匯入檔的順度是絕對優先的，若~~ HTML 文件中有指定同樣的 id 或 class 名稱時，		若 HTML 文件中有指定同樣的 id 或 class 名稱時，

	會採以下優先順序來選擇要套用何者的樣式		會採以下優先順序來選擇要套用何者的樣式

Wini: /* 在HTML的HEAD處使用匯入檔 */

2005-01-10T07:16:10Z

在HTML的HEAD處使用匯入檔

← Older revision		Revision as of 07:16, 10 January 2005
Line 123:		Line 123:
	----		----

	= ~~在HTML的HEAD處使用匯入檔~~ =		= 在 HTML 文件的 HEAD 處使用匯入檔 =

	~~（以下暫時取自 [http:~~/~~/chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm W3C] 的教學，待我搞清楚其用意為何後再行說明。）~~		在 HTML 檔中的 <STYLE> 與 </STYLE> 之間加入

	~~第六種方式為匯入檔~~		''' @import URL("樣式檔位址") ; '''

	~~與第二種方式類似,先建好CSS樣式檔~~		這種匯入檔的順度是絕對優先的，若 HTML 文件中有指定同樣的 id 或 class 名稱時，

	~~在HTML檔中<STYLE>與</STYLE>之間加入~~		會採以下優先順序來選擇要套用何者的樣式

	@import ~~URL("樣式檔位址") ;~~		# HTML 標籤內所指定的
			# HEAD 處的 style 標籤所指定的
			# @import 所指定的
			# HEAD 處的 link 標籤所指定的

	~~此指令只能用在<STYLE>標籤中。這樣做的好處是多份網頁可共用同一份CSS設定檔，不用每份網頁重複一次。~~		以上四種皆可混合使用。

	~~三種方式可以混合使用~~

	----		----

Wini: /* 在HTML的HEAD處進行宣告 */

2004-10-14T15:03:53Z

在HTML的HEAD處進行宣告

← Older revision		Revision as of 15:03, 14 October 2004
Line 32:		Line 32:
	<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br>		<nowiki><meta http-equiv="content-type" content="text/html; charset=big5"></nowiki><br>
	<div style="background-color:#aadddd;">		<div style="background-color:#aadddd;">
			<nowiki><style type="text/css"></nowiki><br>
	<nowiki><!--</nowiki><br>		<nowiki><!--</nowiki><br>
	~~<nowiki><style type="text/css"></nowiki><br>~~
	<nowiki>div { color:red; font-size:100%; }</nowiki><br>		<nowiki>div { color:red; font-size:100%; }</nowiki><br>
	<nowiki>#eg01 { color:blue; font-size:120%; }</nowiki><br>		<nowiki>#eg01 { color:blue; font-size:120%; }</nowiki><br>
	<nowiki>div.eg01 span { color:green; font-size:180%; }</nowiki><br>		<nowiki>div.eg01 span { color:green; font-size:180%; }</nowiki><br>
			<nowiki>--></nowiki><br>
	<nowiki></style></nowiki><br>		<nowiki></style></nowiki><br>
	~~<nowiki>--></nowiki><br>~~
	</div>		</div>
	<nowiki></head></nowiki><br>		<nowiki></head></nowiki><br>
Line 68:		Line 68:
	</div>		</div>

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

			<font color="green"><nowiki><style type="text/css"> 和 </style></nowiki></font> 中間所夾的便是 CSS 的樣式所套用到的 HTML 中的標籤名稱及其樣式了。

			而其內部最上跟最下那兩行的「<font color="green"><nowiki><!--</nowiki></font>」及「<font color="green"><nowiki>--></nowiki></font>」是用來避免有人的瀏覽器不支援 CSS 時，可以將其無視掉，而不會不小心變成顯示那堆 CSS 樣式的定義文字在畫面上（簡單說那是HTML中的備註字元啦）。

			依照「<font color="green">HTML標籤 { CSS樣式名稱:CSS樣式屬性; }</font>」這樣的寫法便行作用了。

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

Wini: /* 在HTML的HEAD處進行宣告 */

2004-10-14T14:58:33Z

在HTML的HEAD處進行宣告

← Older revision		Revision as of 14:58, 14 October 2004
Line 61:		Line 61:
	<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><span>我們是被定義為綠色字體的DIV區塊下SPAN區塊下的字體，其字型大小為 180% 。</span><br></nowiki><br>
			<nowiki>我因為不是 SPAN 標籤而遭人排擠，所以就算是在這個 DIV 區塊下，還是只能用對全 DIV 下定義的那個樣式。（泣）</nowiki><br>
	<nowiki></div></nowiki><br>		<nowiki></div></nowiki><br>
	</div>		</div>

Wini: /* 在HTML的HEAD處進行宣告 */

2004-10-14T14:54:44Z

在HTML的HEAD處進行宣告

← Older revision		Revision as of 14:54, 14 October 2004
Line 67:		Line 67:
	</div>		</div>

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

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

Wini: /* 在HTML的HEAD處進行宣告 */

2004-10-14T14:52:35Z

在HTML的HEAD處進行宣告

← Older revision		Revision as of 14:52, 14 October 2004
Line 67:		Line 67:
	</div>		</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>」這樣的寫法便行作用了。		亦即是在 <font color="green"><nowiki><head> </head></nowiki></font> 處加入較深藍色那一塊中所寫的東西即可將 CSS 樣式套入此 HTML 文件中。其上下的 <font color="green"><nowiki><!-- 及 --></nowiki></font> 是用來避免有人的瀏覽器不支援 CSS 時，可以將其無視掉，而不會不小心變成顯示那堆字在畫面上（簡單說那是HTML中的備註字元啦）。而 <font color="green"><nowiki><style type="text/css"> 和 </style></nowiki></font> 中間所夾的便是 CSS 的樣式所套用到的 HTML 中的標籤名稱及其樣式了，依照「<font color="green">HTML標籤 { CSS樣式名稱:CSS樣式屬性; }</font>」這樣的寫法便行作用了。

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

Wini: /* */

2004-10-14T14:50:35Z

← Older revision		Revision as of 14:50, 14 October 2004
Line 116:		Line 116:
	----		----

	= =		= 在HTML的HEAD處使用匯入檔 =

	（以下暫時取自 [http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm W3C] 的教學，待我搞清楚其用意為何後再行說明。）		（以下暫時取自 [http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm W3C] 的教學，待我搞清楚其用意為何後再行說明。）