CSS(Cascading Style Sheets) 串接樣式表上課講義 - PowerPoint PPT Presentation

css cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CSS(Cascading Style Sheets) 串接樣式表上課講義 PowerPoint Presentation
Download Presentation
CSS(Cascading Style Sheets) 串接樣式表上課講義

play fullscreen
1 / 85
CSS(Cascading Style Sheets) 串接樣式表上課講義
86 Views
Download Presentation
gladys
Download Presentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. CSS(Cascading Style Sheets) 串接樣式表上課講義 本投影片資料來源: (1)CSS基本概念:台大計中 許凱平 kphsu@ccms.ntu.edu.tw 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. Displayproperty • 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版面範例參考 csslovecssBeautycssmaniacssimportunmatched stylewebstandard awardsDark 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"> <!-- 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>

  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"> <!-- 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>

  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"> <!-- h1, p { font-size: medium; /*將文字大小標準化*/ padding: 1em; border: double 3px #ff6600 /*以橘色雙重線圍住*/ } --> </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"> <!-- * { 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>

  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"> <!-- #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>

  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"> <!-- /*普通連結色的設定*/ 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>

  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"> <!-- p { line-height: 1.6 } p:first-line { color: #ffffff; background: #ff6600 } --> </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"> <!-- 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>

  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"> <!-- p em { color: #ffffff; /*文字設定為白色*/ background: #ff6600 /*背景設定為橘色*/ } --> </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"> <!-- .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>

  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"> <!-- 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>

  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"> <!-- .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>

  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"> <!-- 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>

  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"> <!-- 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>

  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"> <!-- 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>

  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"> <!-- #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>

  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"> <!-- 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>

  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"> <!-- .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>

  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"> <!-- #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>

  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"> <!-- code { white-space: pre } --> </style> </head> <body> <p> <code> function resetRadio() { for(var i = 0; i &lt; 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"> <!-- .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>

  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"> <!-- #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>