摘要:MIS2000Lab.的「HTML5 認證考試， 從零開始」#6~#9-- CSS樣式、Box Model與HTML5 / JavaScript入門
上一篇文章 MIS2000Lab.的「HTML5 認證考試，從零開始」#4 / #5 -- CSS 與selector、HTML5超簡易入門
本文內容，將會在2014年底，碁峰出版社推出的HTML5新書裡面
CSS樣式、Box Model與HTML5
我們將融合前面兩章的內容，為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（特小字）」
請您注意「絕對單位」與「相對單位」兩者的差異。
行列高度（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（正常顏色）。
==== CSS排版觀念與Box Model ====
有兩張圖片，很清楚地說明了 Box Model，
請您過去看看
第一種寫法：
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除了左右兩側的「寬度」也包含上下的「高度」。
這裡有張圖片很清楚
下圖說明的是Collapsing margins，
上下兩個Box，<div class=”ex”>其間的margin有重疊，
共用10px的間距（取兩者margin最大值）而非20px（10px X 2）。
提醒您，margin可以設定「負值」，讓多個Box的邊界可以彼此重疊在一起。但是padding就不允許負值。
關於CSS的Box Model要講清楚，需要不少範例
如果您有興趣的話，我自己的網站上有另一篇完整的內容
以HTML5 / CSS3這兩個主軸來說，每一個主題都可以寫一本厚厚的書
加上JavaScript / jQuery這些程式，那就更不得了了
如果您沒有多買幾本書來把這些基礎搞懂
就算上上課、背背考古題，給您考上了什麼認證？
實力還是 0 ~~
而沒有實力的人，就算身上認證再多，也是一場空！
做IT、軟體或是程式，參考書是少不了的
越多書本、越多人的智慧，可以幫我們越走越好（節省自我摸索、撞牆的時間）
*****************************************************************************************
JavaScript入門
JavaScript可以使用文字編輯器撰寫，並且直接在用戶端（Client）的「瀏覽器」裡面運作並觀看結果（故稱為前端技術），
一直以來都是互動式網頁程式的重點。
JavaScript”並非”JAVA語言，也”不是”Java平台的一部分，兩者差異很大！
根據Wiki維基百科的介紹：JavaScript是一種直譯式程式語言，它的直譯器被稱為「JavaScript引擎」為瀏覽器的一部份，
廣泛用於客戶端（前端）的腳本語言，JavaScript是甲骨文公司的註冊商標。然而現在JavaScript也可被用於網路伺服器，如Node.js。
JavaScript與XMLHttpRequest API的組合稱為AJAX（全名Asynchronous JavaScript And XML），
可讓網頁執行非同步（asynchronous）的要求（Requests）返回Web伺服器，
不需要讓整個頁面的資料更新（reload），只更新某部分的內容即可。
提醒您，如果一列程式碼無法正常執行，那麼後續的程式也無法執行下去（因為JavaScript是直譯式的語言）。
先看看第一個簡單的範例
document.write(“字串”)可以把字串寫在網頁裡面（視同網頁內的文字）。
而window.alert(“字串”)則是出現一個Pop-up視窗來提醒使用者。
==== 變數（Variables）====
不想給變數一個”初始值”的話，請用var來宣告變數。不然的話可能會遇見「undefined（未定義）」錯誤訊息。
例如 var mystery;
JavaScript變數的命名規則：
1. 必須是「英文字」或是「底線（就是 _符號）」作為開頭字元。
2. 變數名稱的英文大小寫有差別（case sensitive），不要混用。
==== 資料型態（Data Types） ====
不像C#或是VB語法有那麼多資料型態，JavaScript比較簡單，除了var之外只有三種資料型態。
String（字串）
Number（數值）
Boolean（布林）
==== 運算子（Operators） ====
第一，算術運算子就是我們常見的數學運算符號，加減乘除之類的。
+ （加）
- （減）
* （乘）
/ （除）
% （餘數）
++ （累加）
-- （累減）
第二，指定運算子，您看得懂下面的這些運算子嗎？
x = y
x += y （寫法等同於x = x + y）
x -= y （寫法等同於x = x - y）
x *= y （寫法等同於x = x * y）
x /= y （寫法等同於x = x / y）
x %= y （寫法等同於x= x % y，得到相除以後的”餘數”）
第三，字串運算子。
提醒您，除了數值可以相加（+符號）以外，「字串」相加會把兩個字串連結在一起。
第四，（三元）條件運算子
寫成「? :」。其實是簡寫的if判別式。
第五，比較運算子
==
!= （不等於）
>
<
>= （大於等於）
<= （小於等於）
第六，布林運算子，兩者比較後的成果是true或false。
理論上，我應該每個說明都要放一個簡單的範例上去
有了範例（程式碼），好過文字說明幾百字
這三十天的鐵人賽，要講HTML5與相關的技術，範圍實在太大
但因為篇幅有限，只好稍微打住，實在抱歉
（但出版的書本裡面，一定有附上完整的範例，不會偷工減料！）
完整內容（書本章節試讀），請看：
本文內容，將會在2014年底，碁峰出版社推出的HTML5新書裡面
不要走開，馬上回來
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
MIS2000 Lab. 周棟祥/吳進魯
-
出版商:碁峰
-
出版日期：2015-04-09
-
台幣定價:
$480
-
售價:7.9 折 $379
-
語言:繁體中文
-
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
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson
線上課程教學，遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015
線上課程教學，遠距教學 (ASP.NET MVC 約 140hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab
寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net
(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A
(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I
ASP.NET遠距教學、線上課程（Web Form + MVC）。 第一天課程， "完整" 試聽。
......... facebook社團 https://www.facebook.com/mis2000lab ......................
......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/
Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download
請看我們的「售後服務」範圍（嚴格認定）。
......................................................................................................................................................
