1 / 85

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

CSS(Cascading Style Sheets) 串接樣式表上課講義. 本投影片資料來源: ( 1 ) CSS 基本概念:台大計中 許凱平 kphsu@ccms.ntu.edu.tw http://ccms.ntu.edu.tw/~kphsu ( 2 ) CSS 範例: 博碩出版社, 『 最新詳解 JavaScript&HTML&CSS 語法辭典 - 增訂新版 』. 何謂樣式表 (Style Sheets)?. 風格 樣式表 體裁紙 如字體、顏色、大小 用途 控制文件在媒體上顯示的風格 媒體 電腦螢幕、電視、紙張、手機、聲音 理念

gladys
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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>

More Related