1 / 85

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS). 鄧姚文 http://www.ywdeng.idv.tw. 大綱. 簡介 樣式表 類別選擇器 id 選擇器 前後文選擇器. 段落屬性 背景屬性 邊框屬性 區塊屬性 連結屬性 定位屬性 文字屬性. CSS 簡介. Separation of style from structure 將樣式（裝飾）和文章結構分開 HTML 標籤只用來標示文章結構 CSS 負責裝飾 CSS 和 JavaScript 搭配使用，可以動態改變網頁的呈現效果

odette
Download Presentation

Cascading Style Sheets (CSS)

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. Cascading Style Sheets (CSS) 鄧姚文 http://www.ywdeng.idv.tw

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

  3. CSS 簡介 • Separation of style from structure • 將樣式（裝飾）和文章結構分開 • HTML 標籤只用來標示文章結構 • CSS 負責裝飾 • CSS 和 JavaScript 搭配使用，可以動態改變網頁的呈現效果 • http://www.w3.org/Style/CSS/

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

  5. CSS樣式規則與選擇器

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

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

  8. 練習：以 CSS 變換背景顏色 • 第一級：以按鈕指定顏色 • 第二級：隨機更換顏色 • 提示 • 以 document.body.style.backgroundColor = color; 改變網頁背景的顏色

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

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

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

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

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

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

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

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

  17. 將樣式表用到網頁上（續）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>

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

  19. 將樣式表用到網頁上（續）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">

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

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

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

  23. 段落屬性的設定 • 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。

  24. CSS 度量單位

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

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

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

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

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

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

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

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

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

  34. 背景屬性設定（續） <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>

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

  36. 背景屬性設定（續） • 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)}

  37. 背景屬性設定（續） • 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 }

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

  39. 邊框屬性設定（續） • 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}。

  40. 邊框屬性設定（續） • 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}

  41. 邊框屬性設定（續） • 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}

  42. 邊框屬性設定（續） • 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}

  43. 邊框屬性設定（續） • 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}

  44. 邊框屬性設定（續） • 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}

  45. 邊框屬性設定（續） • 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}

  46. 邊框屬性設定（續） • 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}

  47. 邊框屬性設定（續） • 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}

  48. 邊框屬性設定（續） • 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}

More Related