iT邦幫忙

DAY 6
4

上一篇文章 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世界裡面,沒有一本搞定的「初學者聖經」

不要走開,馬上回來

下一篇文章 http://ithelp.ithome.com.tw/question/10157539

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#5-- HTML5超簡易入門
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#7-- JavaScript入門 (I)
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言