MIS2000Lab.的「HTML5 認證考試，從零開始」#6-- CSS樣式、Box Model與HTML5

DAY 6

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 6 篇

html 網頁設計 asp.net 入門鐵人賽網頁程式 html5 初學者 mis2000lab asp.net html

mis2000lab

2014-10-01 09:35:58

3716 瀏覽

分享至

上一篇文章 http://ithelp.ithome.com.tw/question/10157184

我們將融合前面兩章的內容，為HTML5網頁搭配CSS設計樣式。
本章的結果可能因為您的瀏覽器（廠商）或是版本新舊而有差異，建議您使用新版瀏覽器來觀賞，

本文撰寫時的瀏覽器為IE 11與Chrome 32.0.x版。

==== 字體 ====

針對字體的**「字型（font-family）」、「大小（font-size）」、「樣式（font-style）」、「寬度（font-weight）」**這些屬性（Property）進行設計。

字體大小有多種表示方法，

像素（pixel）通常以「px」為單位，用來表示螢幕上的字體大小。
也可以使用「百分比（%）」或是「em」為單位。
也可以搭配「xx-large（特大字）」、「x-large」、「large」、「medium（一般大小）」、「small」、「x-small」和「xx-small（特小字）」

請您注意「絕對單位」與「相對單位」兩者的差異。

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20141001/20141001093806542b5afe65945_resize_600.jpg[/img]

行列高度（line-height）：段落之間的高度，寫法如下。
line-height : normal;
line-height : 250%;
line-height : 80px;

====色彩（color）與透明度（opacity）====

色彩的寫法有三種：

color : olive; /* 橄欖綠 */
color : #808000; /* 十六進位，前面請加上 # 符號 */
color : rgb(128, 128, 0); /* 十進位的表示法 */

這個網址寫的最清楚，建議您看看：http://www.w3.org/TR/css3-color/

透明度（opacity），數值從0.0（顏色很淡，幾乎看不到）~1.0（正常顏色）。

[img=415,234]http://ithelp.ithome.com.tw/upload/images/20141001/20141001093851542b5b2b27c2d_resize_600.jpg[/img]

==== CSS排版觀念與Box Model ====

我覺得這個網站寫的很清楚，範例也很多，請參考 http://www.w3schools.com/css/css_boxmodel.asp

有兩張圖片，很清楚地說明了 Box Model，
請您過去看看 http://www.hicksdesign.co.uk/boxmodel/
http://gl-ue.com/interactivity/grids.html

第一種寫法：
padding: 10px 11px 12 px 13px;
/* 如果寫四個值，順序是「上、右、下、左」四個位置 */

第二種寫法：
padding-top: 10px; /* 順序是「上、右、下、左」*/
padding-right : 11px;
padding-bottom : 12px;
padding-left : 13px;

「上、右、下、左」這四個屬性不難記，

請記住關鍵字「TRouBLe（英文單字，麻煩）」就能想起Top（上）、Right（右）、Bottom（下）與Left（左）四個關鍵字，
是不是很簡單呢？
或是請您以「順時針」的方向來記憶也行。

CSS Box Model除了左右兩側的「寬度」也包含上下的「高度」。

這裡有張圖片很清楚 [http://www.codeproject.com/Articles/567385/CSSplusBoxplusModelplusandplusPositioning](http://CSS Box Model除了左右兩側的「寬度」也包含上下的「高度」。資料來源：http://www.codeproject.com/Articles/567385/CSSplusBoxplusModelplusandplusPositioning)

下圖說明的是Collapsing margins，

上下兩個Box，<div class=”ex”>其間的margin有重疊，共用10px的間距（取兩者margin最大值）而非20px（10px X 2）。

[img=415,270]http://ithelp.ithome.com.tw/upload/images/20141001/20141001094200542b5be82c380_resize_600.jpg[/img]

提醒您，margin可以設定「負值」，讓多個Box的邊界可以彼此重疊在一起。但是padding就不允許負值。

關於CSS的Box Model要講清楚，需要不少範例

如果您有興趣的話，我自己的網站上有另一篇完整的內容
CSS排版觀念與 CSS Box Model
http://www.dotblogs.com.tw/mis2000lab/archive/2014/02/06/css_box_model.aspx

以HTML5 / CSS3這兩個主軸來說，每一個主題都可以寫一本厚厚的書
加上JavaScript / jQuery這些程式，那就更不得了了

如果您沒有多買幾本書來把這些基礎搞懂
就算上上課、背背考古題，給您考上了什麼認證？

實力還是 0 ~~

而沒有實力的人，就算身上認證再多，也是一場空！

做IT、軟體或是程式，參考書是少不了的
越多書本、越多人的智慧，可以幫我們越走越好（節省自我摸索、撞牆的時間）
[給初學者的話] IT世界裡面，沒有一本搞定的「初學者聖經」

不要走開，馬上回來