Computer: Makeuper: CSS: Outline - Revision history

Wini: 回復至未受 Spammer 破壞前

2006-02-26T21:38:06Z

回復至未受 Spammer 破壞前

Show changes

222.105.28.47 at 05:12, 23 February 2006

2006-02-23T05:12:20Z

Show changes

Wini: /* 簡單呈現CSS的用處 */

2005-01-23T03:36:03Z

簡單呈現CSS的用處

← Older revision		Revision as of 03:36, 23 January 2005
Line 63:		Line 63:

	*也就是說， CSS 的重點在於		*也就是說， CSS 的重點在於
	*#把 HTML 文件中指定外觀的語法（即 HTML 中的標籤 tag 中的屬性 ~~property~~ 及其值 value）抽離，並替換上用 CSS 定義過樣式的 CLASS 及 ID 的名稱，來將 CSS 的樣式套用進各「元素 element」中。		*#把 HTML 文件中指定外觀的語法（即 HTML 中的標籤 tag 中的屬性 attribute 及其值 value）抽離，並替換上用 CSS 定義過樣式的 CLASS 及 ID 的名稱，來將 CSS 的樣式套用進各「元素 element」中。
	*#並且利用定義 HTML 文件中的 element 所套用的 CLASS 及 ID 的方式，以達到套用同一個 CLASS 及 ID 的 element 的樣式能夠被一致化。		*#並且利用定義 HTML 文件中的 element 所套用的 CLASS 及 ID 的方式，以達到套用同一個 CLASS 及 ID 的 element 的樣式能夠被一致化。
	*#另外 CSS 的能玩的花樣也比 HTML 的屬性多很多這樣。		*#另外 CSS 的能玩的花樣也比 HTML 的屬性多很多這樣。



	= 使用CSS時的基本用語 =		= 使用CSS時的基本用語 =

Wini: /* CSS */

2005-01-22T21:30:12Z

CSS

← Older revision		Revision as of 21:30, 22 January 2005
Line 7:		Line 7:
	= CSS =		= CSS =

	CSS ~~是「階層式樣式表【Cascading~~ Style ~~Sheet】」的縮寫。是用來定義 HTML 的畫面效果，如文字顏色、畫面背景、各元素的框線、排版、滑鼠效果等樣式用的。~~		CSS 是「[http://www.google.com.tw/search?hl=zh-TW&q=%E9%9A%8E%E5%B1%A4%E5%BC%8F%E6%A8%A3%E5%BC%8F%E8%A1%A8&btnG=%E6%90%9C%E5%B0%8B&meta= 階層式樣式表]【[http://www.google.com.tw/search?hl=zh-TW&q=Cascading+Style+Sheets&btnG=%E6%90%9C%E5%B0%8B&meta= Cascading Style Sheets]】」的縮寫。


			是用來定義 HTML 的畫面效果，如文字顏色、畫面背景、各元素的框線、排版、滑鼠效果等樣式用的。

	= 簡單呈現CSS的用處 =		= 簡單呈現CSS的用處 =

Wini at 21:27, 22 January 2005

2005-01-22T21:27:23Z

@@ Line 1: / Line 1: @@
 ----
-回到 [[Computer]] ‧ 回到 [[Computer: Makeuper]]
+= CSS =
-回到 [[Computer: Makeuper: CSS]]
+CSS 是「階層式樣式表【Cascading Style Sheet】」的縮寫。是用來定義 HTML 的畫面效果，如文字顏色、畫面背景、各元素的框線、排版、滑鼠效果等樣式用的。
 = 簡單呈現CSS的用處 =
@@ Line 60: / Line 60: @@
 </div>
-這樣一來，本來要逐項修改底下同樣式的字體顏色跟字體大小的，但用了 CSS 後只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><OL></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><LI></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 文件中指定外觀的語法抽離，而用 CSS 的 CLASS 及 ID 對區塊進行命名，並且利用定義一個個的區塊的方式，以達到修改套用同一樣式的標籤時的便利性。</font>
+這樣一來，本來要逐項修改底下同樣式的字體顏色跟字體大小的，但用了 CSS 後只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><OL></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><LI></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了。
-CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。
+= 各瀏覽器之間的差異 =
-而使用 CSS 時，必須要先瞭解「區塊」的概念。
+另外因為 Internet Explorer 6.0 以下對 CSS 的某些重要的樣式並不進行支援，所以在使用時請自行衡量一下，以免寫出來的網頁有人看來變得亂七八糟就有點尷尬了，該注意的樣式會在說到時提醒各位的，不必太擔心。
-區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<nowiki><body> </body></nowiki>」或「<nowiki><p> </p></nowiki>」還有「<nowiki><div> </div></nowiki>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。
+想嘹解「各瀏覽器對CSS的支援度」可以看[[Computer: Makeuper: CSS: Step07|這一頁]]。
 = 好孩子的CSS講義其目錄 =
@@ Line 93: / Line 137: @@
 ***[[Computer: Makeuper: CSS: Ex03|製作各類表格]]
 ***[[Computer: Makeuper: CSS: Ex04|製作正體中文的注音標示及日文的ふりがな標示]]

211.76.98.133: /* 其它CSS的基本介紹 */

2005-01-20T22:58:51Z

其它CSS的基本介紹

← Older revision		Revision as of 22:58, 20 January 2005
Line 68:		Line 68:
	CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。		CSS 是必須要嚴格要求其寫法的，在「套用 CSS 樣式至文件中」這章會說明其規則。

	而使用 CSS ~~時，必須要先嘹解「區塊」的概念。~~		而使用 CSS 時，必須要先瞭解「區塊」的概念。

	區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<nowiki><body> </body></nowiki>」或「<nowiki><p> </p></nowiki>」還有「<nowiki><div> </div></nowiki>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。		區塊簡單說是以成對的 HTML 標籤所圍起的一個區域，如「<nowiki><body> </body></nowiki>」或「<nowiki><p> </p></nowiki>」還有「<nowiki><div> </div></nowiki>」等的都算，你可以利用如上面那個例子所說明的，在這些標籤內加入個 ClassName 來套用 CSS 樣式，以對該區塊進行樣式的設定。

Wini: /* 簡單呈現CSS的用處 */

2004-11-04T14:46:46Z

簡單呈現CSS的用處

← Older revision		Revision as of 14:46, 4 November 2004
Line 60:		Line 60:
	</div>		</div>

	這樣一來，本來要逐項修改底下同樣式的字體顏色跟字體大小的，但用了 CSS 後只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><OL></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><LI></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML ~~標籤中的 HTML 語法給拿出來，而用~~ CSS 的 CLASS 及 ID 對區塊進行命名，並且利用定義一個個的區塊的方式，以達到修改套用同一樣式的標籤時的便利性。</font>		這樣一來，本來要逐項修改底下同樣式的字體顏色跟字體大小的，但用了 CSS 後只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><OL></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><LI></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 文件中指定外觀的語法抽離，而用 CSS 的 CLASS 及 ID 對區塊進行命名，並且利用定義一個個的區塊的方式，以達到修改套用同一樣式的標籤時的便利性。</font>

	----		----

Wini: /* 簡單呈現CSS的用處 */

2004-11-03T14:17:06Z

簡單呈現CSS的用處

← Older revision		Revision as of 14:17, 3 November 2004
Line 16:		Line 16:

	<div style="background-color:#dddddd;padding:2%;">		<div style="background-color:#dddddd;padding:2%;">
	<nowiki><html></nowiki><br>		<nowiki><html></nowiki><br />
	<nowiki><head></nowiki><br>		<nowiki><head></nowiki><br />
	<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 />
	<nowiki></head></nowiki><br>		<nowiki></head></nowiki><br />
	<nowiki><body></nowiki><br>		<nowiki><body></nowiki><br />
	<nowiki><font color="red" size="100%">example_01</font><br></nowiki><br>		<nowiki><ol></nowiki><br />
	<nowiki><font color="red" size="100%">example_02</font><br></nowiki><br>		<nowiki><li><font color="red" size="100%">example_01</font></li></nowiki><br />
	<nowiki><font color="red" size="100%">example_03</font><br></nowiki><br>		<nowiki><li><font color="red" size="100%">example_02</font></li></nowiki><br />
	<nowiki><font color="red" size="100%">example_04</font><br></nowiki><br>		<nowiki><li><font color="red" size="100%">example_03</font></li></nowiki><br />
	<nowiki><font color="red" size="100%">example_05</font><br></nowiki><br>		<nowiki><li><font color="red" size="100%">example_04</font></li></nowiki><br />
	<nowiki></body></nowiki><br>		<nowiki><li><font color="red" size="100%">example_05</font></li></nowiki><br />
	<nowiki></html></nowiki><br>		<nowiki></ol></nowiki><br />
			<nowiki></body></nowiki><br />
			<nowiki></html></nowiki><br />
	</div>		</div>

Line 33:		Line 35:

	<div style="background-color:#dddddd;padding:2%;">		<div style="background-color:#dddddd;padding:2%;">
	<nowiki><html></nowiki><br>		<nowiki><html></nowiki><br />
	<nowiki><head></nowiki><br>		<nowiki><head></nowiki><br />
	<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><style type="text/css"></nowiki><br />
	<nowiki><!--</nowiki><br>		<nowiki><!--</nowiki><br />
	<nowiki>~~div~~.eg01 ~~span~~ { color:red; font-size:100%; }</nowiki><br>		<nowiki>ol.eg01 li { color:red; font-size:100%; }</nowiki><br />
	<nowiki>--></nowiki><br>		<nowiki>--></nowiki><br />
	<nowiki></style></nowiki><br>		<nowiki></style></nowiki><br />
	</div>		</div>
	<nowiki></head></nowiki><br>		<nowiki></head></nowiki><br />
	<nowiki><body></nowiki><br>		<nowiki><body></nowiki><br />
	<div style="background-color:#ffdddd;">		<div style="background-color:#ffdddd;">
	<nowiki><~~div~~ class="eg01"></nowiki><br>		<nowiki><ol class="eg01"></nowiki><br />
			<nowiki><li>example_01</li></nowiki><br />
			<nowiki><li>example_02</li></nowiki><br />
			<nowiki><li>example_03</li></nowiki><br />
			<nowiki><li>example_04</li></nowiki><br />
			<nowiki><li>example_05</li></nowiki><br />
			<nowiki></ol></nowiki><br />
	</div>		</div>
	<nowiki>~~<span>example_01~~</~~span><br~~></nowiki><br>		<nowiki></body></nowiki><br />
	~~<nowiki><span>example_02</span><br><~~/~~nowiki><br~~>		<nowiki></html></nowiki><br />
	<nowiki>~~<span>example_03~~</~~span><br></nowiki><br>~~
	~~<nowiki><span>example_04</span><br></nowiki><br>~~
	~~<nowiki><span>example_05</span><br></nowiki><br>~~
	~~<div style="background-color:#ffdddd;">~~
	~~<nowiki></div~~></nowiki><br>
	</~~div>~~
	~~<nowiki></body></nowiki><br>~~
	~~<nowiki></html></nowiki><br~~>
	</div>		</div>

	~~可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理~~ <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><~~DIV~~></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><~~SPAN~~></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID ~~來代替，以達到修改時的便利性。~~</font>		這樣一來，本來要逐項修改底下同樣式的字體顏色跟字體大小的，但用了 CSS 後只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><OL></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><LI></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID 對區塊進行命名，並且利用定義一個個的區塊的方式，以達到修改套用同一樣式的標籤時的便利性。</font>

	----		----

Wini: /* 簡單呈現CSS的用處 */

2004-10-28T13:16:39Z

簡單呈現CSS的用處

← Older revision		Revision as of 13:16, 28 October 2004
Line 60:		Line 60:
	</div>		</div>

	可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><DIV></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><~~FONT~~></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID 來代替，以達到修改時的便利性。</font>		可能有人會覺得好像變長了，不過其實並沒有變多，反而變得更少更好修改了，只要去處理 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法，那麼在被宣告 CLASS 為 eg01 的 <nowiki><DIV></nowiki> 底下的所有未被宣告其它 CLASS 與 ID 的 <nowiki><SPAN></nowiki> 就通通會依照 <nowiki><head></nowiki> 處的 <nowiki><style type="text/css"></nowiki> 處的 CSS 語法所宣告的內容而變化了，也就是說， CSS 的重點在於<font color="red">把 HTML 標籤中的 HTML 語法給拿出來，而用 CSS 的 CLASS 及 ID 來代替，以達到修改時的便利性。</font>

	----		----

Wini: /* 簡單呈現CSS的用處 */

2004-10-14T15:04:09Z

簡單呈現CSS的用處

← Older revision		Revision as of 15:04, 14 October 2004
Line 37:		Line 37:
	<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.eg01 span { color:red; font-size:100%; }</nowiki><br>		<nowiki>div.eg01 span { color:red; font-size:100%; }</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>