Transcript CSS範例
CSS(Cascading Style Sheets) 串接樣式表上課講義 本投影片資料來源： （1）CSS基本概念：台大計中 許凱平 [email protected] http://ccms.ntu.edu.tw/~kphsu （2）CSS範例： 博碩出版社，『最新詳解 JavaScript&HTML&CSS語法辭典-增訂新版 』 1 何謂樣式表(Style Sheets)? 風格 樣式表 體裁紙 用途 控制文件在媒體上顯示的風格 媒體 如字體、顏色、大小 電腦螢幕、電視、紙張、手機、聲音 理念 將文件的內容(contenet)與格式(format)分開 2 微軟OFFICE系列軟體中的樣式 Word Powerpoint 巨集、樣式 投影片母片 Front Page 樣式表 3 CSS的優點(一) 專業分工 由專業人員負責風格設計 其他人只要負責內容即可 讓文件呈現一致的風格 共享 可重複使用 具有繼承的概念 4 CSS的優點(二) 效率 減少文件大小、節省網路頻寬 容易製作、容易維護 為一般文字格式 用普通編輯器即可撰寫 5 CSS的優點(三) 可程式控制 可在程式中動態改變樣式 可合理退化 UA自動忽略尚未支援的屬性 6 標示 • 邏輯性標示 - • 描述性標示 - • 地址 標題一 特殊標示 - 在選定範圍上直接指定格式 7 樣式表語言(Style Sheet languages) CSS XSL(配合XML使用) Cascading Style Sheets Extensible Stylesheet Language 使用原則 能夠用CSS做到的就不要用XSL 8 年表 CCS1 (CSS Level 1)是在 1996 年 12 月完成製定， 並在1999 年 1 月增修 CSS-P (CSS-Positioning)CSS規格的一個延伸，可 做絕對定位 CCS2 (CSS Level 2) 的規格在 1998 年 5 月完成製 定，目前瀏覽器只支援其中的少許功能。 CSS3 目前正在發展中的規格 9 Cascading Cascading Reader + inline + embedded + linked Conflicts Reader > inline > embedded > linked 10 Style Sheet and Rule 樣式表與規則 style sheet 樣式表 a collection of rules 由一群規則(rule)組成 rule 規則 Selector(選取器) 的宣告 (declaration) 語法 selector { property : value; } 選取器 { 特性: 特性值; } 11 CSS的使用方式 Inline (在元素(Element) Level內使用) Embedded (File Level)---從CSS檔案呼叫 <style type="text/css"> h1 {color:red} </style> Linked (interFile Level)---在HTML的<head>中的<style>內定義 <h1 style="color:red"> <link rel="stylesheet" href="style/main.css"> Reader(browser) defined----由網頁瀏覽器選 擇 工具/Internet 選項／ 12 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> 13 連結樣式與標示/標籤/元素(一) Tag H1 { COLOR: blue } Class . LargerClass { FONT-SIZE: larger; } ID #uid {COLOR: green } 14 連結樣式與標示/標籤/元素(二) Group Tag + Tag TABLE TR{color:blue } Tag + Class H1, H2 { COLOR: blue } H1.LargerClass { FONT-SIZE: larger } Tag + ID H1#uid {COLOR: green } 15 Display property Block Inline <span>、<em> list-item <div>、<p> <li> None 隱藏 16 CSS的程式設計功能 <p OnMouseOver= " poweredBy.style.display='block' " OnMouseOut= " poweredBy.style.display='none' " > 17 HTML格式設定的基本概念 _______________________________________ | margin (transparent) | | _________________________________ | | | border | | | | ___________________________ | | | | | padding | | | | | | _____________________ | | | | | | | content | | | | | | | |_____________________| | | | | | |___________________________| | | | |_________________________________| | |_______________________________________| 18 範例 IPS (XML+XSL+CSS) http://kptest.cc.ntu.edu.tw/ips/ Tree的製作(XML+XSL+CSS) http://kptest.cc.ntu.edu.tw/webtech/ 19 參考資料 W3C Style http://w3.org/ http://www.w3.org/Style/ CSS http://www.w3.org/Style/CSS/ 20 參考資料 Microsoft MSDN Online http://www.microsoft.com/taiwan/msdn/ 無廢話XML http://2tigers.net/xml_book/ 21 References Chinese XML Now! http://www.ascc.net/xml/ 22 一些有用的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 23 一些有用的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樣式 (相關網站連結整理) 24 CSS範例 資料來源： 博碩出版社，『最新詳解 JavaScript&HTML&CSS語法辭典-增訂新版 』 25 第一部份 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> 26 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"> <!-body { margin: 0; color: #000000; background: #00cc99 url(back.jpg) } h1 { font-size: medium; margin: 0; padding: 0.3em; color: #ffffff; background-color: #000000 } p { line-height: 1.8; margin: 1.6em 1.6em 1em 36%; padding: 1em; border: dotted 3px #ffffff } --> </style> </head> <body> <h1>CSS的組成</h1> <p> 在HTML文書中組成樣式表有三種方法。其一是在其他檔案中 記述樣式表，然後讀取；另外兩種是在HTML文書中直接寫入 樣式表。 </p> </body> </html> 27 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> 28 第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"> <!-body { margin: 3em } h1 { font-size: medium; /*將文字大小標準化*/ padding: 0.3em; color: #ffffff; /*文字設定為白色*/ background: #ff6600 /*背景設定為橘色*/ } p{ padding: 1em; border: double 3px #ff6600 /*以橘色雙重線圍住*/ } --> </style> </head> <body> <h1>h1元素的內容</h1> <p>p元素的內容</p> </body> </html> 29 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"> <!-h1, p { font-size: medium; /*將文字大小標準化*/ padding: 1em; border: double 3px #ff6600 /*以橘色雙重線圍住*/ } --> </style> </head> <body> <h1>h1元素的內容</h1> <p>p元素的內容</p> </body> </html> 30 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"> <!-*{ font-size: medium; /*將文字大小標準化*/ font-weight: normal: /*將文字粗細體標準化*/ } --> </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> 31 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"> <!-#myid { padding: 0.5em; border: outset 8px #ff0000 /*表示紅線*/ } p.myclass { padding: 0.3em; color: #ffffff; /*文字設定為白色*/ background: #ff6600 /*背景設定為橘色*/ } --> </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> 32 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"> <!-/*普通連結色的設定*/ a:link { color: #0000ff; background: #ffffff } a:visited { color: #000080; background: #ffffff } a:hover { color: #ff3300; background: #ffffff } a:active { color: #ff0000; background: #ffffff } /* 特定的類別中含有的連結的部份改變顏色 */ a.special { font-weight: bold } a.special:link { color: #00cc00; background: #ffffff } a.special:visited { color: #009900; background: #ffffff } a.special:active { color: #00ff00; background: #ffffff } .navbar { text-align: center; border-top: solid 1px #999999; padding-top: 1em } /* 特定的類別中含有的連結的部份改變顏色 */ .navbar a:link { color: #ff6600; background: #ffffff } .navbar a:visited { color: #ff9900; background: #ffffff } .navbar a:active { color: #ff0000; background: #ffffff } --> </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> 33 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"> <!-p { line-height: 1.6 } p:first-line { color: #ffffff; background: #ff6600 } --> </style> </head> <body> <p> 「:first-line」為適用於樣式表之Block level要素的第一行表示之模擬要素。因 選擇器有多樣的種類，基本上可以任意的加以組合，但對於模擬要素的部分則 一定會保留在選擇器的最後使用。 </p> </body> </html> 34 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"> <!-p:first-letter { font-size: 3em; float: left; /* 靠左 */ font-weight: bold; /*文字設定為粗體*/ color: #ff6600; /*文字設定為橘色*/ background: #ffffff } --> </style> </head> <body> <p> 像在雜誌上經常可以看到的首字放大，使用樣式表時，可以限定只有開始的第一個文字適用於樣式。Windows的 Internet Explorer從5.5版開始，Netscape從第6版開始可適用。但請注意，若用於日文版本，在Macintosh版 Internet Explorer 5.0則有可能會發生亂碼的情形。 </p> </body> </html> 35 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"> <!-p em { color: #ffffff; /*文字設定為白色*/ background: #ff6600 /*背景設定為橘色*/ } --> </style> </head> <body> <h1>這個是<em>h1元素</em>的內容。</h1> <p>這個是<em>p元素</em>的內容。</p> </body> </html> 36 第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"> <!-.type1 { color: #009999; background: #ffffff } .type2 { color: #cccc00; background: #ffffff } .type3 { color: #ff9900; background: #ffffff } --> </style> </head> <body> <p class="type1">文字顏色指定為「#009999」。</p> <p class="type2">文字顏色指定為「#cccc00」。</p> <p class="type3">文字顏色指定為「#ff9900」。</p> </body> </html> 37 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"> <!-h1 { font-family: Impact, sans-serif } p { font-size: x-large } .min { font-family: "細明體",新細明體,serif } .gth { font-family: "楷書",標楷體,sans-serif } .com { font-family: "Comic Sans MS",sans-serif } --> </style> </head> <body> <h1>font-family</h1> <p class="min">這個部份是以細明體設定。</p> <p class="gth">這個部份是以楷書設定。</p> <p class="com">Comic Sans MS</p> </body> </html> 38 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"> <!-.xxs { font-size: xx-small } .xs { font-size: x-small } .s { font-size: small } .m { font-size: medium } .l { font-size: large } .xl { font-size: x-large } .xxl { font-size: xx-large } .smaller { font-size: smaller } .larger { font-size: larger } .s09 { font-size: 9pt } .s12 { font-size: 12pt } .s16 { font-size: 16pt } .p080 { font-size: 80% } .p120 { font-size: 120% } .p150 { font-size: 150% } em { color: #ff3300; background-color: #ffffff; font-style: normal } --> </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> 39 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"> <!-ul { font-size: xx-large; font-family: "Times New Roman", Times, serif } #bold { font-weight: bold } #w400 { font-weight: 400 } #w500 { font-weight: 500 } #w600 { font-weight: 600 } #w700 { font-weight: 700 } #w800 { font-weight: 800 } #w900 { font-weight: 900 } em { color: #ff3300; background-color: #ffffff; font-style: normal } --> </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> 40 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"> <!-p{ font-size: x-large; font-family: "Times New Roman", Times, serif } #itlc { font-style: italic } #oblq { font-style: oblique } #udln { text-decoration: underline } #lnth { text-decoration: line-through } #ovln { text-decoration: overline } #udov { text-decoration: underline overline } .keywd { color: #ff3300; background-color: #ffffff } --> </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> 41 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"> <!-body { margin: 0; color: #ffffff; background: #009900 url(back.jpg) } h1, h2 { text-align: center; margin: 0 } h1 { font: italic bold 6em "Times New Roman",Times,serif } h2 { font: 1.5em Arial,sans-serif; color: #ff9900; background: transparent } p { font: 12pt/200% "標楷體",標楷體,serif; margin: 1em 2em; padding: 1em; color: #ffffff; background: #000000 } --> </style> </head> <body> <h1>-font-</h1> <h2>[ shorthand font property ]</h2> <p> 使用此性質，就可以一次設定關於字型的多個性質，編排出美麗的版面。 </p> </body> </html> 42 第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"> <!-#sample1 { line-height: normal } #sample2 { line-height: 1.5 } #sample3 { line-height: 180% } em { color: #ff3300; background-color: #ffffff; font-style: normal } --> </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> 43 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"> <!-p { font-size: x-large } #sample1 { text-align: left } #sample2 { text-align: center } #sample3 { text-align: right } em { font-style: normal; color: #ff3300; background-color: #ffffff } --> </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> 44 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"> <!-.vtop { vertical-align: top } .vmid { vertical-align: middle } .vbtm { vertical-align: bottom } em { font-style: normal; font-weight: bold; color: #ff6600; background: #ffffff } td { width: 6em; height: 6em; text-align: center } --> </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> 45 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> 46 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"> <!-#sample1 { text-indent: 1em } #sample2 { text-indent: 3em } #sample3 { text-indent: 5em } em { font-style: normal; font-weight: bold; color: #ff6600; background: #ffffff } --> </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> 47 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"> <!-code { white-space: pre } --> </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> 48 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"> <!-.sample1 { white-space: nowrap } --> </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> 49 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"> <!-#sample1 { text-transform: lowercase } #sample2 { text-transform: uppercase } #sample3 { text-transform: capitalize } h2 { color: #ff6600; background: #ffffff } --> </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> 50 第5部分 背景的設定 05.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"> <!-body { margin: 2em; color: #ffffff; background-color: #ff3300 } h1 { text-align: center; color: #ffffff; background-color: #000000 } p { padding: 1em; color: #000000; background-color: #ffcc00 } div { padding: 1em; color: #000000; background-color: #ffffff } table, input { color: #ffffff; background-color: #ff3300 } caption, select { color: #ffffff; background-color: #333399 } textarea { color: #ffffff; background-color: #339933 } --> </style> </head> <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> 51 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"> <!-body { margin: 2em; color: #ffffff; background-color: #ff3300; background-image: url(red.jpg) } h1 { text-align: center; color: #ffffff; background-color: #000000; background-image: url(black.jpg) } p { padding: 1em; color: #000000; background-color: #ffcc00; background-image: url(yellow.gif) } div { padding: 1em; color: #000000; background-color: #ffffff; background-image: url(white.jpg) } table, input { color: #ffffff; background-color: #ff3300; background-image: url(red.jpg) } caption, select { color: #ffffff; background-color: #333399; background-image: url(blue.gif) } textarea { color: #ffffff; background-color: #339933; background-image: url(green.jpg) } --> </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> 52 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"> <!-body { color: #ff6600; background-color: #ffffff; background-image: url(back.gif); background-repeat: no-repeat } h1 { text-align: right } --> </style> </head> <body> <h1>no-repeat</h1> </body> </html> 53 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"> <!-body { color: #000000; background-color: #ffffff; background-image: url(logo.gif); background-repeat: no-repeat; background-position: center center } --> </style> </head> <body> <p>center center = 50% 50%</p> </body> </html> 54 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"> <!-body { color: #000000; background-color: #ffffff; background-image: url(hirame.jpg); background-repeat: no-repeat; background-attachment: fixed; margin-top: 100px; text-align: right } p { line-height: 2em } --> </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> 55 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"> <!-body { color: #000000; background: #ffffff url(back.gif) right repeat-y } --> </style> </head> <body> </body> </html> 56 第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"> <!-body { margin: 0 } p{ text-align: center; font-weight: bold; padding: 0.5em; border: solid 3px #000000; color: #ffffff; background: #ff3300 } #sample1 { margin: 0 } #sample2 { margin: 20px } #sample3 { margin: 40px } #sample4 { margin-right: 50% } #sample5 { margin-left: 50% } --> </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> 57 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"> <!-p{ font-weight: bold; border: solid 3px #000000; color: #ffffff; background: #ff3300 } #sample1 { padding: 0 } #sample2 { padding: 20px } #sample3 { padding: 40px } #sample4 { padding-right: 50% } #sample5 { padding-left: 50% } --> </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.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"> <!-p { text-align: center; font-weight: bold; padding: 0.5em; border: solid #000000; color: #ffffff; background: #ff3300 } #sample1 { border-width: 1px } #sample2 { border-width: thin } #sample3 { border-width: medium } #sample4 { border-width: thick } #sample5 { border-width: 1em } #sample6 { border-left-width: 100px; border-right-width: 0; } --> </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> 59 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"> <!-body { margin: 2em } p { text-align: center; font-weight: bold; padding: 1em; border: solid 6px; } #sample1 { border-color: #ff3300 } #sample2 { border-color: #ffcc00 } #sample3 { border-color: #339933 } #sample4 { border-color: #333399 } #sample5 { border-top-color: #339933; border-bottom-color: #ff3300; border-left-color: #333399; border-right-color: #ffcc00 } --> </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> 60 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"> <!-body { margin: 2em } p { text-align: center; font-weight: bold; padding: 0.5em; border: solid 8px #ff3300; } #sample1 { border-style: none } #sample2 { border-style: solid } #sample3 { border-style: double } #sample4 { border-style: dashed } #sample5 { border-style: dotted } #sample6 { border-style: groove } #sample7 { border-style: ridge } #sample8 { border-style: inset } #sample9 { border-style: outset } --> </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> 61 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"> <!-body { margin: 2em } p { text-align: center; font-weight: bold; padding: 0.5em; border: solid 8px #ff3300; } #sample1 { border-style: none } #sample2 { border-style: solid } #sample3 { border-style: double } #sample4 { border-style: dashed } #sample5 { border-style: dotted } #sample6 { border-style: groove } #sample7 { border-style: ridge } #sample8 { border-style: inset } #sample9 { border-style: outset } --> </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.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"> <!-img.small { width: 50px; height: 50px } img.normal { width: auto; height: auto } img.large { width: 200px; height: 200px } .half { width: 50%; color: #ffffff; background: #ff3300 } --> </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> 63 第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"> <!-img.left { float: left; margin-right: 0.8em; margin-bottom: 0.5em } img.right { float: right; margin-left: 0.8em; margin-bottom: 0.5em } p { clear: both; line-height: 1.4 } --> </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> 64 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"> <!-img.left { float: left; margin-right: 0.8em; margin-bottom: 0.5em } img.right { float: right; margin-left: 0.8em; margin-bottom: 0.5em } p { clear: both; line-height: 1.4 } --> </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> 65 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"> <!-h1, p { margin-left: auto; margin-right: auto; padding: 20px; width: 150px; } table { margin: auto } h1, p, table { color: #ffffff; background: #ff6600 } --> </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> 66 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"> <!-body { color: #000000; background: #ffffff url(grid.gif) } p { position: absolute; top: 150px; left: 250px; width: 150px; height: 50px; margin: 0; padding: 25px; font-weight: bold; color: #ffffff; background: #ff3300 } --> </style> </head> <body> <h1>絕對配置</h1> <p> 從上面開始150 pixel<br> 從右邊開始250 pixel </p> </body> </html> 67 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"> <!-h1 { font: bold 60px Arial, sans-serif; text-align: center; margin-bottom: 0; color: #99ccff; background-color: #ffffff } p { position: relative; top: -90px; font: bold 20px "標楷體",標楷體,sans-serif; text-align: center; margin-top: 0; color: #000000; background-color: transparent } --> </style> </head> <body> <h1>POSITION<br>RELATIVE</h1> <p>從普通的配置位置<br>進行相對性的移動。</p> </body> </html> 68 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"> <!-body { margin: 3em 0 1em; color: #000000; background: #ffffff url(grid.gif) } #navi { position: fixed; top: 0; left: 0; width: 100%; height: 1em; margin: 0; padding: 0.5em; text-align: center; color: #ffffff; background: #ffcc00; } h1, p { margin-left: 20px; margin-right: 20px; } --> </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> 69 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"> <!--#sample1 { position: absolute; z-index: 2; top: 130px; left: 100px; width: 130px; height: 90px; color: #ffffff; background-color: #339933} #sample2 { position: absolute; z-index: 1; top: 30px; left: 200px; width: 80px; height: 280px; color: #ffffff; background-color: #ff3300 } #sample3 { position: absolute; z-index: 3; top: 200px; left: 150px; width: 180px; height: 50px; color: #ffffff; background-color:#333399} #sample4 { position: absolute; top: 60px; left: 50px; width: 380px; height: 220px; color: #000000; background-color: #ffcc00 } p { padding: 0.5em } --> </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> 70 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"> <!-.none { display: none } .hidden { visibility: hidden } --> </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> 71 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"> <!-body { margin: 1.5em } #sample1 { overflow: scroll } #sample2 { overflow: auto } #sample3 { overflow: hidden } #sample4 { overflow: visible } p { width: 180px; height: 70px; line-height: 1.5; color: #000000; background: #ffcc00 } em { font-style: normal; font-weight: bold; font-size: large; color: #ff0000; background: transparent } --> </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> 72 第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> 73 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"> <!-body { margin: 2em } ul { list-style-image: url(star.gif); font: large "Times New Roman", Times, serif } --> </style> </head> <body> <ul> <li>list-style-image</li> <li>list-style-image</li> <li>list-style-image</li> </ul> </body> </html> 74 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"> <!-body { margin: 2em } .in { list-style-position: inside } em { color: #ff3300; background-color: #ffffff; font-style: normal; font-weight: bold } --> </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> 75 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"> <!-body { margin: 2em } ul { font-size: large; list-style: url(star.gif) disc inside } li { margin-bottom: 1em } --> </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> 76 第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"> <!-body { margin: 2em } table#sample1 { border-collapse: collapse } table#sample2 { border-collapse: separate } table, th, td { border: 3px solid #999999 } th { color: #000000; background-color: #cccccc } caption{ font-size: large; font-weight: bold; color: #ff3300; background: transparent } --> </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> 77 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"> <!-body { margin: 2em } table { border-spacing: 1em } table, th, td { border: 3px solid #999999 } th { color: #000000; background-color: #cccccc } --> </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> 78 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"> <!-body { margin: 2em } caption { caption-side: bottom; font-size: large; font-weight: bold; color: #ff3300; background: transparent } table, th, td { border: 3px solid #999999 } th { color: #000000; background-color: #cccccc } --> </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> 79 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"> <!-body { margin: 3em } table, td { border: 3px solid #999999 } td { font-size: large; font-weight: bold } td.hide { empty-cells: hide } td.show { empty-cells: show; border-color: #ff3300 } --> </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> 80 第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"> <!-p { text-align: center; font-weight: bold; padding: 0.4em; color: #000000; background: #ffcc00 } --> </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> 81 10.02 指定列印時換頁 h1, table { page-break-before: always } 82 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"> <!-body { margin: 2em} .note:before { content: url(hand.gif) } .warning:before { content: "【注意】"; color: #ff0000; background-color: #ffffff } div.info { border: dotted 3px #ff9900; padding: 0.2em 1.2em } --> </style> </head> <body> <div class="info"> <p class="note"> 若是將「\A」當成文字形式插入的話，則會在此處換行。 </p> <p class="warning"> 事實上幾乎沒有任何一個瀏覽器可以完全對應此性質。 </p> </div> </body> </html> 83 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"> <!-body { margin: 2em; line-height: 1.5 } q { quotes: "「" "」" } q:before { content: open-quote } q:after { content: close-quote } --> </style> </head> <body> <p> 在我的參考書中，對於<q>引用文字，以大括弧</q>來表示。 </p> </body> </html> 84 10.05 在CSS中加入註解 body { margin: 3em } /* 設定上下左右的邊界 */ h1 { font-size: medium; /* 設定字型大小為標準 */ color: #ffffff; /* 文字為白色 */ background: #ff6600 /* 背景為橘色 */ } p { line-height: 1.5 } /* 段落的行距為普通的1.5倍 */ 85