css(cascading style sheets) 串接樣式表上課講義

1

CSS(Cascading Style Sheets) 串接樣式表上課講義

本投影片資料來源：（ 1 ） CSS 基本概念：台大計中許凱平 [email protected] http://ccms.ntu.edu.tw/~kphsu（ 2 ） CSS 範例：博碩出版社，『最新詳解 JavaScript&HTML&CSS 語法辭典 - 增訂新版』

2

何謂樣式表 (Style Sheets)?

風格樣式表體裁紙如字體、顏色、大小

用途控制文件在媒體上顯示的風格

媒體電腦螢幕、電視、紙張、手機、聲音

理念將文件的內容 (contenet) 與格式 (format) 分開

3

微軟 OFFICE 系列軟體中的樣式

Word 巨集、樣式

Powerpoint 投影片母片

Front Page 樣式表

4

CSS 的優點 ( 一 )

專業分工由專業人員負責風格設計其他人只要負責內容即可讓文件呈現一致的風格

共享可重複使用具有繼承的概念

5

CSS 的優點 ( 二 )

效率減少文件大小、節省網路頻寬

容易製作、容易維護為一般文字格式用普通編輯器即可撰寫

6

CSS 的優點 ( 三 )

可程式控制可在程式中動態改變樣式

可合理退化 UA 自動忽略尚未支援的屬性

7

標示

• 邏輯性標示- 地址

• 描述性標示- 標題一

• 特殊標示- 在選定範圍上直接指定格式

8

樣式表語言 (Style Sheet languages) CSS

Cascading Style Sheets XSL( 配合 XML 使用 )

Extensible Stylesheet Language 使用原則

能夠用 CSS 做到的就不要用 XSL

9

年表

CCS1 (CSS Level 1) 是在 1996 年 12 月完成製定，並在 1999 年 1 月增修

CSS-P (CSS-Positioning)CSS 規格的一個延伸，可做絕對定位

CCS2 (CSS Level 2) 的規格在 1998 年 5 月完成製定，目前瀏覽器只支援其中的少許功能。

CSS3 目前正在發展中的規格

10

Cascading

Cascading Reader + inline + embedded + linked

Conflicts Reader > inline > embedded > linked

11

Style Sheet and Rule樣式表與規則

style sheet 樣式表 a collection of rules

由一群規則 (rule) 組成 rule 規則

Selector( 選取器 ) 的宣告 (declaration) 語法

selector { property : value; }選取器 { 特性 : 特性值 ; }

12

CSS 的使用方式

Inline ( 在元素 (Element) Level 內使用 )

<h1 style="color:red"> Embedded (File Level)---從 CSS檔案呼叫

<style type="text/css"> h1 {color:red} </style> Linked (interFile Level)--- 在 HTML 的 <head> 中的 <style> 內定義

<link rel="stylesheet" href="style/main.css"> Reader(browser) defined---- 由網頁瀏覽器選擇工具 /Internet 選項／

13

HTML 文件 <head> 內定義樣式<HTML>

<HEAD>

<LINK REL=STYLESHEET TYPE="text/css“

HREF="http://style.com/cool" TITLE="Cool"> <STYLE TYPE="text/css"> @import url(http://style.com/basic);

H1 { color: blue } </STYLE> </HEAD>

<BODY><H1>Headline is blue</H1> <P STYLE="color: green">

While the paragraph is green. </BODY>

</HTML>

14

連結樣式與標示 / 標籤 /元素( 一 ) Tag

H1 { COLOR: blue } Class

.LargerClass { FONT-SIZE: larger; }

ID #uid {COLOR: green }

15

連結樣式與標示 / 標籤 /元素( 二 ) Group

H1, H2 { COLOR: blue } Tag + Tag

TABLE TR{color:blue } Tag + Class

H1.LargerClass { FONT-SIZE: larger } Tag + ID

H1#uid {COLOR: green }

16

Display property

Block <div> 、 <p>

Inline <span> 、 <em>

list-item <li>

None 隱藏

17

CSS 的程式設計功能

<p

OnMouseOver=

" poweredBy.style.display='block' "

OnMouseOut=

" poweredBy.style.display='none' "

>

18

HTML 格式設定的基本概念

_______________________________________| margin (transparent) || _________________________________ || | border | || | ___________________________ | || | | padding | | || | | _____________________ | | || | | | content | | | || | | |_____________________| | | || | |___________________________| | || |_________________________________| ||_______________________________________|

19

範例

IPS (XML+XSL+CSS) http://kptest.cc.ntu.edu.tw/ips/

Tree 的製作 (XML+XSL+CSS) http://kptest.cc.ntu.edu.tw/webtech/

20

參考資料

W3C http://w3.org/

Style http://www.w3.org/Style/

CSS http://www.w3.org/Style/CSS/

21

參考資料

Microsoft MSDN Online http://www.microsoft.com/taiwan/msdn/

無廢話 XML http://2tigers.net/xml_book/

22

References

Chinese XML Now! http://www.ascc.net/xml/

23

一些有用的 CSS教學網站凱哥的無名相簿(HTML+CSS)教學，從這裡可以連到其它中文教學於資

源網站 CSS語法測試實驗網站 CSS ZenGarden—CSS 版面設計必訪之地 CSS PLAY—CSS 語法查詢與範例 glish-- 學習 CSS 版面設計技巧的好去處 Thefixor – CSS 資源大本營 Little Boxes – CSS 版面設計經典原始碼，以圖解方式說明 CSS Drive – CSS相關網站的連結站與資源蒐集 Webcreme – 很多 CSS 版面設計與配色參考 Oswd – Open Source Web Design ，蒐集上千個 CSS 網網站範本讓你參考

美麗的 CSS 版面範例參考 csslove cssBeauty cssmania cssimport unmatched style webstandard awards Dark Eye

24

一些有用的 HTML 與 CSS教學網站 Tsung's Blog

HTML 語法教學 html 語法教學區 HTML 教學目錄 HTML CSS JavaScript 語法教學 HTML 語法測試區 CSS 語法教學 css css 語法教學 ^_^ 包含無名小站的設定教學喔！ CSS 語法參考辭典無名 css 語法教學無名 css 語法教學 Tjun 的小小小空間 - 簡單的無名 CSS 教學（給初學者） Keigo- 凱哥‘ s 無名相簿語法 (CSS+Html) 教學 Xuite CSS教學、樣式與問題整理 CSS教學：自訂無名小站的 CSS 樣式 (相關網站連結整理 )

25

CSS 範例

資料來源：博碩出版社，『最新詳解 JavaScript&HTML&CSS 語法辭典 - 增訂新版』

26

第一部份 CSS 的組成 01.01 讀取 CSS檔案<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>CSS 的編寫 </title><link rel="stylesheet" href="default.css" type="text/css"></head><body><h1>CSS 的編寫 </h1><p>將 HTML 文書編寫成樣式表，有以下三種方法。其中之一是在其他檔案中只記述樣式表，然後讀取。剩餘的兩個方法則是在 HTML 文書中直接編寫樣式表。</p></body></html>

27

01.02 CSS 的組成<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>CSS 的編寫 </title><link rel="stylesheet" href="default.css" type="text/css"></head> <body><h1>CSS 的編寫 </h1><p>將 HTML 文書編寫成樣式表，有以下三種方法。其中之一是在其他檔案中只記述樣式表，然後讀取。剩餘的兩個方法則是在 HTML 文書中直接編寫樣式表。</p></body></html

><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>CSS 的組成 </title><style type="text/css"></style></head><body><h1>CSS 的組成 </h1><p>在 HTML 文書中組成樣式表有三種方法。其一是在其他檔案中記述樣式表，然後讀取；另外兩種是在 HTML 文書中直接寫入樣式表。</p></body></html>

28

01.03 在任意元素中以 STYLE 屬性質來編寫<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><meta http-equiv="Content-Style-Type" content="text/css"><title>CSS 的編輯 </title></head><body style="margin:0; color:#000000; background:#00cc99 url(back.jpg)">

<h1 style="font-size: medium; margin: 0; padding: 0.3em; color: #ffffff; background-color: #000000">CSS 的編輯 </h1>

<p style="line-height: 1.8; margin: 1.6em 1.6em 1em 36%; padding: 1em; border: dotted 3px #ffffff">在 HTML 文書中編輯樣式表有以下三種方法。一種為在其他檔案中只記述樣式表，再加以讀取。其他兩種為直接在 HTML 文書中編輯樣式表。</p>

</body></html>

29

第 2部份適用 CSS 的對象 02.01 適用於特定元素<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>適用於特定元素 </title><style type="text/css"></style></head><body><h1>h1元素的內容 </h1><p>p元素的內容 </p></body></html>

30

02.02 可適用於複數個元素的 CSS 設定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 可適用於複數個的元素 </title><style type="text/css"></style></head><body><h1>h1元素的內容 </h1><p>p元素的內容 </p></body></html>

31

02.03 適用於所有元素的 CSS 設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>適用於所有的元素 </title><style type="text/css"></style></head><body><h1>h1元素的內容 </h1><h2>h2元素的內容 </h2><h3>h3元素的內容 </h3><h4>h4元素的內容 </h4>

<h5>h5元素的內容 </h5><h6>h6元素的內容 </h6><p>p元素的內容 </p></body></html>

32

02.04 適用於指定 ID及類別的元素的 CSS 設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>適用指定 ID及類別的元素 </title><style type="text/css"></style></head><body><h1 class="myclass">h1元素的內容 </h1><p>p元素的內容 </p><p class="myclass">p元素指定成「 class="myclass"」 </p><p>p元素的內容 </p><p id="myid">p元素指定成「 id="myid"」 </p><p>p元素的內容 </p><p class="myclass">p元素指定成「 class="myclass"」 </p><p>p元素的內容 </p></body></html>

33

02.05 適合於連結 LINK 的 CSS 設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>適用於連結部分 </title><style type="text/css"></style> </head><body><h1>適用於連結部分 </h1><p> 利用 <a href=“css.html”> 樣式表 </a> 的話，可以讓只有一部分的 <a href=“link.html”>連結 </a> 改變顏色等的樣式。「 :link」「 :visited」等稱為「 <a href=“pseudo.html” class=“special”>虛擬類別 </a>」。 </p><p class="navbar">[<a href="next.html">下一頁 </a>][<a href="top.html"> 最頂端 </a>][<a href="prev.html"> 前一頁 </a>]</p></body></html>

34

02.06 適用於第 1行的 CSS 設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>適用於第一行 </title><style type="text/css"></style></head><body><p>「 :first-line」為適用於樣式表之 Block level 要素的第一行表示之模擬要素。因選擇器有多樣的種類，基本上可以任意的加以組合，但對於模擬要素的部分則一定會保留在選擇器的最後使用。</p></body></html>

35

02.07 適用於第 1 個文字的 CSS 設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>適用於第一個文字 </title><style type="text/css"></style></head><body><p>像在雜誌上經常可以看到的首字放大，使用樣式表時，可以限定只有開始的第一個文字適用於樣式。 Windows 的 Internet Explorer從 5.5 版開始， Netscape從第 6 版開始可適用。但請注意，若用於日文版本，在 Macintosh 版 Internet Explorer 5.0 則有可能會發生亂碼的情形。</p></body></html>

36

02.08 適用於特定元素的 CSS 設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>適用於特定的元素 </title><style type="text/css"></style></head><body><h1>這個是 <em>h1元素 </em> 的內容。 </h1><p>這個是 <em>p元素 </em> 的內容。 </p>

</body></html>

37

第 3部份字型的 CSS 設定 03.01 指定文字的顏色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定文字的顏色 </title><style type="text/css"></style></head><body><p class="type1"> 文字顏色指定為「 #009999」。 </p><p class="type2"> 文字顏色指定為「 #cccc00」。 </p><p class="type3"> 文字顏色指定為「 #ff9900」。 </p></body></html>

38

03.02 指定字型<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定字型 </title><style type="text/css"></style></head><body>

<h1>font-family</h1><p class="min">這個部份是以細明體設定。 </p><p class="gth">這個部份是以楷書設定。 </p>

<p class="com">Comic Sans MS</p>

</body></html>

39

03.03 指定字型大小<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定字型的大小 </title><style type="text/css"></style></head>

<body><p>此文字的大小是 <em>初始值（ medium ） </em></P><ul><li class="xxs"><em>xx-small</em> 的文字 </li><li class="xs"><em>x-small</em> 的文字 </li><li class="s"><em>small</em> 的文字 </li><li class="m"><em>medium</em> 的文字 </li><li class="l"><em>large</em> 的文字 </li><li class="xl"><em>x-large</em> 的文字 </li><li class="xxl"><em>xx-large</em> 的文字 </li></ul><p><span class="smaller">這裡是 <em>smaller</em></span> 、<span class="m">這裡是 <em>medium</em></span> 、<span class="larger">這裡是 <em>larger</em></span></p><p><span class="s09">這裡是 <em>9 point</em></span> 、<span class="s12">這裡是 <em>12 point</em></span> 、<span class="s16">這裡是 <em>16 point</em></span></p><p><span class="p080">這裡是 <em>80%</em></span> 、這裡是 <em>100%</em> 、<span class="p120">這裡是 <em>120%</em></span> 、<span class="p150">這裡是 <em>150%</em></span></p></body></html>

40

03.04 指定字型的粗細 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定字型的粗細 </title><style type="text/css"></style></head><body><ul><li>font-weight: <em>normal</em></li><li id="bold">font-weight: <em>bold</em></li><li id="w400">font-weight: <em>400</em></li><li id="w500">font-weight: <em>500</em></li><li id="w600">font-weight: <em>600</em></li><li id="w700">font-weight: <em>700</em></li><li id="w800">font-weight: <em>800</em></li><li id="w900">font-weight: <em>900</em></li></ul></body></html>

41

03.05 指定字型樣式<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定字型樣式 </title><style type="text/css"></style> </head> <body><p> font-style: <span class="keywd">normal</span> </p><p id="itlc"> font-style: <span class="keywd">italic</span> </p><p id="oblq"> font-style: <span class="keywd">oblique</span> </p><p> text-decoration: <span class="keywd">none</span> </p><p id="udln"> text-decoration: <span class="keywd">underline</span> </p><p id="lnth"> text-decoration: <span class="keywd">line-through</span> </p><p id="ovln"> text-decoration: <span class="keywd">overline</span> </p><p id="udov"> text-decoration: <span class="keywd">underline overline</span></p></body> </html>

42

03.06 指定匯總後的字型關係 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定彙總後的字型關係 </title><style type="text/css"></style></head><body>

<h1>-font-</h1><h2>[ shorthand font property ]</h2><p>使用此性質，就可以一次設定關於字型的多個性質，編排出美麗的版面。</p> </body> </html>

43

第 4部份文字的 CSS 設定 04.01 行距的設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 設定行距 </title><style type="text/css"></style></head><body>

<h1> 設定行距 </h1><h2>line-height: <em>normal</em></h2><p id="sample1">行距會影響閱讀的容易度，過窄或過寬都會增加閱讀時的困難。比較上來說，如果行數較少、行距較寬，會較易閱讀；而一行的文字數多、行距狹窄則會較難閱讀。 </p>

<h2>line-height: <em>1.5</em></h2><p id="sample2"> 行距會影響閱讀的容易度，過窄或過寬都會增加閱讀時的困難。比較上來說，如果行數較少、行距較寬，會較易閱讀；而一行的文字數多、行距狹窄則會較難閱讀。 </p>

<h2>line-height: <em>180%</em></h2><p id="sample3"> 行距會影響閱讀的容易度，過窄或過寬都會增加閱讀時的困難。比較上來說，如果行數較少、行距較寬，會較易閱讀；而一行的文字數多、行距狹窄則會較難閱讀。 </p>

</body> </html>

44

04.02 指定文字的水平設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定文字的水平位置 </title><style type="text/css"></style></head><body>

<p id="sample1">text-align: <em>left</em></p><p id="sample2">text-align: <em>center</em></p>

<p id="sample3">text-align: <em>right</em></p>

</body></html>

45

04.03 指定文字的垂直位置<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定文字的垂直位置 </title><style type="text/css"></style> </head> <body><p>vertical-align: <img class="vmid" src="leaf.gif" width="80" height="80" alt=""> <em>middle</em> </p>

<p> vertical-align: <img src="leaf.gif" width="80" height="80" alt=""><em class="vtop">top</em> <em class="vbtm">bottom</em> </p>

<table border="3"><tr><td class="vtop"><em>top</em></td><td class="vmid"><em>middle</em></td><td class="vbtm"><em>bottom</em></td></tr></table>

</body> </html>

46

04.04 指定文字間格與單字間格<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 設定文字間隔與單字間隔 </title><style type="text/css"><!– .sample1 { letter-spacing: 0.5em } .sample2 { letter-spacing: 1em } .sample3 { letter-spacing: 2em }.sample4 { word-spacing: 0.8em } .sample5 { word-spacing: 1.5em }em { font-style: normal; font-weight: bold; color: #ff6600; background: #ffffff }--></style> </head><body>

<h1> 文字間隔與單字間隔 </h1><h2>■ letter-spacing</h2>

<p>letter-spacing: <em>normal</em></p><p class="sample1">letter-spacing: <em>0.5em</em></p><p class="sample2"> 文字間隔： <em>1em</em></p><p class="sample3"> 文字間隔： <em>2em</em></p>

<h2>■ word-spacing</h2><p>It specifies spacing behavior between words.</p><p class="sample4">It specifies spacing behavior between words.</p><p class="sample5">It specifies spacing behavior between words.</p>

</body> </html>

47

04.05 設定段落首行縮排<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 設定段落首行縮排 </title><style type="text/css"></style></head><body>

<p>這是首行縮排「 <em>0</em> （初始值）」的狀態 </p><p id="sample1">這是只有「 <em>1em</em>」首行縮排的狀態。從一行的開始位置，以指定的距離向右移動。

</p><p id="sample2">這是只有「 <em>3em</em>」首行縮排的狀態。從一行的開始位置，以指定的距離向右移動。</p><p id="sample3">這是只有「 <em>5em</em>」首行縮排的狀態。從一行的開始位置，以指定的距離向右移動。</p>

</body></html>

48

04.06 空白跟換行的設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>空白跟換行的設定 </title><style type="text/css"></style></head><body>

<p><code>function resetRadio() { for(var i = 0; i < document.form1.type.length; i++) { if(document.form1.type[i].defaultChecked == true) document.form1.type[i].checked = true else document.form1.type[i].checked = false }}</code>

</p>

</body></html>

49

04.07 不換行的設定<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 不換行的設定 </title><style type="text/css"></style></head><body>

<h1>禁止換行 </h1>

<h2>■ 普通狀態 </h2><p>

若對於 white-space 性質指定「 nowrap」，在此範圍的內容則無法換行。而其中的連續半形空格、 Tab 與換行碼會變更成一個半行的空格。</p>

<h2>■ white-space ： nowrap</h2><p class="sample1">若對於 white-space 性質指定「 nowrap」，在此範圍的內容則無法換行。而其中的連續半形空格、 Tab 與換行碼會變更成一個半行的空格。</p>

</body> </html>

50

04.08 全體設定成大寫或小寫<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>全體設定成大寫或小寫 </title><style type="text/css"></style> </head> <body>

<h1> 大寫與小寫 </h1>

<h2>lowercase</h2><p id="sample1">

CAPITALIZATION EFFECTS OF AN ELEMENT'S TEXT.</p>

<h2>uppercase</h2><p id="sample2">capitalization effects of an element's text.</p>

<h2>capitalize</h2><p id="sample3">capitalization effects of an element's text.</p>

</body> </html>

51

第 5部分背景的設定 05.01 設定背景顏色<body><h1>h1元素 </h1><p>使用樣式表時可以自由設定各種元素的背景色。</p><div><table border="2" cellpadding="8"><caption>table元素 </caption><tr><th>head cell</th><th>head cell</th><th>head cell</th></tr><tr><td>data cell</td><td>data cell</td><td>data cell</td></tr></table><p><textarea rows="4" cols="50">textarea元素 </textarea></p><p><input type="text" value="input元素 "><input type="checkbox" name="chk" checked><input type="checkbox" name="chk"><input type="radio" name="rdo" checked><input type="radio" name="rdo"><select> <option>select元素 </option> <option>option元素 </option></select><input type="button" value="button"> </p></div></body> </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 設定背景顏色 </title><style type="text/css"></style></head>

52

05.02 設定背景圖片<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定背景圖片 </title><style type="text/css">

</style> </head><h1>h1元素 </h1><p> 使用樣式表時可以自由設定各種元素的背景圖片。 </p><div><table border="2" cellpadding="8"><caption>table元素 </caption><tr><th>head cell</th><th>head cell</th><th>head cell</th></tr><tr><td>data cell</td><td>data cell</td><td>data cell</td></tr></table><p><textarea rows="4" cols="50">textarea元素 </textarea></p><p><input type="text" value="input元素 "><input type="checkbox" name="chk" checked><input type="checkbox" name="chk"><input type="radio" name="rdo" checked><input type="radio" name="rdo"><select> <option>select元素 </option> <option>option元素 </option></select><input type="button" value="button"></p>

</div></body></html>

53

05.03 指定背景圖片的排列方式<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定背景圖片的排列方式 </title><style type="text/css"></style></head><body>

<h1>no-repeat</h1>

</body></html>

54

05.04 指定背景圖片的位置<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定背景圖片的表示位置 </title><style type="text/css"></style></head><body>

<p>center center = 50% 50%</p>

</body></html>

55

05.05 固定圖片位置<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>固定背景圖片 </title><style type="text/css"></style> </head> <body><h1>比目魚是魚類殺手 </h1>在第一次釣到比目魚時， <br>有很多釣客會被他的尖銳牙齒嚇到。 <br>因為比目魚的主食是，活魚﹑蝦子﹑花枝等 <br>活跳跳的魚類。</p><p>在釣比目魚時，目標放在從較遠的地方 <br>雖然也很重要，但魚餌應選擇活餌較好。 <br>在我的經驗中，真魚餌比金屬餌要好， <br>而軟魚餌又會比真魚餌更容易使魚上鉤。</p><p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></body></html>

56

05.06 統一設定背景<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>統一設定背景 </title><style type="text/css"></style></head><body>

</body></html>

57

第 6部分邊界的設定 06.01 設定邊界<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 設定邊界 </title><style type="text/css"></style> </head> <body>

<p id="sample1"> 上下左右邊界： 0 pixel</p><p id="sample2"> 上下左右邊界： 20 pixel</p><p id="sample3"> 上下左右邊界： 40 pixel</p>

<p id="sample4">右邊界： 50%</p><p id="sample5">左邊界： 50%</p></body> </html>

58

06.02 設定邊距<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 設定邊距 </title><style type="text/css"></style></head><body>

<p id="sample1"> 在此段落，內容與邊框間的上下左右設定為 0 pixel 。 </p><p id="sample2"> 在此段落，內容與邊框間的上下左右設定為 20 pixel 。 </p><p id="sample3"> 在此段落，內容與邊框間的上下左右設定為 40 pixel 。 </p>

<p id="sample4"> 在此段落，右側內容與邊框間設定為 50% 。 </p><p id="sample5"> 在此段落，左側內容與邊框間設定為 50% 。 </p>

</body> </html>

59

06.03 設定框線的粗細<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定框線的粗細 </title><style type="text/css"></style> </head> <body>

<p id="sample1"> 上下左右框線的粗細： 1 pixel</p><p id="sample2"> 上下左右框線的粗細： thin</p><p id="sample3"> 上下左右框線的粗細： medium （初始值） </p>

<p id="sample4"> 上下左右框線的粗細： thick</p><p id="sample5"> 上下左右框線的粗細： 1em</p><p id="sample1">左： 100pixel 右： 0</p>

</body> </html>

60

06.04 設定框線的顏色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定框線的顏色 </title><style type="text/css"></style> </head> <body><p id="sample1">border-color: #ff3300</p><p id="sample2">border-color: #ffcc00</p><p id="sample3">border-color: #339933</p><p id="sample4">border-color: #333399</p><p id="sample5"> 上： #339933　下： #ff3300　左： #333399　右： #ffcc00</p></body> </html>

61

06.05 設定框線的型式<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定框線的形式 </title><style type="text/css"></style> </head> <body><p id="sample1">none</p><p id="sample2">solid</p><p id="sample3">double</p><p id="sample4">dashed</p><p id="sample5">dotted</p><p id="sample6">groove</p><p id="sample7">ridge</p><p id="sample8">inset</p><p id="sample9">outset</p></body> </html>

62

06.06 統一指定框線<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定框線的形式 </title><style type="text/css"></style> </head> <body><p id="sample1">none</p><p id="sample2">solid</p><p id="sample3">double</p><p id="sample4">dashed</p><p id="sample5">dotted</p><p id="sample6">groove</p><p id="sample7">ridge</p><p id="sample8">inset</p><p id="sample9">outset</p></body> </html>

63

06.07 指定區塊的寬與高<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定區塊的寬與高 </title><style type="text/css"></style> </head> <body><p> ◎中間的圖為原尺寸（ 100px X 100px ） </p><p><img src="orange.jpg" alt="" class="small"><img src="orange.jpg" alt="" class="normal"><img src="orange.jpg" alt="" class="large"></p> <hr><p class=“half”> 以下的範例已將元素的寬（ width ）設定為「 50%」。 </p><p>select元素： <br><select class="half"><option selected> 選擇項目 1</option><option> 選擇項目 2</option></select></p><p> input元素： <br> <input type="text" class="half" value="輸入欄位 "> </p><p> textarea元素： <br> <textarea rows="5" cols="30" class="half">多行的輸入欄位 </textarea> </p></body> </html>

64

第 7部分版面配置 07.01 指定左右配置與文繞圖<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定左右配置與文繞圖 </title><style type="text/css"></style> </head> <body><p><img src="fish1.jpg" class="left" width="155" height="120" alt="">

眼斑海葵魚（ amphiprion ocellaris ），是雀鯛魚（ anemone fish ）中最迷你、最可愛的種類。牠們喜歡海葵那軟綿綿的觸手，總是優遊自在的在旁邊游來游去。最近新上市了一種不須換水的濾淨器，使得養魚也變得更輕鬆愉快了。若是又能在魚缸裡放進一些長有珊瑚礁的岩石，寄生在上面的各種生物就更能保持水槽裡的清潔。這種岩石我們稱之為「活石」（ live rock ），目前主要是從國外進口。</p><p> <img src="fish2.jpg" class="right" width="155" height="120" alt="">眼斑海葵魚（ amphiprion ocellaris ），是雀鯛魚（ anemone fish ）中最迷你、最可愛的種類。牠們喜歡海葵那軟綿綿的觸手，總是優遊自在的在旁邊游來游去。最近新上市了一種不須換水的濾淨器，使得養魚也變得更輕鬆愉快了。若是又能在魚缸裡放進一些長有珊瑚礁的岩石，寄生在上面的各種生物就更能保持水槽裡的清潔。這種岩石我們稱之為「活石」（ live rock ），目前主要是從國外進口。</p>

</body></html>

65

07.02 解除文繞圖<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 解除文繞圖 </title><style type="text/css"></style></head><body>

<p><img src="fish1.jpg" class="left" width="155" height="120" alt="">眼斑海葵魚（ amphiprion ocellaris ），是雀鯛魚（ anemone fish ）中最迷你、最可愛的種類。牠們喜歡海葵那軟綿綿的觸手，總是優遊自在的在旁邊游來游去。 </p>

<p>最近新上市了一種不須換水的濾淨器，使得養魚也變得更輕鬆愉快了。 </p>

<p> <img src="fish2.jpg" class="right" width="155" height="120" alt="">眼斑海葵魚（ amphiprion ocellaris ），是雀鯛魚（ anemone fish ）中最迷你、最可愛的種類。牠們喜歡海葵那軟綿綿的觸手，總是優遊自在的在旁邊游來游去。</p>

<p> 最近新上市了一種不須換水的濾淨器，使得養魚也變得更輕鬆愉快了。 </p></body> </html>

66

07.03 置中對齊 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>置中對齊 </title><style type="text/css"></style> </head> <body>

<h1>此為 h1元素 </h1>

<p>此為 p元素 </p>

<table border="3" cellpadding="6"><tr><th> 標頭 </th><th> 標頭 </th><th> 標頭 </th></tr><tr><td> 標頭 </td><td> 標頭 </td><td> 標頭 </td></tr></table></body> </html>

67

07.04 絕對位置的配置<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 絕對位置的配置 </title><style type="text/css"></style></head><body>

<h1> 絕對配置 </h1>

<p>從上面開始 150 pixel<br>

從右邊開始 250 pixel</p>

</body></html>

68

07.05 相對位置的配置<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>相對位置的配置 </title><style type="text/css"></style></head><body>

<h1>POSITION<br>RELATIVE</h1>

<p>從普通的配置位置 <br>進行相對性的移動。 </p>

</body></html>

69

07.06 絕對位置上的固定配置<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 絕對位置上的固定配置 </title><style type="text/css"></style></head><body><h1>固定配置 </h1><p> 最上面的導覽欄 navigation bar （黃色背景的部分）因被固定在視窗的上方，即使將內容往上捲也會表示在相同的位置上。</p><div id="navi"><a href="prev.html"> 前一頁 </a> |<a href="home.html">Home</a> |<a href="next.html">下一頁 </a></div><p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></body></html>

70

07.07 指定重疊的順序

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定重疊的順序 </title><style type="text/css"></style></head><body>

<p id="sample1">z-index:2<br>source順序： 1</p>

<p id="sample2">

z-index:1<br>source順序： 2</p>

<p id="sample3">z-index:3<br>source順序： 3</p>

<p id="sample4">z-index: 無指定 (0)<br>source順序： 4</p>

</body></html>

71

07.08 設定不顯示<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"> <head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 不顯示 </title><style type="text/css"></style> </head> <body><p>此段落的下方會有一個無法顯示的段落。因為指定了「 display: none」，此元素會變成無法顯示的狀態。 </p><p class="none">以「 display: none」指定此段落的話，則會變成不顯示。 </p><table border="3" cellpadding="4"><tr class="hidden"><th> 標頭 </th><th> 標頭 </th><th> 標頭 </th></tr><tr><td> 標頭 </td><td> 標頭 </td><td> 標頭 </td></tr><tr class="hidden"><td> 標頭 </td><td> 標頭 </td><td> 標頭 </td></tr></table><p class="hidden">以「 visibility: hidden」指定此段落的話，則會變成無顯示。 </p><p>此段落的上方會有一個無法顯示的段落。因為指定了「 visibility: hidden」性質，所以可以確保與能顯示時相同的領域。 </p></body></html>

72

07.09 設定當內容超出框線時的處理方法<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>當設定內容超出框線時的處理方法 </title><style type="text/css"></style> </head> <body><p id="sample1">指定「 <em>overflow: scroll</em>」。overflow 是，當內容超出框線範圍時，可設定超出部分要如何表示的一種性質。</p><p id="sample2">指定「 <em>overflow: scroll</em>」。overflow 是，當內容超出框線範圍時，可設定超出部分要如何表示的一種性質。</p><p id="sample3">指定「 <em>overflow: scroll</em>」。overflow 是，當內容超出框線範圍時，可設定超出部分要如何表示的一種性質。</p><p id="sample4">指定「 <em>overflow: scroll</em>」。overflow 是，當內容超出框線範圍時，可設定超出部分要如何表示的一種性質。</p></body></html>

73

第 8部分清單 08.01 改變清單的項目符號和編號方式<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 改變清單的項目符號和編號方式 </title></head><body><ol style="list-style-type: none"><li>none</li><li>none</li><li>none</li></ol><ol style="list-style-type: disc"><li>disc</li><li>disc</li><li>disc</li></ol><ol style="list-style-type: circle"><li>circle</li><li>circle</li><li>circle</li></ol><ol style="list-style-type: square"><li>square</li><li>square</li><li>square</li></ol></body></html>

74

08.02 以圖片作為清單的項目符號<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>以圖片作為清單的項目符號 </title><style type="text/css"></style></head><body>

<ul><li>list-style-image</li><li>list-style-image</li><li>list-style-image</li>

</ul>

</body></html>

75

08.03 將清單的項目符號設在內側<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 將清單的項目符號設定在內側 </title><style type="text/css"></style></head><body><ul class="in"><li><em>inside</em>時， <br>以這樣顯示。</li><li><em>inside</em>時， <br>以這樣顯示。

</li></ul>

<ul><li><em>outside</em> 在（初始值）時， <br>以這樣顯示。</li><li><em>outside</em> 在（初始值）時， <br>以這樣顯示。</li></ul></body></html>

76

08.04 統一設定清單的項目符號<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title>統一設定清單的項目符號 </title><style type="text/css"></style></head><body>

<ul><li>list-style-image 的值 <br>也可指定。</li><li>

list-style-type 的值 <br> 可使用在 <br>無法顯示圖片時。</li><li>list-style-position 的 <br>值也可加以設定。此 <br> 例為 inside 。</li></ul>

</body></html>

77

第 9部分表格 09.01 將表格的格線設定為分開的單線<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 將表格的格線設定為分開的單線 </title><style type="text/css"></style></head><body><table border="3" cellpadding="8" id="sample1"><caption>collapse</caption><tr><th> 標頭 </th><th> 標頭 </th><th> 標頭 </th></tr><tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr><tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr></table><table border="3" cellpadding="8" id="sample2"><caption>separate</caption><tr><th> 標頭 </th><th> 標頭 </th><th> 標頭 </th></tr><tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr><tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr></table></body></html>

78

09.02 指定欄位間的間隔<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定欄位間的間隔 </title><style type="text/css"></style></head><body>

<table border="3" cellpadding="8"><tr><th> 標頭 </th><th> 標頭 </th><th> 標頭 </th></tr><tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr>

<tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr></table>

</body></html>

79

09.03 將表格的標題顯示在下方<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 將表格的標題顯示在下方 </title><style type="text/css"></style></head><body>

<table border="3" cellpadding="8"><caption>caption-side: bottom</caption><tr><th> 標頭 </th><th> 標頭 </th><th> 標頭 </th></tr>

<tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr><tr><td> 文字 </td><td> 文字 </td><td> 文字 </td></tr></table>

</body></html>

80

09.04 指定空白欄位框線的隱藏與顯示<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定空白欄位框線的顯示及隱藏 </title><style type="text/css"></style></head><body>

<table border="3" cellpadding="8" cellspacing="8"><tr> <td>hide→</td> <td class="hide"></td>

</tr><tr> <td class="show"></td> <td>←show</td></tr></table>

</body></html>

81

第 10部分其它 10.01 指定游標的形狀<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 指定游標的形狀 </title><style type="text/css"></style></head><body><p style="cursor: auto">auto</p><p style="cursor: crosshair">crosshair</p><p style="cursor: default">default</p><p style="cursor: pointer">pointer</p><p style="cursor: move">move</p><p style="cursor: text">text</p><p style="cursor: wait">wait</p><p style="cursor: help">help</p><p style="cursor: e-resize">e-resize</p><p style="cursor: ne-resize">ne-resize</p><p style="cursor: nw-resize">nw-resize</p><p style="cursor: n-resize">n-resize</p><p style="cursor: se-resize">se-resize</p><p style="cursor: sw-resize">sw-resize</p><p style="cursor: s-resize">s-resize</p><p style="cursor: w-resize">w-resize</p></body></html>

82

10.02 指定列印時換頁h1, table { page-break-before: always }

83

10.03 在元素的前後插入文字與圖片<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 在要素的前後插入本文及圖片 </title><style type="text/css"></style></head><body><div class="info"><p class="note">若是將「 \A」當成文字形式插入的話，則會在此處換行。</p><p class="warning">事實上幾乎沒有任何一個瀏覽器可以完全對應此性質。</p></div></body></html>

84

10.04 設定可使用的引用符號<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=Big5"><title> 設定可使用的引用符號 </title><style type="text/css"></style></head><body>

<p>在我的參考書中，對於 <q>引用文字，以大括弧 </q> 來表示。</p>

</body></html>

85

10.05 在 CSS 中加入註解

body { margin: 3em } /* 設定上下左右的邊界 */h1 { font-size: medium; /* 設定字型大小為標準 */ color: #ffffff; /* 文字為白色 */ background: #ff6600 /* 背景為橘色 */}p { line-height: 1.5 } /* 段落的行距為普通的 1.5倍 */

css(cascading style sheets) 串接樣式表上課講義

Documents