cascading style sheets css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets (CSS) PowerPoint Presentation
Download Presentation
Cascading Style Sheets (CSS)

play fullscreen
1 / 79

Cascading Style Sheets (CSS)

135 Views Download Presentation
Download Presentation

Cascading Style Sheets (CSS)

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

  1. Cascading Style Sheets (CSS) 鄧姚文 http://www.ywdeng.idv.tw

  2. 大綱 • 簡介 • 樣式表 • 類別選擇器 • id 選擇器 • 前後文選擇器 • 段落屬性 • 背景屬性 • 邊框屬性 • 區塊屬性 • 連結屬性 • 定位屬性 • 文字屬性

  3. CSS 簡介 • Separation of style from structure • 將樣式(裝飾)和文章結構分開 • HTML 標籤只用來標示文章結構 • CSS 負責裝飾 • CSS 和 JavaScript 搭配使用,可以動態改變網頁的呈現效果

  4. CSS 基本語法 • CSS 的修飾對象可以是任何 HTML Tag • 多個 HTML Tag 之間以逗點(,)分隔 • 屬性定義以大括弧({ })括住 • 屬性定義的寫法是 屬性名稱:屬性值 • 多個屬性定義之間以分號(;)分隔 <style type="text/css"> h1, h2 { color:red; font-weight:bold } </style>

  5. CSS 的種類 • Inline (同列) : 使用HTML標記的style屬性,只於定義的區段有效。 • <p style="background-color:#0000FF"> • Embedding (內嵌) : 使用 <style>...</style>標記,置於body本文區之前,供整個網頁使用。可使用多個<style>...</style>標記 <HTML> 文件開始 <style TYPE=text/css> 排版樣式區開始 <!-- 排版樣式區內容 --> </style> 排版樣式區結束 <BODY> 本文區開始 本文區內容 </BODY> 本文區結束 </HTML> 文件結束

  6. CSS 的種類(續) • Linking (連結) : 使用 <link>標記 ( 用於HEAD區 )。 • 將排版樣式分開處理,以 . CSS 為副檔名儲存成一個獨立的文字檔,再連結使用。 • 可使用多個<link>標記。 <HTML> 文件開始 <HEAD> 標頭區開始 <LINK TYPE=text/css REL=stylesheet HREF=s1.css> 連結CSS檔 </HEAD> 標頭區結束 <BODY> 本文區開始 本文區內容 </BODY> 本文區結束 </HTML> 文件結束

  7. CSS 相關的 HTML 標記、屬性 • CSS 相關的 HTML 標記 : • <style>...</style> 設定 Style Sheet 格式 • <link> 連結指令 • <div>...</div> 分離區段 ( 允許重疊顯示 ) • <span>...</span> 小區段範圍 • CSS 相關的 HTML 標記屬性 : • style = cssl-properties 樣式 • id = value 代號 • class = classname 種類

  8. Style Sheet 樣式表 • 樣式宣告的格式:   選擇器{樣式規則;} • 選擇器(Selector):樣式要套用的對象 • 樣式規則(Rule):樣式設定的內容 • 每個樣式後要加 ;

  9. Style Sheet 樣式表(續) • 集中宣告格式:同時宣告數個樣式 body { background:green; color:blue; font:12; font-family:新細明體; }

  10. Style Sheet 樣式表(續) • 分開寫也OK body {     background:green ;     color:blue ; } body {     font:12 ;     font-family:新細明體  ; }

  11. Style Sheet 樣式表(續) • 一次指定多個選擇器 p, h1, h2 { color:red }

  12. 將樣式表用到網頁上 • Inline:直接將CSS寫在HTML標籤的style屬性之中。 • Embedding:將CSS寫在<head>區內,依照標籤種類套用到整個頁面。 • Class Selector:在<head>區內定義CSS類別(以名稱以 .開頭),在頁面裡以HTML標籤的class屬性選擇樣式類別加以套用。 • ID Selector:依據HTML中各標籤的ID值自動的套用樣式 。 • 外部CSS檔:先建立好.CSS樣式檔 • 以<link>標籤將CSS檔案引入。 • 以@import指令將CSS檔案引入。

  13. 將樣式表用到網頁上inline • 使用於HTML標籤中的style指令 • 在每個HTML標籤中,都可用style參數,將CSS設定於後,CSS字串要用引號括住 • <div style="position:absolute; width:20px; height:20px">

  14. 將樣式表用到網頁上(續)embedding • 在<HEAD>與</HEAD>之間宣告 • 整個文件的<h1> 全部都套用此樣式 <HTML> <HEAD> <style type="text/css">--------指明為CSS樣式 <!-- h1 { color:blue; } 其他樣式 --> </style> </HEAD>

  15. 將樣式表用到網頁上(續)class selector • 寫在<style>標籤中,但是並不套用於任何標籤。 • 先給它一個名字,將設定寫好,需要時再利用class參數指定 <HTML> <HEAD> <style TYPE="text/css"> <!-- .mainUser {color:#0000AA; font-size:20px} --> </style> </HEAD> <BODY> <div class="mainUser">...</div> </BODY> </HTML>

  16. 將樣式表用到網頁上(續)class selector • 限定樣式類別可套用的對象 span.mainWin {color:#0000AA; font-size:20px} <span class=mainWin> 只有SPAN標籤可用CLASS參數套用此設定,其它不行

  17. 將樣式表用到網頁上(續)id selector • 依據HTML中各標籤的ID值自動的套用樣式 • 只有 id 相符的 <span> 標籤套用樣式: #std {color:#FF0000; font-size:20px} <div id="std"> span#std {color:#0000AA; font-size:20px} <span id="std">

  18. 將樣式表用到網頁上(續) • 先建立好樣式檔,再連結 • 先將樣式內容打好存成*.CSS檔 • 然後以連結方式加入 • 就可以將寫好的*.css設定檔引入網頁中 • 此指令只能用在<HEAD>標籤中。 <Link REL=stylesheet TYPE="text/css" HREF="檔名.css">

  19. 將樣式表用到網頁上(續) • 匯入檔 • 先建好CSS樣式檔 • 在HTML檔中<style>與</style>之間加入 • @import URL("樣式檔位址") ; • 此指令只能用在<style>標籤中。

  20. Context Selector 前後文選擇器 • 依特定狀況而定的樣式 • 例如 • H1 EM { COLOR:RED } • <H1> 這是特別 <EM> 重要的字 </EM> </H1> • 重要的字會以EM的樣式設定來呈現(紅色) • H1與EM間須以空格隔開,非逗號,樣式後面無分號;

  21. 段落屬性的設定 • letter-spacing • 功能 :設定文字間隙 ( 可設單位屬性 : 點 pt、英寸 in、公分 cm、像素 px ) • 語法 : { letter-spacing : normal︱( length ) } • 範例 : {letter-spacing:10pt} • 此性質可設定字距,也就是字與字的間隔,只需指定一個長度單位給它,如cm、mm、in、pt、px、em、ex等等,或用normal特徵字設為預設值。如 letter-spacing=3px,則設定字距為 3px。

  22. 段落屬性的設定(續) • line-height • 功能 : 設定文字行列高度 ( 可設單位屬性 : 點 pt、英寸 in、公分 cm、像素 px、百分比 % ) • 語法 : { line-height : normal︱( number )︱( length )︱( percentage ) } • 範例 : {line-height:10pt} • 此性質可設定列高,可指定特徵字normal設為預設值,或指定含單位的長度值,或百分比(參照於父元件)均可。如line-height:3px,則設定列高為3px。

  23. 段落屬性的設定(續) • text-align • 功能 :設定調整文字 ( 可設左邊、右邊、置中、整齊 ) • 語法 : { text-align : left︱right︱center︱justify } • 範例 : {text-align:center} • 這個性質可決定文句在區塊內的水平對齊方式,可用值有 left、right、center、justify。如 text-align:center,則文字水平置中。

  24. 段落屬性的設定(續) • text-decoration • 功能 : 設定文字裝飾 • 語法 : { text-decoration : none︱underline︱line-through︱overline } • 範例 : {text-decoration:underline} • 設定此區塊內的字句要不要加裝飾線,可用值有 • none(不加)、 • underline(加底線)、 • overline(加頂線)、 • line-through(加刪除線)、 • blink(大致同none)。 • 如text-decoration:under-line,則文字加底線。

  25. 段落屬性的設定(續) • text-indent • 功能 : 設定文字縮排 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) • 語法 : { text-indent : ( length )︱( percentage ) } • 範例 : {text-indent:1cm} • 這個性質可設定段落的首行縮排(就像作文時一樣,首行要縮排),可指定含單位的長度值,或是百分比值(參照於父元件)。 • 如text-indent:24px,則縮排24px。

  26. 段落屬性的設定(續) • text-transform • 功能 : 設定文字改變 • 語法 : { text-transform : none︱capitalize︱uppercase︱lowercase } • 範例 : {text-transform:capitalize} • 設定英文字母大小寫顯示法。可用值有 • none(不自動轉換)、 • capitalize(第一個字母自動轉為大寫)、 • uppercase(全部自動轉換為大寫)、 • lowercase(全部自動轉換為小寫)。 • 如text-transform:lowercase,則全部英文字都會自動轉為小寫。

  27. 段落屬性的設定(續) • text-autospace • 這是用來調整字距的性質,用來設定是否於特定位置加大空白間距,以增加美觀。可用特徵字有 • none(不使用)、 • ideograph-alpha(於遠東語系與拼音語系間加大空白)、 • ideograph- numeric(於遠東語系與數字間加大空白)、 • ideograph-parenthesis(於遠東語系與括號間加大空白)、 • ideograph- space(遠東語系之兩旁加大空白)。 • 一般很少有人用這個性值,通常是text-autospace:none。

  28. 段落屬性的設定(續) • text-justify • 設定段落中各句如何調整,使段落左右之邊界對齊。可用值有 • inter-word(利用調整字距)、 • newspaper(利用調整字距或字母間距)、 • distribute(與newspaper很像,但最適用於東亞)、 • distribute-all-lines(連最後一行也調整至同寬)、 • inter-ideograph(利用增加或減少字距來調整)、 • auto(由瀏覽器語系決定)。 • 這個性質要 ie5.0 以上才能使用,一般都用 text-justify:auto。

  29. 段落屬性的設定(續) • word-break • 設定一行結束時的斷字法,可用值有 • normal(允許斷字)、 • break-all(允許斷字,適用於大量中文夾雜少量英文)、 • keep-all(只允許於英文斷字,適用於大量英文夾雜少量中文)。 • 一般用 word-break:break-all 較適於中文字。

  30. 背景屬性設定 • 背景性質設定可說是css最強悍的地方,有了這些css,我們甚至可以在一段文字,或一格表格中,套用不同的背景。

  31. 背景屬性設定(續) <html> <head> <style> span {position:absolute;border:solid 1px black;width:300px;height:100px} span.front {position:absolute;background:url(../graph/001.jpg) repeat} span.back {position:absolute;background:url(../graph/002.jpg) repeat} span span {position:absolute;width:200;font:bold 50px arial;border:none} </style> </head> <body> <span class=back style="top:20px;left:20px"></span> <span class=front style="top:0px;left:0px"> <font style=“color:gray;top:25px;left:57px”>灰色</font> <font style=“color:blue;top:18px;left:50px”>藍色</font> </span> </body> </html>

  32. 背景屬性設定(續) • Background • 功能 : 設定背景圖片、顏色、混合、透空、捲動、位置、重複 • 語法 : • { background : transparent︱( scroll )︱( color )︱url ( url )︱( position )︱( repeat ) } • background-attachment • 功能 :設定背景圖片是否捲動 ( 分為 : 捲動、固定 ) • 語法 : { background-attachment : scroll︱fixed }

  33. 背景屬性設定(續) • background-color • 功能 :設定背景顏色、透空 • 語法 : { background-color : transparent︱( color ) } • ( color ) 可為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度 • 範例 : {background-color:#ff0000} • background-image • 功能 : 設定背景圖片 • 語法 : { background-image : none︱url ( url ) } • 範例 : {background-image:url(1.jpg)}

  34. 背景屬性設定(續) • background-position • 功能 :設定背景位置 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% ) • 語法 : • { background-position : top︱middle︱bottom︱left︱center︱right︱( length )︱( position ) } • background-repeat • 功能 :設定背景重複填滿方式 • 語法 : { background-repeat : repeat︱repeat-x︱repeat-y︱no-repeat }

  35. 邊框屬性設定 • 在CSS中,幾乎所有的元件都可以使用框線設定,不像HTML般,只有表格才可使用框線。 • 不但可任意控制框線粗細、顏色,就連框線的形式都可以設定

  36. 邊框屬性設定(續) • border • 功能 :設定邊框 • 語法 : { border : ( border-width )︱( border-style )︱( color ) } • ( border-width ) - 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px • ( border-style ) - 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 • ( color ) - 可設為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度 • 範例 : {border:thick double red}。

  37. 邊框屬性設定(續) • border-bottom • 功能 : 設定下邊框 • 語法 : { border-bottom : ( border-bottom-width )︱( border-style )︱( color ) } • 範例 : {border-bottom:groove #00ff00} • border-bottom-color • 功能 : 設定下邊框顏色,可設為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度 • 語法 : { border-bottom-color : ( color ) } • 範例 : {border-bottom-color:blue}

  38. 邊框屬性設定(續) • border-bottom-style • 功能 : 設定下邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 ) • 語法 : { border-bottom-style : none︱solid︱double︱groove︱ridge︱inset︱outset } • 範例 : {border-bottom-style:inset} • border-bottom-width • 功能 : 設定下邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px ) • 語法 : { border-bottom-width : thin︱medium︱thick︱( length ) } • 範例 : {border-bottom-width:1cm}

  39. 邊框屬性設定(續) • border-color • 功能 : 設定邊框顏色,可設為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度 • 語法 : { border-color : ( color ) } • 範例 : {border-color:#ffff00} • border-left • 功能 : 設定左邊框 • 語法 : { border-left : ( border-left-width )︱( border-style )︱( color ) } • 範例 : {border-left:thin outset}

  40. 邊框屬性設定(續) • border-left-color • 功能 : 設定左邊框顏色,可設為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度 • 語法 : { border-left-color : ( color ) } • 範例 : {border-left-color:#00ff00} • border-left-style • 功能 : 設定左邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 ) • 語法 : { border-left-style : none︱solid︱double︱groove︱ridge︱inset︱outset } • 範例 : {border-left-style:ridge}

  41. 邊框屬性設定(續) • border-left-width • 功能 : 設定左邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px ) • 語法 : { border-left-width : thin︱medium︱thick︱( length ) } • 範例 : {border-left-width:thick} • border-right • 功能 : 設定右邊框 • 語法 : { border-right : ( border-right-width )︱( border-style )︱( color ) } • 範例 : {border-right:10pt #00a}

  42. 邊框屬性設定(續) • border-right-color • 功能 : 設定右邊框顏色,可設為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度 • 語法 : { border-right-color : ( color ) } • 範例 : {border-right-color:#00f} • border-right-style • 功能 : 設定右邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 ) • 語法 : • { border-right-style : none︱solid︱double︱groove︱ridge︱inset︱outset } • 範例 : {border-right-style:groove}

  43. 邊框屬性設定(續) • border-right-width • 功能 : 設定右邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px ) • 語法 : { border-right-width : thin︱medium︱thick︱( length ) } • 範例 : {border-right-width:10px} • border-style • 功能 : 設定邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 ) • 語法 : { border-style : none︱solid︱double︱groove︱ridge︱inset︱outset } • 範例 : {border-style:double}

  44. 邊框屬性設定(續) • border-top • 功能 : 設定上邊框 • 語法 : { border-top : ( border-top-width )︱( border-style )︱( color ) } • 範例 : {border-top:1in yellow} • border-top-color • 功能 : 設定上邊框顏色,可設為顏色名稱 ( 16種 ) 或16進制表示法 - #rrggbb ( 00暗~ff亮 ) 、#rgb ( 0暗~f亮 ) 表紅綠藍強度 • 語法 : { border-top-color : ( color ) } • 範例 : {border-top-color:red}

  45. 邊框屬性設定(續) • border-top-style • 功能 : 設定上邊框樣式 ( 可設無、實線、雙線、溝線、脊線、嵌入線、浮出線 ) • 語法 : { border-top-style : none︱solid︱double︱groove︱ridge︱inset︱outset } • 範例 : {border-top-style:solid} • border-top-width • 功能 : 設定上邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px ) • 語法 : { border-top-width : thin︱medium︱thick︱( length ) } • 範例 : {border-top-width:thin}

  46. 邊框屬性設定(續) • border-width • 功能 : 設定邊框寬度 ( 可設薄、普通、厚、長度-單位屬性 : 點pt、英寸in、公分cm、像素px ) • 語法 : { border-width : thin︱medium︱thick︱( length ) } • 範例 : {border-width:10pt}

  47. 邊框屬性設定(續) <script language="JavaScript" type="text/javascript"> function change(index){ index.style.borderstyle="inset"; index.style.color="blue"; } function rechange(index){ index.style.borderstyle="outset"; index.style.color="black"; }

  48. 邊框屬性設定(續) <style type="text/css"> span { position:absolute; border:outset 3px; width:80px; height:22px; cursor:hand; text-align:center; font-size:18px; color:black; font-family:arial; background:url(../graph/001.jpg); } </style>

  49. 邊框屬性設定(續) <body> <span style="top:5px;left:5px" onMouseOver="change(this)" onMouseOut="rechange(this)">html</span> <span style="top:35px;left:5px" onMouseOver="change(this)" onMouseOut="rechange(this)">css</span> <span style="top:65px;left:5px" onMouseOver="change(this)" onMouseOut="rechange(this)">jscript</span> <span style="top:95px;left:5px" onMouseOver="change(this)" onMouseOut="rechange(this)">JAVA</span> <span style="top:125px;left:5px" onMouseOver="change(this)" onMouseOut="rechange(this)">cgi</span> <span style="top:155px;left:5px" onMouseOver="change(this)" onMouseOut="rechange(this)">asp</span> </body>

  50. 區塊屬性設定 • 區塊是: • 用<div>、<span>等標籤所建立出的邏輯區域 • 圖形 • 表格 • 在DHTML中,使用區塊是非常頻繁的,所以區塊設定就顯得非常有用。