MIS2000Lab.的「HTML5 認證考試,從零開始」#6~#9 -- CSS樣式、Box Model與HTML5 / JavaScript入門

摘要: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 ====
 
 
我覺得這個網站寫的很清楚,範例也很多,請參考 http://www.w3schools.com/css/css_boxmodel.asp
 
 
有兩張圖片,很清楚地說明了 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 認證教材
9789863475750

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 49hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程,遠距教學 (ASP.NET MVC 75hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

ASP.NET MVC線上課程 第一天 免費看 (5.5小時) 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net


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

請看我們的「售後服務」範圍(嚴格認定)

......................................................................................................................................................

...................................................................................................................................................... 

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

ASP.NET MVC 5 線上教學

累積時數約 75小時...... 第一天(5.5小時)完整內容,"免費"讓您評估