CSS 樣式與 HTML5 我們將融合前面兩章的內容, 為 HTML5 網頁搭配 CSS 設計樣式 本章的結果可能因為您的瀏覽器 ( 廠商 ) 或是版本新舊而有差異, 建議您使用新版瀏覽器來觀賞, 本文撰寫時的瀏覽器為 IE 11 與 Chrome 32.0.x 版 ( 註解 : 本書後續還有一章專門介紹新版的 CSS3) 圖 4-1 CSS 與 HTML5 標籤 ( 元素 ) 的對應 4-1 字體,fonts 我們可以針對字體的 字型 (font-family) 大小(font-size) 樣式(font-style) 寬度(font-weight) 這些屬性(Property) 進行設計
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 字型 (font-family): 可以一次設定多個字型, 把您想呈現的字型放在前面, 如果找不到此字型就會使用下一個 倘若您完全不設定就會沿用使用者電腦上的預設字型 以下三種寫法都可以 詳見範例 CSS04_01.html font-family : Arial, Candara, Verdana, sans-serif; font-family : Georgia, Corbel, "Times New Roman", serif; font-family : Consolas, "Courier New", monospaced; 圖 4-2 字型 (font-family) 會用到的字型, 您可以在 Word 軟體裡面找到字體名稱, 或是在 Windows 控制台 裡面的 字型 找到 4-2
CSS 樣式與 HTML5 Chapter 4 圖 4-3 範例 CSS04_01.html 執行成果, 字型 (font-family) 大小 (font-size): 字體大小有三種表示方法, 像素 (pixel) 通常以 px 為單位, 用來表示螢幕上的字體大小 也可以使用 百分比 (%) 或是 em 為單位 詳見範例 CSS04_02.html font-size : 16px; font-size : 150%; /* 字體比平常大 1.5 倍 寫成 150% */ font-size : 1em; /* 1em = 網頁的基礎字體大小, 通常是 16px */ 也可以搭配 xx-large( 特大字 ) x-large large medium ( 一般大小 ) small x-small 和 xx-small( 特小字 ) 改變字體的大小 4-3
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-4 範例 CSS04_02.html 執行成果, 字體大小 (font-size) 這裡要提到絕對單位與相對單位兩者的差異 : 絕對單位, 包含了 in( 英吋 ) cm( 公分 ) mm( 公釐 ) ( 英磅, 一磅等於 1/72 英吋 ) pc(oica, 一個 pica 等於 12 英磅 ) 絕對單位, 就是上面介紹的 em px( 像素,pixel) %( 百分比 ), 還有 ex( 字體的 x-height 通常是 font-size 的一半 ) 與 rem 樣式 (font-style): 可以寫成 normal( 正常字, 預設值就不用寫 ) 斜體 (italic) 或是 oblique font-style : italic; 圖 4-5 三種字體樣式 (font-style) 4-4
CSS 樣式與 HTML5 Chapter 4 寬度 (font-weight): 寫法如下 詳見範例 CSS04_03.html font-weight : bold; font-weight : normal; /* 厚 (bold 粗 ) 更厚 (bolder) 正常 (normal)*/ font-weight : 800; /* 數字共有九組 從 100 200... 800 900( 最厚 )*/ 圖 4-6 範例 CSS04_03.html 執行成果, 兩種不同的寫法, 但成果相同 ( 上面的第一種寫法是縮寫 ) 行列高度 (line-height): 段落之間的高度, 寫法如下 詳見範例 CSS04_04.html line-height : normal; line-height : 250%; line-height : 80px; 4-5
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-7 範例 CSS04_04.html 執行成果, 兩種不同的寫法, 但成果相同 ( 上面的第一種寫法是縮寫 ) 出個題目考考您 : <span id="myspan1" class="redtext">hello!</span>, 想要做到 : 這段 HTML 標籤裡面的 字 是紅色的 該撰寫哪一個 CSS 來表示? 參考解答 ( 兩者都正確 ): span#myspan1 { color:red; } 或是.redText { color:red; } 4-6
CSS 樣式與 HTML5 Chapter 4 4-2 色彩 (color) 與透明度 (opacity) 不管是字體的顏色或是顏色的透明度, 都直接影響了網頁的設計與美感 本章範例檔 色彩表_HEX_RGB.html 有完整列表 色彩 (color) 可以有三種寫法 第一種是 147 種事先定義好 對應常用英文單字的顏色, 例如 red green blue 等 第二種, 十六進位 Hex 前面請加上 # 符號 十進位的 RGB 則寫成 rgb( 號碼 1, 號碼 2, 號碼 3) 舉例來說, 藍色也可以細分成 navy( 海軍藍, 也可寫成 Hex: #000080 以及 RGB(0, 0, 128)) darkblue( 深藍, 也可寫成 Hex: #00008B 以及 RGB(0, 0, 139)) 詳見下面範例 CSS04_05.html: color : olive; /* 橄欖綠 */ color : #808000; /* 十六進位, 前面請加上 # 符號 */ color : rgb(128, 128, 0); /* 十進位的表示法 */ /* 請參閱本章範例檔 : 色彩表 _HEX_RGB.html 或是 Color_ 顏色表.html 有完整列表 */ 圖 4-8 範例 CSS04_05.html 執行成果, 色彩 (color) 的寫法採用 256 色的常用英文單字 4-7
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-9 基本色彩名稱 HEX( 十六進位 ) 與 RGB( 十進位 ) 編碼 資料來源 :http://www.w3.org/tr/css3-color/ 透明度 (opacity), 數值從 0.0( 顏色很淡, 幾乎看不到 )~1.0( 正常顏色 ) 請看下圖與範例 CSS04_06.html 的解說 opacity: 0.8; /* 從 0.0 ~ 1.0, 數字越大, 顏色越深!*/ filter:alpha(opacity=60); /* IE8 與更早期版本的寫法 */ 圖 4-10 範例 CSS04_06.html 執行成果, 色彩 (color) 的透明度, 數字越小越透明 4-8
CSS 樣式與 HTML5 Chapter 4 4-3 印刷 (Typographic) 屬性 這是認證考試的重點! 死背也得記下來! 您可以在這一節學到行列高度 (line-height, 段落之間的距離 ) 對落對齊(alignment) 等等的 CSS 屬性 letter-spacing: 文字段落之中, 每個字元之間的距離, 您可以增加也能減少, 單位是 em 或 px 等等 預設的狀態下, 跟您在前一節設定的 font-size 有關連 letter-spacing: 2em; letter-spacing: -3px; /* 減少字元間距 */ line-height : 段落之間的高度, 寫法如下 詳見上一節範例 CSS04_04.html line-height : normal; line-height : 250%; line-height : 80px; text-align: 對齊方向, 例如 : 置中 (center) 靠右(right) 靠左(left) 等等 詳見範例 CSS04_07_TextAlign.html text-align : justify; /* 左右兩側對齊 */ 圖 4-11 以 Word 為例,text-align:justify 如同圖片裡的 左右對齊 text-decoration: 例如文字下方出現底線 (underline) 的效果, 當您撰寫這個屬性,Visual Studio 會自動出現相關的值讓您挑選, 所以不用死背 詳見下圖成果與範例 CSS04_08_TextDecoration.html 4-9
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-12 當您撰寫 CSS 屬性時,Visual Studio 自動出現 值 與 簡易說明 讓您挑選 inherit 表示從父元素繼承 text-decoration 的設定值 圖 4-13 範例 CSS04_08_TextDecoration.html 執行成果 text-transform: 文字大小寫, 例如 none( 預設值 ) capitalize( 每個單字的字首都以大寫呈現 ) uppercase( 強制改成英文大寫 ) 與 lowercase ( 強制改成英文小寫 ),inherit 表示從父元素繼承 text-transform 的設定值 詳見下圖成果與範例 CSS04_09_ TextTransform.html 這是認證考試的重點! 死背也得記下來! 4-10
CSS 樣式與 HTML5 Chapter 4 圖 4-14 範例 CSS04_09_TextTransform.html 執行成果 注意看 HTML 碼的文字大小寫, 執行後會被修改 text-transform 與 text-shadow 兩者是考試的重點, 題庫與考題經常出現, 提醒您多加注意!! 出個題目考考您 : 畫面上想加入一個陰影 (drop shadow) 在文字下方一英吋的地方 而且設定陰影的圓角 (radius) 為 5 px 以下答案何者為真? ( 這題滿常考的, 出現機率頗高!) (1) text-shadow : 5px 1in 0px( 正確解答 ) (2) text-shadow : 5px 1in 5px (3) text-decoration : 5in 1in 5px (4) text-dropshadow : 5em 1in 0px (5) text-transform : 5pt 1in 5em 出個題目考考您 : text-transform 屬性裡面, 哪個值才是對的? ( 微軟考試裡面常出現這種題目, 利用同義的英文詞彙讓您混淆, 在英文裡面或許意思相同, 但在 HTML 或是 CSS 裡面沒有這些屬性, 故意讓您選錯 ) 4-11
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 (1) capitalize( 正確解答, 只有字首以 大寫 來表示 ) (2) capital (3) uppercase( 全部改成大寫字母, 請瞭解 uppercase 與 capitalize 的差異 ) (4) UpperFirst (5) FirstWordUpper 出個題目考考您 : text-transform 屬性裡面, 哪個值才是對的? (1) Lowercase( 正確解答, 以 小寫 來表示 ) (2) Blink (3) Upperword (4) Line-through (5) 25px 出個題目考考您 : 下列的 CSS 會呈現出什麼效果, 哪個選項是對的? table { border:2px solid black; font-family: Tahoma; } tr:nth-child(odd) { background-color: green } tr td:nth-ofotype(evan) { background-color: blue } (1) Table 表格的第一列, 底色是綠色 ( 正確解答 ) (2) Table 裡面的字體 ( 字型 ) 是 Arial, 格線 ( 框線 ) 是 2px (3) 表格 第三列 裡的第一個格子, 背景顏色是藍色 (4) 表格 第三列 裡的第二個格子, 背景顏色 不是 藍色 (5) 表格 第三列 裡的第二個格子, 背景顏色是藍色 ( 正確解答 ) 4-12
CSS 樣式與 HTML5 Chapter 4 4-4 CSS 排版觀念與 Box Model 此為認證考試重點! 中間的 Content( 內容 ) 通常是我們擺放的文字與圖片, 這才是重點! 而外圍的 Padding( 內邊界 留白 ) Border( 邊框 邊線 ) 與 Margin( 外邊界 ) 則是我們為了美觀而加入的排版效果 圖 4-15 CSS Box Model, 資料來源 :http://www.w3schools.com/css/css_boxmodel.asp 網路上有幾張圖片更能表達 CSS Box Model 的含意, 這些圖片更清楚 圖片來源與出處均標示在圖片下方 圖 4-16 CSS Box Model 立體示意圖, 資料來源 :http://www.hicksdesign.co.uk/boxmodel/ 4-13
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-17 CSS Box Model, 資料來源 :http://gl-ue.com/interactivity/grids.html padding 與 margin 的設定比較特別, 他們倆者的用法一樣 如果您寫 padding: 10px;( 或是寫 margin 也一樣 ) 就代表四周的距離都是 10px 如果您寫了四個值, 代表的順序是 上 右 下 左 四個位置, 請不要搞錯喔! 第一種寫法 : padding: 10px 11px 12 px 13px; /* 如果寫四個值, 順序是 上 右 下 左 四個位置 */ 第二種寫法 : padding-top: 10px; /* 順序是 上 右 下 左 */ padding-right : 11px; padding-bottom : 12px; padding-left : 13px; 上 右 下 左 這四個屬性不難記, 請記住關鍵字 TRouBLe( 英文單字, 麻煩 ) 就能想起 Top( 上 ) Right( 右 ) Bottom( 下 ) 與 Left ( 左 ) 四個關鍵字, 是不是很簡單呢? 或是請您以 順時針 的方向來記憶也行 4-4-1 設定值與呈現結果的差異 當我們設計了下面的樣式, 其實 呈現出來的 Box" 寬度 " 等於 280px 而非您定義的 250px, 這是為什麼呢? 4-14
CSS 樣式與 HTML5 Chapter 4 width:250px; padding:10px; border:5px solid gray; margin:10px; /* 設定為 auto, 代表上右下左都會置中對齊 */ /* margin 的寬度不包含在內 */ 280px 因為要加上左右兩邊的 padding border 的寬度 所以計算後的寬度為 250px (width) + 20px ( 左右兩邊的 padding 寬度,10 x 2) + 10px ( 左右兩邊的 border 寬度,5 x 2) margin 的寬度不包含在內 ( 左右兩邊的 margin 寬度,10 x 2) = 280px 圖 4-18 本例的 Box Model 個別寬度與總寬度 下圖可以看見 padding border 兩者不光是左右兩側的 寬度 而已, 也包含上下的 高度 請您特別注意! 4-15
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-19 CSS Box Model 除了左右兩側的 寬度 也包含上下的 高度 資料來源 : http://www.codeproject.com/articles/567385/cssplusboxplusmodelplusandpluspositioning 4-4-2 Case Study 實際做一個例子會更有感覺, 請看範例 CSS04_10_BoxModel.html 圖片原始大小為 100x132 經過我們設計之後,Box Model 排版效果如下圖 <head> <style> div.ex { width: 220px; padding: 10px; border: 5px solid gray; margin: 0px; } </style> </head> <body> <img src="w3css.gif" width="250" height="250"> <div class="ex"> The picture above is 250px wide. The total width of this element is also 250px. </div> </body> 4-16
CSS 樣式與 HTML5 Chapter 4 瀏覽器裡面都有針對網頁設計師提供好用的觀察工具 : 以 IE 瀏覽器來觀看網頁, 請按下 F12 按鈕便能啟動 Developer 工具 使用 Chrome 瀏覽器檢視網頁, 在畫面 ( 網頁成果 ) 中點選 滑鼠右鍵 並選擇 檢查元素 可以看到下方的 Box Model 解析圖 從下圖的執行結果可以看見,<div> 的文字部分沿用了我們定義的 Box Model 而出現 padding 與 border 的寬度 雖然文字內容 (content) 只有 220px 寬, 但呈現的結果會加上左右兩側的 padding(10px X 2 = 20px 寬度 ) 與 border(5px X 2 = 10px 寬度 ), 最後呈現出來的 Box 寬度是 220+20+10 = 250px(margin 的寬度不包含在內 ) 圖 4-20 範例 CSS04_10_BoxModel.html 將圖片加上 Box Model 以後出現 padding border 等等 4-4-3 Collapsing margins 與設定負值 如果您有兩個 Box 相連在一起 ( 不管是上下相連或是左右相連 ), 兩者都設定 margin:10px 其實這兩個 Box 的 間隔 只有一個 margin(10px, 取兩者 margin 最大值 ) 而非兩者的 margin 的總和 (10px X 2) 都算在內 4-17
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 這種情況稱為 Collapsing( 折疊 崩壞 )margins, 如下圖所示, 請您動手看範例 CSS04_10_BoxModel.html 並仔細體會 圖 4-21 Collapsing margins, 上下兩個 Box,<div class="ex"> 其間的 margin 有重疊, 共用 10px 的間距 ( 取兩者 margin 最大值 ) 而非 20px(10px X 2) 提醒您,margin 可以設定 負值, 讓多個 Box 的邊界可以彼此重疊在一起 但是 padding 就不允許負值 請留意 請看範例 CSS04_10_ BoxModel_Margin.html, 成果如下圖 圖 4-22 margin 設定 負值, 讓多個 Box 邊界彼此重疊 4-18
CSS 樣式與 HTML5 Chapter 4 4-4-4 padding border 與 margin 四周設定值 上 右 下 左 瞭解上面 Box Model 的觀念以後, 我們實際設定 padding border 與 margin 上右下左 的設定值 以範例 CSS04_11.html 說明如下 : <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <style> h2.highlight { height: 100px; width: 500px; /* 主要內容 (Content) 的大小 */ padding: 10px; border: 2px dotted blue; /* 虛線 藍色 */ margin: 25px 0 25px 0; /* 也可以簡單寫成 25px 0 即可 */ } </style> </head> <body> <h2 class="highlight"> 您好, 這是一個 Box Model 範例!</h2> </body> </html> IE 瀏覽器的用戶可以按下 F12 按鈕, 而 Chrome 瀏覽器在畫面 ( 網頁成果 ) 中點選 滑鼠右鍵 並選擇 檢查元素 可以看到下方的 Box Model 解析圖 4-19
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-23 範例 CSS04_11.html 執行結果與 IE 瀏覽器的 Box Model 解析圖, 請按下 F12 按鈕 4-20
CSS 樣式與 HTML5 Chapter 4 圖 4-24 範例 CSS04_11.html 執行結果與 Chrome 瀏覽器的 Box Model 解析圖 點選 滑鼠右鍵 並選擇 檢查元素 便能看見 當然, 您也可以逐一設定 padding border 與 margin 四周 上 右 下 左 的設定值 這四個屬性不難記, 請記住關鍵字 TRouBLe( 英文單字, 麻煩 ) 就能想起 Top( 上 ) Right( 右 ) Bottom( 下 ) 與 Left( 左 ) 四個關鍵字, 或是請您以 順時針 的方向來記憶也行 padding-top: 10px; padding-right : 10px; padding-bottom : 10px; padding-left : 10px; /* padding 不可以有負值 */ 4-21
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 Border ( 框線 ) 可以設定的東西更多了, 您可以參閱前面的範例 CSS04_08_TextDecoration.html( 如下圖 ), 使用已經學習過的 text-decoration 的設定值 border-width: 2px; border-style: dotted; /* 虛線 可參閱下圖 text-decoration 的設定值 */ border-color: blue; 圖 4-25 範例 CSS04_08_TextDecoration.html 執行成果 4-4-5 Content( 內容 ) 的其他設定 Box Model 的內容 (Content) 還有其他的設定可以用來凸顯資訊, 建議您參閱 CSS 的書籍以獲得更進一步的資訊, 以下僅是簡單介紹 : visibility 屬性可以搭配 visible( 此為預設值 ) 與 hidden( 隱藏 看不見 ) display 屬性可讓您設定如何顯示在頁面上的元素 這包括 隱藏 所選擇的元素, 或完全從頁面 移除 它們 範例 CSS04_13_DisplayNone.html 將會解釋兩者差異 :visibility:hidden 與 display:none( 文字與格子都在表格內消失了 ) 4-22
CSS 樣式與 HTML5 Chapter 4 圖 4-26 範例 CSS04_13_DisplayNone.html 展示 visibility:hidden 與 display:none 這兩者的差異 下圖的範例 CSS04_14_DisplayBlock.html 展示三種 display 的設定值 重點! 這裡是常見的出題範圍 Inline, 此為預設值 none, 這一段文字在畫面 ( 瀏覽器 ) 會消失 請比對上圖 ( 上一個範例 ) 更能瞭解 block, 會有分行 換行 ( 換段落 ) 的符號加入 4-23
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-27 範例 CSS04_14_DisplayBlock.html 展示三種 display 的設定值 出個題目考考您 : 下圖的排版原來是左上方的樣子, 如何改成圖片右下方的樣式呢? 請問您要撰寫的 CSS 碼為何?( 微軟考試會用選擇題的方式, 列出幾個答案讓您選擇, 比較不會讓您自己打字 寫程式碼 ) 圖 4-28 請把原本的 CSS 排版, 改成圖片右側的樣式 參考答案為 ( 這類的題目滿常見, 會出現好幾題 ): document.getelementbuid("mylogo").style.display = "inline"; 4-24
CSS 樣式與 HTML5 Chapter 4 position 屬性使您能夠設置定位方法 這是常考的重點!! 四種值是 static( 靜態, 此為預設值 )fixed( 固定的 ) absolute( 絕對的 ) 與 relative( 相對的 ) 請參閱範例 CSS04_15_Position.html 這是常考的重點!! 出個題目考考您 : 網頁上要放入一個 Logo 圖案, 比網頁上沿還要 低 往下 5 pixels, 請問您要撰寫的 CSS 碼為何?( 微軟考試會用選擇題的方式, 列出幾個答案讓您選擇, 比較不會讓您自己打字 寫程式碼 ) HTML 網頁上已經有 : <div> LOGO : <br /> <div id="mylogo"></div> </div> 參考答案為 ( 這類的題目滿常見, 尤其是 relative 關鍵字 ): document.getelementbuid("mylogo").style.position = "relative"; document.getelementbuid("mylogo").style.top = "5px"; 出個題目考考您 : 網頁上有一段 HTML( 如下 ), 想要把 inner 段落固定在距離左上角 15px 的位置, 您該使用 position 的哪個值來做? HTML 網頁上已經有 : <div id="outter" style="position:relative"> <p id="inner"> </p> </div> 參考答案為 : (1) relative (4) static (2) absolute( 正確解答 ) (5) share (3) fixed 4-25
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 float 屬性使您能夠選擇的元素出來的內容流, 並讓它們 浮動 在包含元素的左側或右側 請參閱範例 CSS04_15_Float.html 圖 4-29 範例 CSS04_15_Float.html 使用 float:right 的成果 圖片會 漂浮 在文字右側 圖 4-30 透過 IE 瀏覽器的 F12 按鈕看得更清楚, 圖片 <img> 的確是 漂浮 在文字段落之上, 並且靠右對齊 4-26
CSS 樣式與 HTML5 Chapter 4 overflow 屬性, 當元素的內容 ( 文字 ) 太大 ( 大於 box 時 ) 會如何處置 設定為 scroll 時候, 資料量太大就會出現 Scroll Bar 讓您拉動 ( 如下圖, 範例 CSS04_17_Overflow.html) 圖 4-31 範例 CSS04_17_Overflow.html, 設定 overflow:scroll 之後, 資料量太大時這區塊就出現 Scroll Bar box-sizing 屬性, 可以設置任一元素 Box Model 的 width 和 height 屬性 設為 content-box( 此為預設值 ) 會如文章前面所述的運作 設為 border-box, 那麼 width 和 height 屬性適用於 content padding border 與 margin 全部統合在一起 ( 詳見範例 CSS04_18_ BoxSizing.html) 4-27
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-32 範例 CSS04_18_BoxSizing.html, 設定 box-sizing: border-box 4-5 背景 (Background) 很多網頁都有背景顏色 背景圖片等等, 本節要介紹的就是 CSS 的背景 (background) 設定 background-image, 背景圖片 通常使用 url(' 圖片的網址或是存放的目錄與檔名 ') background-image:url('../images/pattern.jpg'); /* url 可以寫上網址.. 符號代表網站的 上一層 目錄 */ background-image:url('logo.jpg'); /* 圖片與網頁在同一個目錄下, 只需寫上圖片檔名即可目錄 */ 4-28
CSS 樣式與 HTML5 Chapter 4 background-size, 背景大小 可以使用 px( 像素 ) 為單位或是百分比 (%) background-size: 40px 60px; /* 第一個是 寬度 (width), 第二個是 高度 (height) */ background-color, 背景顏色 使用常見的英文單字代表顏色 HEX 或是 RGB 編碼 本章前面 4-2 節 色彩 (color) 與透明度 (opacity) 已經介紹過, 可參閱範例 色彩表 _HEX_RGB.html 的完整列表 以下列出三原色的基本寫法, 供您參考 英文單字 ( 顏色 ): 紅色 red 綠色 green 藍色 blue HEX 十六進位 : 紅色 #ff0000 綠色 #00ff00 藍色 #0000ff RGB 十進位 : 紅色 rgb(255,0,0) 綠色 rgb(0,255,0) 藍色 rgb(0,0,255) background-color : green; background-color : #00FF00; /* HEX 顏色編碼 */ background-color : rgb(0, 255, 0); /* RGB 顏色編碼 */ background-color : transparent; /* 透明 */ 另外還有新的 RGBA HSL HSLA 三種新的顏色表示法, 唯有新版瀏覽器才支援, 所以僅供參考 ( 微軟 MOA 教材沒有提到這部分 ) RGBA 有四碼, 前三碼跟 RGB 一樣, 第四個參數是 opacity 透明度 ( 可寫成 0.0 透明 ~ 1.0 代表完全不透明 ) HSL 有三碼, 分別是 hue saturation 與 lightness( 色相 飽和度 亮度 ), 第一個 hue 代表色輪 (color wheel) 的角度, 從 0~360 0 或 360 代表紅色,120 是綠色,240 是藍色 第二個是飽和度的百分比 (%), 從 0%( 灰階 ) 到 100%( 全彩 ) 第三個是亮度, 從 0% ( 黑 ) 到 100%( 白 ) HSL 的三原色分別是 : 紅色 (0, 1, 0.5) 綠色(0, 1, 0.5) 藍色 (240, 1, 0.25) HSLA 有四碼, 前三碼是上面介紹過的 HSL, 第四碼是 opacity 透明度 ( 可寫成 0.0 透明 ~ 1.0 代表完全不透明 ) 4-29
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-33 色輪 (color wheel) 與 HSL 顏色碼 hue saturation 與 lightness( 色相 飽和度 亮度 ) ( 圖片來源 :wiki 維基百科 ) background-position, 背景位置 第一個參數是水平 (horizontal position), 第二個是垂直 (vertical) 可以使用絕對值(absolute value, 如 top bottom left right center) px( 像素 ) 或是百分比 (%) background-position : left top; /* 把圖片鎖定在左上方 */ background-position : 100% 100%; background-position : 8px 8px; /* 圖片鎖定在左邊 8px 上方 8px 的位置 */ background-repeat, 背景圖片可以重複出現 如果背景圖片較小, 您需要它重複出現以填滿整個畫面 可以設為 repeat( 此為預設值, 重複出現並填滿畫面 ) repeat-x( 橫向填滿 左右填滿 ) repeat-y( 直式填滿 上下填滿 ) 或是 no-repeat( 不填滿 ) 詳見範例 CSS04_19_ background-repeat.html background-repeat : repeat-x; /* 橫向填滿 左右填滿 */ background-repeat : no-repeat; /* 不填滿, 以圖片原始大小來呈現 */ 4-30
CSS 樣式與 HTML5 Chapter 4 圖 4-34 範例 CSS04_19_background-repeat.html, 設定 background-repeat : repeat; 背景圖片重複填滿整個網頁 background-origin, 背景位置 這是 CSS3 新推出的功能, 比較新的瀏覽器才能展示這個效果 可以設定為 content-box( 此為預設值, 詳見下頁上圖 ) padding-box( 如下頁下圖 ) 以及 border-box 您務必親自動手做並修改這個範例才能體會, 請看檔案 CSS04_20_backgroundorigin.html 與下圖的執行成果 background-origin : content-box; 4-31
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 圖 4-35 範例 CSS04_20_background-origin.html, 設定 background-origin : content-box; 圖 4-36 範例 CSS04_20_background-origin.html, 設定 background-origin : padding-box; 4-32
CSS 樣式與 HTML5 Chapter 4 background-attachment, 背景圖是否隨著 Scroll Bar 的上下拉扯而滾動? 預設值為 scroll( 背景圖固定在同一位置, 不移動 ), 也可以改成 fixed 這是認證考試重點! 這裡的文字說明容易引起誤解, 建議您親自觀看範例的成果, 詳見範例 CSS04_21_background-attachment.html background- attachment : fixed; /* 文字太多時, 感覺 背景圖會隨之上下滾動 因為背景圖片永遠 固定 在那個角落 ( 位置 ) 上 */ 圖 4-37 當您設定 background-position : fixed; 而文字太多時, 感覺背景圖會隨之上下滾動 因為背景圖片永遠固定在那個角落 ( 位置 ) 上 最後做一個總複習, 看看下面的設定, 您能說明這段 CSS 執行的成果嗎? article { background : transparent repeat-x url('logo.jpg'); } /* 上面第一種寫法, 縮寫 成果跟下面第二種寫法一樣 */ 4-33
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 article { background-color : transparent; background-repeat : repeat-x; background-image : url('logo.jpg'); } 考試的時候, 題目常常會出現 CSS 的考題 而且會故意混用各種屬性與數值, 讓您搞混 例如 :background- attachment : fixed; 與 backgroundposition : fixed; 如果您不小心就會搞錯, 後者是錯誤的! 出個題目考考您 : 下面何者 不是 Box Model 的屬性? (A) padding (B) style( 錯!) (C) Box( 錯!) (D) margin (E) content (F) border 出個題目考考您 : 下圖 ( 表格 ) 所呈現的外觀, 該撰寫哪一個 CSS 來表示? 參考解答 :( 微軟考試不會讓您撰寫程式, 而是提供多組程式碼讓您挑選其中一個 但會故意提供類似的答案讓您混淆 ) <style type="text/css"> #grid { display: -ms-grid; -ms-grid-columns: 100px 300px 100px 300px 100px; // 註解 : 這題要考您是不是看的懂 ms-grid-columns, 每個 格子 的間距大小 -ms-grid-rows: auto; // 為了混淆您, 這裡會出現類似的選項, 例如 ms-grid-rows: min-content; 請注意! 不要選到錯的 } </style> 4-34
CSS 樣式與 HTML5 Chapter 4 出個題目考考您 : 下面的 HTML 表格所呈現的外觀, 想要作到 : 標題 第一列 最後一列的 底色 是藍色 該撰寫哪一個 CSS 來表示? <table> <thead> <tr> <th> 產品標題 </th> </tr> </thead> <tbody> <tr> <td>asp.net 專題實務 </td> </tr> <tr> <td>asp.net Web Form</td> </tr> <tr> <td>html5 認證考試教材 </td> </tr> </tbody> </table> 參考解答 : tr:first-of-type, tr:last-of-type 出個題目考考您 : 下列的 HTML 碼與元素 ( 標籤 ) 想要幫每一個 <section> 裡面的第一個 <article> 加上背景顏色, 該怎麼做? <section id="news1"> <h1>html5 認證考試 </h1> <article>...</article> <article>...</article> </section> <section id= news2 > <h1> ASP.NET 專題實務 </h1> <article>...</article> <article>...</article> </section> 4-35
微軟 MVP 的 HTML5 CSS JavaScript 網頁程式設計與 MCSD 70480 認證教材 參考解答 : (1) $("section article:first-chold").css("background-color": "#EE11FF"); (2) $("section:first-child").css("background-color": "#EE11FF"); (3) $("article: first-of-type").css("background-color": "#EE11FF"); 正確解答 (4) $("section:first-of-type").css("background-color": "#EE11FF"); 4-36