Microsoft PowerPoint - ch16_1.ppt

CSS

16-1 認識 CSS CSS (Cascading Style Sheets, 串接樣式表 ) 是由 W3C 所提出, 主要的用途是控制網頁的外觀最早的版本是 W3C 於 1996 年公布的 CSS 1, 接著 W3C 於 1998 年公布 CSS 2, 之後 W3C 於 2002 年公布 CSS 2.1 如果您想進一步瞭解 CSS, 可以參考 W3C 的 CSS 首頁 http://www.w3.org/style/css/

16-2 CSS 樣式規則與選擇器宣告宣告樣式規則選擇器 { 屬性 : 值 [; 屬性 2 : 值 2[; ]]} 例如 : 宣告宣告樣式規則 body {color : white; background : red} 選擇器屬性值屬性值

<html> <head> <title> 我的網頁 </title> </head> <body> <h1>hello World!</h1> </body> </html> <\Ch16\16-1.htm>

01:<html> 02: <head> 03: <title> 我的網頁 </title> 04: <style type="text/css"> 05: body {color : white; background : red} 06: </style> 07: </head> 08: <body> 09: <h1>hello World!</h1> 10: </body> 11:</html> <\Ch16\16-2.htm>

選擇器的種類類型選擇器例如 : body {color : white; background : red} h1 {font-family : 華康粗圓體 ; font-size : 30px; color : blue} 後續選擇器例如 : h1 {color : blue} /* 類型選擇器 h1, 文字色彩為藍色 */ i {color : green} /* 類型選擇器 i, 文字色彩為綠色 */ h1 i {color : red} /* 後續選擇器 h1 i, 文字色彩為紅色 */ 萬用選擇器例如 : * {padding : 0; margin : 0}

類別選擇器例如 :.note1 {color : green} p.hotnews {font-family : 華康粗黑體 ; font-size : 30px ; color : maroon} ID 選擇器例如 : #userintro {color : green} textarea#userintro {color : green}

16-3 連結 HTML 網頁與 CSS 樣式表一. 在 HTML 網頁的 <head> </head> 區塊內嵌入樣式表二. 使用 HTML 元件的 style 屬性指定樣式表三. 將樣式表放在單獨的檔案, 然後使用 @import 指令匯入 HTML 網頁四. 將樣式表放在單獨的檔案, 然後使用 <link> 標籤連結至 HTML 網頁

16-3-1 在 <head> 區塊內嵌入樣式表 01:<html> 02: <head> 03: <title> 樣式表 1</title> 04: <style> 05: h1 {font-family : 華康粗圓體 ; font-size : 30px; color : blue} 06: </style> 07: </head> 08: <body> 09: <h1> 歡迎光臨!</h1> 10: </body> 11:</html> <\Ch16\16-3.htm>

16-3-2 使用 HTML 元件的 style 屬性指定樣式表 <html> <head> <title> 樣式表 1</title> </head> <body> <h1 style="font-family : 華康粗圓體 ; font-size : 30px; color : blue"> 歡迎光臨!</h1> </body> </html> 使用 style 屬性指定樣式表 <\Ch16\16-3a.htm>

16-3-3 將樣式表匯入 HTML 網頁 h1 { font-family : 華康粗圓體 ; font-size : 30px; color : blue } <\Ch9\h1.css> <html> <head> <title> 樣式表 1</title> <style> @import url("h1.css"); </style> </head> <body> <h1> 歡迎光臨!</h1> </body> </html> <\Ch16\16-4.htm> 將樣式表定義在單獨的檔案使用 @import 指令匯入樣式表檔案亦可寫成 @import h1.css ;

16-3-4 將樣式表連結至 HTML 網頁 <html> <head> <title> 樣式表 1</title> <link rel="stylesheet" href="h1.css" type="text/css"> </head> <body> 使用 <link> 標籤連結樣式表檔案 <h1> 歡迎光臨!</h1> </body> </html> <\Ch16\16-4a.htm>

16-4 類別選擇器宣告宣告樣式規則. 類別選擇器 { 屬性 : 值 [; 屬性 2 : 值 2[; ]]} 例如 : 宣告宣告樣式規則.heading {font-size :30px;color:maroon} 選擇器屬性值屬性值

01:<html> 02: <head> 類別選擇器 03: <style> 04:.heading {font-family : 華康粗黑體 ; font-size : 30px ; color : maroon} 05:.content {font-family : 標楷體 ; font-size : 25px; color:olive} 06: </style> 07: </head> 08: <body> 09: <h1> 唐詩欣賞 </h1> 10: <p class="heading"> 春曉 </p> 11: <p class="content"> 春眠不覺曉, 處處聞啼鳥夜來風雨聲, 花落知多少?</p> 12: <p class="heading"> 竹里館 </p> 13: <p class="content"> 獨坐幽篁裡, 彈琴復長嘯深林人不知, 明月來相照 </p> 14: </body> 15:</html> <\Ch16\16-5.htm> a b a 唐詩名稱套用 heading 樣式規則 b 唐詩內容套用 content 樣式規則

16-5 ID 選擇器宣告宣告樣式規則 #ID 選擇器 { 屬性 : 值 [; 屬性 2 : 值 2[; ]]} 例如 : 宣告宣告樣式規則 #button1 {font-size :30px;color:red} 選擇器屬性值屬性值

01:<html> 02: <head> ID 選擇器 03: <style> 04: #button1 {font-size : 30px; color : red} 05: #button2 {font-size : 30px; color : green} 06: </style> 07: </head> 08: <body> 提交按鈕透過 id 屬性指定套用 09: <h1> 意見調查單 </h1> button1 樣式規則 10: <form> 11: <input type="submit" value=" 提交 " id="button1"> 12: <input type="reset" value=" 重新輸入 " id="button2"> 13: </form> 14: </body> 重新輸入按鈕透過 id 屬性指定套 15:</html> 用 button2 樣式規則 <\Ch16\16-7.htm> a b a 套用 button1 樣式規則 b 套用 button2 樣式規則

16-6 常用的 CSS 屬性 16-6-1 字型屬性 font-family: 例如 body {font-family : 華康細圓體, 微軟正黑體 } font-size: 例如 h1 {font-size : 30px} 或 h1 {font-size : 150%} font-style: 例如 p {font-style : italic} font-variant: 例如 h3 {font-variant : small-caps} font-weight: 例如 h1 {font-weight : bold} line-height: 例如 line-height : 2 font: 例如 p {font : italic large 標楷體 }

<h1> 嫦娥 </h1> <p> 雲母屏風燭影深, 長河漸落曉星沉 <br> 嫦娥應悔偷靈藥, 碧海青天夜夜心 </p> <h1> 瑤瑟怨 </h1> <p style="font : italic bold large 標楷體 "> 冰簟銀床夢不成, 碧天如水夜云輕 <br> 雁聲遠過瀟湘去, 十二樓中月自明 <p>

16-6-2 文字屬性 text-indent: 例如 p {text-indent : 20px} text-align: 例如 h1 {text-align : center; font-size : 30px} text-decoration: 例如 p {text-decoration : underline} letter-spacing: 例如 p {letter-spacing : 3px} word-spacing: 例如 p {word-spacing : 3px} text-transform: 例如 <h2 style="text-transform : uppercase">i am Jen</h2>

16-6-3 色彩屬性語法 : color : 色彩名稱 rgb(rr, gg, bb) #rrggbb 例如 : p {color : red} p {color : rgb(100%, 0%, 0%)} p {color : rgb(255, 0, 0)} p {color : #ff0000}

16-6-4 背景屬性 background-color: 例如 p {background-color : yellow; color : green} background-image: 例如 body {background-image : url(a.jpg)} background-repeat: 例如 body {background-image : url(a.jpg); background-repeat : repeat-x} background-attachment: 例如 body {background-image : url(a.jpg); background-attachment : fixed} background-position: 例如 <pre style="background-image : url(bg06.gif); background-position : 6cm 3cm"> background: 例如 p {background : url("bg02.gif") norepeat right bottom}

16-6-5 清單屬性 list-style-type: 例如 ul {list-style-type : circle} list-style-image : 例如 ul {list-style-image : url(blockgrn.gif)} list-style-position : 例如 ul {list-style-type : circle; liststyle-position : inside} list-style : 例如 ol {list-style : upper-roman inside}

02: <head> 03: <title> 項目符號與編號 </title> 04: <style> 05: ul {list-style-type : disc} 06: </style> 07: </head> 08: <body> 09: <ul> 10: <li> 射鵰英雄傳 11: <li> 天龍八部 12: <li> 倚天屠龍記 13: <li> 鹿鼎記 14: </ul> 15: </body> <\Ch16\list1.htm>

16-6-6 框線屬性 border-style: 例如 <img src="fig.jpg" style="border-style : solid"> border-top-style border-bottom-style border-left-style border-right-style border-color: 例如 <img src="fig.jpg" style="border-style : solid; border-color : red"> border-top-color border-bottom-color border-left-color border-right-color

border-width : 例如 <img src="fig.jpg" style="border-style : solid; border-width : 10px"> border-top-width border-bottom-width border-left-width border-right-width border-top : 例如 h1 {border-top : dashed thin} border-bottom border-left border-right border : 例如 p {border : thick solid blue}