各位同學好~
年假跟元宵節都過完了，大家應該都有好好的休息跟玩樂吧~現在，歡迎大家跟著久違的飛肯的教學分享文，一起收收心、練練功~
(其實是小編自己很需要重新鍛鍊啊… XD)
今天要來跟大家分享 CSS 語法中，文字部分很基本卻也很重要的「字型大小(font-size)」以及「行高(line-height)」的寫法：
有學過的同學可以跟我們一起重新溫習一下，如果沒有學過 CSS 語法的新同學也不用害怕，跟著底下的步驟做就對了喔！
【步驟一】新建一個HTML頁面
請大家先開一個 HTML 的新頁面，
在<body>中依序打上 <h1>、<h2>、跟<p>標籤，
文字內容可以自己設計也可以依照底下圖示喔。
(完成之後的網頁如下 )
*小提醒：一般來說，一個網頁只需要設一個<h1>就好，並且放入較重要的關鍵字，<h2>則是可以設兩~三個都沒關係。
【步驟二】新建一個新的CSS樣式表
開啟一個 CSS樣式表的新檔案，
先命名為「flycan.css」，(如第一張圖示)
並附加到我們剛剛打好的 HTML 頁面上。
(如第二張圖示，如果有多出這一行連結，就表示附加樣式表成功了喔！)
【步驟三】font-size 的寫法
在剛剛新建的 CSS 樣式表中，我們開始來練習3種不同卻又較為常用的 font-size 寫法吧~
首先在 <body> 設定文字大小為 20px，<h1>是用百分比來做設定，而<h2>則是用「em」這個單位。
假如沒有特別定義文字大小的話，所有網頁的文字大小都會依照 W3C 所制定的原始規範；
但是因為我們已經先定義整個<body>都要套用 20px 的 font-size，所以<h1>的「350%」跟<h2>的「em」就會繼承<body>中的設定值為基準囉。
(寫好之後，文字的大小呈現就會如下方一樣)
*小提醒:
- 原始的1「em」 = 16px；
- 「font-family」是用來設定文字使用的字體，優先順序為先英文，再中文，然後最後一項可以設為”非襯體字(sans-serif)”，假如電腦沒有找到前面兩項指定的字體時，就會自動搜尋其他”非襯體字”來使用。
【步驟四】line-height 的寫法
當沒有特別指定時，line-height (行高)在瀏覽器的原始預設值為 1.0 ~ 1.2 倍，但如果想要讓瀏覽者在閱讀文字上面感到更舒適的話，會建議大家至少要設定為 1.5 倍以上，通常比較多人會設定在 1.5 ~ 1.8 倍之間。
舉例來說，飛肯的官網網頁，文字設定的行高就大多是使用 1.6 倍，既方便同學輕鬆閱讀，又能清楚獲取最新的開課資訊。接下來的範例，我們就用 1.6 倍行高來做語法練習吧。
當行高的值只單用一個數字，後面沒有加任何單位時，就表示”倍數”的意思，而這個倍數則是依據文字的 font-size 而來；因此，如下方圖示說明，當行高設為 1.6 倍 * 20px = 32 px ，覺得還要換算太麻煩或者怕算錯，會建議大家只用倍數來表示就可以了。
*小提醒:
- line-height 可以用帶單位的數值、倍數，或是百分比表示；假如想要用「em」或「百分比」來表示行高時，請記得要注意子、父層之間的「繼承」關係。
- (同場加映) 文字置中的寫法為「text-align:center」，這個語法也很常用，請大家一定要學會喔。
(範例完成後，如下圖)
以上就是這次跟大家分享的 CSS 教學，很入門的文字設定但也是重要的基本功，希望大家都能學習愉快喔！ ^_^
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！