[筆記] 用 HTML + CSS 刻一個笑臉出來

2015-08-27 Rabbie Kao

今天是「笑臉教學相長會」的第一次正式相見歡，感謝捧油下班後仍舊花費時間與心力跟我們分享 CSS 的奧妙，上完今天的課後，我覺得當網頁設計師真的好辛苦，再也不敢說自己要默默自學成為網頁設計師了，沒投入個一萬個小時根本難以成氣候啊！

以下是今天的 CSS 學習筆記，主題為「用 HTML + CSS 刻一個笑臉出來」，講授 CSS 的基本概念，接著透過「刻一個笑臉」的實際案例來一步步教 CSS 的應用。

刻一個笑臉吧！http://codepen.io/anon/pen/YyKKwm?editors=110

(“//” 代表註解筆記)
( CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. 簡單來說是個練習 CSS 的好地方，上面也很多其他神人的範例可以參考與學習)

HTML

<div class=”smile”> //用 div + class 宣告一個屬於 smile 的區域出來，smile 的區塊
<span></span> //用 span 宣告一個區域出來，笑臉的兩個眼睛其中一個
<span></span> //用 span 宣告一個區域出來，笑臉的兩個眼睛其中一個
//若將 <span></span><span></span> 打在同一行的話，則兩個眼睛就會黏在一起
<div class=”mouth”></div> //用 div + class 宣告一個屬於 mouth 的區域出來，mouth 的區塊
</div>

CSS

.smile{ //在 HTML 中 class 對應的 CSS 語法
width:200px; //寬
height:200px; //高
background:yellow; //背景顏色設定為黃色
border-radius:100px; //用來設定區塊的圓角效果
text-align:center; //用來設定文字是如何對齊，center 為置中
}

span{ //笑臉的眼睛
display:inline-block; //呈現區塊，會隨著區塊中的文字多寡，把區塊撐開來
width:16px; //寬
height:30px; //高
text-align:right; //靠右
margin:50px 10px 20px 10px; //邊界，用來設定各個元素之間的距離
background:black; //背景顏色設定為黑色
color:white; //文字顏色設定為白色
border-radius:15px; //邊框圓角，用來設定區塊的圓角效果
}

.mouth{ //笑臉的嘴巴
display:block; //呈現區塊，總是在新行上開始
width:100px; //寬
height:50px; //高
margin:0 auto; //透過邊界效果來置中
background:red; //背景顏色設定為紅色
border-radius:0 0 50% 50%; //邊框圓角，把數字設成0，那角就會變成直角而不是圓的。%數是邊框和整體的比率
position:relative; //這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定
}

.mouth:before{ //將會指向該元素的內容最前
content:””; //笑臉的牙齒
display:block; //呈現區塊，總是在新行上開始
width:20px; //寬
height:20px; //高
background:white; //背景顏色設定為白色
position:absolute; //這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置
left:50%; //靠左，與左方的距離 50%
margin-left:-10px; //左邊界往右移 10px
}

關於 CSS 語法
(以下內容整理自下列網址)
http://www.1keydata.com/css-tutorial/tw/margin.php
http://irw.ncut.edu.tw/peterju/css.html
http://www.wibibi.com/info.php?tid=119
http://www.minwt.com/css/1566.html
http://boohover.pixnet.net/blog/post/13148783-%3Abefore,-%3Aafter-%E6%93%AC%E5%85%83%E7%B4%A0%E6%8C%87%E6%A8%99-(css-selectors-pseudo-elemen

Div

Div 這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。

Span

Span 跟 Div 類似的地方是，這兩個標籤的目的都是將內容分為不同的區域。不同的是，Span 可以涵蓋更細層的元素。所以，我們甚至可以用 <span> 來調整單一文字的樣式。另外，在 </span> 之後並不會換行。

Class

Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：

.【Class 名稱】{
屬性：設定值；
…
}

ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下：

#【ID 名稱】{
屬性：設定值；
…

}

border-radius

border-radius 用來設定區塊的圓角效果，可以一次設定四個圓角的值，也可以分別對各個圓角設定不同的値。

四個角的語法
border-top-left-radius – 設定左上角
border-top-right-radius – 設定右上角
border-bottom-right-radius – 設定右下角
border-bottom-left-radius – 設定左下角

邊框圓角 border-radius 的縮寫法可以一次指定四個角。可輸入一或兩組的參數，每組有四個數字可用 px 或 % 來表示。

text-align

text-align 屬性是用來設定文字是如何對齊。可能的值包括：

left：靠左對齊
right：靠右對齊
center：向中間對齊
justified：左右對齊

block元素的特點

總是在新行上開始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度。

inline元素的特點

和其他元素都在一行上；
高，行高及頂和底邊距不可改變；
寬度就是它的文字或圖片的寬度，不可改變。

inline-block 會隨著區塊中的文字多寡，把區塊撐開來，block的話設定多大就多大，假設把寬設成200px時，當文字超過200px就會自動換行。

邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以我們可以對這四個邊逐一設定：

margin-top (上邊界)
margin-right (右邊界)
margin-bottom (下邊界)
margin-left (左邊界)

第五個屬性，margin，是用來作為同時設定四個邊的捷徑屬性。
有三種方式可以設定邊界，分別為長度、百分比、以及 ‘auto’：
#container {
margin-top:5px;
margin-left:10%;
margin-right:auto;
margin-bottom:20px;
border: 1px solid 000000;
}

所有四個邊的邊界可以同時由 margin 屬性設定。它的語法如下：
margin: [上面邊界值] [右邊邊界值] [下面邊界值] [左邊邊界值]

在這裡，順序非常重要。第一個值一定是上邊界的值，第二個值一定是右邊界的值，第三個值一定是下邊界的值，而第四個值一定是左邊界的值。

position

position 屬性制定出要用哪一類的位置。可能的值有：

static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。
relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素的位置不會改變。

top, right, bottom, left

每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。

元素(element)的盒子模型(box model)

CSS將所有的元素視為一個盒子(box)，由內容(content)、留白(padding)、外框(border)與邊界(margin)所組成，圖示說明如下：

留白 (padding) 是在內容外，邊框內的部分。一個盒子有四個邊，所以我們可以對這四個邊的留白逐一設定：

padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)
第五個屬性，padding，是用來作為同時設定四個邊留白的捷徑屬性。

有三種方式可以設定留白，分別為長度、百分比、以及 ‘auto’。我們來看以下的例子：

#container {
padding-top:15px;
padding-left:10px;
padding-right:30px;
padding-bottom:40px;
border: 1px solid 000000;
}

擬元素 (pseudo-elements)

以特別的 CSS selectors (指標) 語法，指向 HTML 元素 (elements, 如 p, h1, div 等) 裡沒有實際元素名稱或原來不存在的內容，並且使其被視為一個新的元素，稱之為擬元素 (pseudo-elements) 。在原有 selectors 加上 ::before 或 ::after 的擬元素表示法，如 #main::before ，將會指向該元素的內容最前或最後，並可在該處加入新的字元，而且新加的字元被視為新的元素，也可以賦予各種設計風格 (styles)。