Day 12 - 切版基礎打底(二) : 必學CSS運用

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day12，我們一樣繼續談談CSS的實作運用，有哪些是必學、常見的呢?
CSS是一門易懂難精，須要靠經驗累積及不斷實作練習才能精通，讓我們進入今天的主題!

CSS 選擇器

我們正式開啟了 Css 學習之路，首先要先了解基礎的 Css 知識

什麼是 CSS選擇器 ?
透過 CSS 選擇對應 HTML 標籤指定套用樣式，這個就是 CSS 選擇器

• 元素選擇器
  指定 HTML 標籤選擇套用 Css樣式
• class 選擇器
  前一篇有教到如何 html 標籤加入class，那這邊我們可以用設定好 class 選取套用

範例一
下面我們可以看到基礎的css選擇器，選取後的寫法，這邊是用元素選擇器，選取p標籤並給予css樣式 ( color:red )

範例二
css樣式要寫在{}符號裡，有不同樣式要寫要用 ; 去做區隔

範例三
css選擇器前面要加個點，下面是用class選擇器，裡面寫了背景顏色藍色樣式

CSS

那上面我們學會了 css選取器，
下面會舉出一些常用必學，跟一些範例，多多練習熟練運用吧

一、文字篇
二、色彩篇
三、邊框 border
四、Margin 、padding
五、Width、height

一、文字篇

• font-size : 16px 字體大小 (16px)
• line-height : 24px 字體行高 (預設字體大小 X 1.2 ，這邊是設定24px)
• font-family: "Times New Roman", "Times", "serif" 字型樣式
  (會由前到後優先順序讀取，如網站沒有支援字型則會自動像後找替代)
• font-weight : bold 字體粗細 (粗體)
• letter-spacing: 1em 字體間距

CSS 小知識

line-height
line-height,除了可以用 px 去寫外，我們也可以用 倍數去寫 ，
那他就會以 字體大小 X 倍數來設定行高
這樣寫有什麼好處呢? 我們在調整字體時他可以依照比例去調整，所以用倍數的寫法會更好喔 !

EX.
font-size : 16px ;
line-height: 1.5;
那行高就會是 16 X 1.5 = 24px

font-weight
這邊可以寫數字，從這邊網站範例可以看到100 ~ 950 去設定字體粗細，像是 700 就是 bold ， 用數字的寫法會更好喔!

字體單位 px、em、rem

• px : 絕對單位，你寫多少就是多少
• em : 相對單位，隨父元素倍率變化，例如 : font-size 是 20px，那麼設定 2em，就是 40px。
• rem : 相對單位，常用的寫法，隨根元素倍率變化，例如 :我在全站設定了 1rem 是16px ，那麼設定 1.5rem，就是 24px。

選擇適當時機使用相對的字體單位，試著嘗試看看吧 !

二、色彩篇

• color:red 字體顏色(紅色)
• background-color: blue 背景顏色 (藍色)

css color寫法

CSS 小知識

加入背景圖片 - background-image

透明度
opacity

rgba
常用在背景顏色透明

三、邊框 border

border 也是很常運用的元素，會分上(top)、下(bottom)、左(left)、右(right)四邊，我們可以指定對應的方向加入邊框，也可以直接指定 border 。

bordr css

border 樣式

四、Margin 、padding

基本觀念
在寫css 間距時釐清觀念是很重要的，不然你怎麼推都推不出你想要的，首先我們要知道Margin 、padding兩者的差異，讓我們看看下面這張圖，可以知道 margin 就是兩個區塊的外距， 用在推出兩個之間的空隙，padding 則是區塊內距，用在推擠內容區塊，像是區塊內的文字、圖片等。

Margin 、padding
釐清觀念後其實寫起來不難，重點是觀念理解，清楚知道兩者差異，那在寫上就會很順利，然後要注意的是間距也可以像border一樣指定四邊，可以依照需求寫間距

五、Width、height

基本觀念
width、height 在寫的時候我們雖然可以設定固定尺寸(px)，但是我們會盡量不去寫死寬高，在響應式網站(RWD)的縮放才會完整，尤其是 height 在練習時候我們盡量以 Margin 、padding 去推出我們想要的高度，這是一個很重要觀念，先從習慣養成吧 ! 不寫死運用 Margin 、padding 去推出範圍。

咦! 不寫W/H , 那 這樣還需要 Width、height 嗎 ?
答案是需要的，寬度最常運用在RWD響應式，舉個簡單例子(下圖)，可以看到在pc版有四個區塊，我們排版上是設定25%，手機板變成兩欄，就可以用寬度去調整，是不是很方便呢

要用哪個寫好呢 ? 百分比（%）、畫素(px）、vh/vw ?

• 百分比% : 以網站尺寸去比例 ，常用在RWD
• px: 固定尺寸，無法隨縮放調整
• vh/vw: vh是 view height，vw 是 view weight ，是以螢幕畫面來換算比例，常用在模擬區塊/畫面滿版呈現

心法

• 寬高不寫死，善用 margin、padding 去推，縮放響應順順順 !
• 排版善用 Width % ， 縮放響應順順順 !
• 靈活運用 vh/vw ，螢幕範圍好方便

先寫出樣式，在求好

我們在切版實作相信一定會有疑問，不曉得哪個寫法才是正確的
在寫 Code 上沒有絕對正確的寫法，只有哪個寫法最能快速達到我們需求

在初學階段相信我們都會不敢下手，想要跟別人寫一模一樣，覺得別人寫的才是正確的，但其實只要能寫出來達到我們想要呈現的視覺、樣式都是很棒的開始 !

1. 先寫出自己的 Code
2. 畫面樣式順利呈現 > 不成功尋求 Google 大神 ，善用關鍵字找答案
3. 學習別人 Code : 哪邊寫法不一樣? 為什麼要這樣寫呢?

理解融會實作才是最重要的，所以不要害怕嘗試看看吧 !

試著找一篇新聞文章寫看看吧 !

切版基礎我們學會了基礎html/css樣式運用，那接下來我們試著實作看看，挑選一篇新聞試著寫看看吧!

Codepen 範例 - 新聞 HTML/ CSS 練習

總結
今天是不是學到很多了呢?
其實 css 是需要大量練習才能靈活運用，還有很多很多css可以學，這邊我們學習了常見的，先從基礎扎實的學習，學會後用網路上小區塊練習實作看看，試著做出網站畫面，多多練習才會進步熟習喔!

下一篇會講到比較深入的css排版技巧及相關切版技巧，在歡迎大家收看 !