嗨大家好，
今天我們要正式進入CSS，幫我們的網頁上點色彩了。
昨天我們提到三種寫CSS的方式，有行內樣式、內部樣式表、外部樣式表，基於在這裡展示及分享的便利性，我會使用「內部樣式表」的方式直接寫在 ＜head>＜/head> 中。
讓我們開始吧。
先建立個 day13-文字有關的css.html，HTML5架構建立好(day04)， <head> </head> 中放入 <style></style>，之後的CSS我們就寫在 <style></style> 裡面。
這些操作步驟，之後我不再像這樣細說了，我們可以把這3分鐘的打字時間拿來多學點新的內容。
因為我們今天要認識跟文字有關的樣式，所以我們先在 body 中給個段落標籤裡面放一些文字
<body>
<p>我是要被拿來當實驗品的文字</p>
</body>
首先，我們要先學會怎麼選到我們要的標籤，因為只有選到了標籤，我們才有辦法告訴瀏覽器要針對哪個標籤進行樣式的調整。選到標籤的方式有很多種，我們今天只學最簡單的一種，就是在 <style></style> 裡面打出你要選取的標籤，後面給一個大括弧(有人會說花括號)。
<style>
p {
}
</style>
像這樣就代表我們要選的是 <p></p>標籤還有裡面的內容。
接著我們只要在大括弧(花括弧)裡面打上我們想要的樣式就可以囉。
(之前講HTML時，我都會附上每段程式碼在 live server 顯示的樣子，現在開始的CSS因為只是樣式改變，所以除非是特別需要用到圖片做說明的，否則我不會每段程式碼都附圖，大家可以自己用 live server 看。)
fontsize
這是文字大小。
文字大小分為固定單位及相對單對。
1.固定單位：px
2.相對單位：%、em(相對於富元素的文字大小)、rem(相對於html(根元素)本身大小)
預設文字大小為 16px
我們先練習改變文字大小吧，可以用 live server 看看改變數值，文字大小是否會變。
<style>
p {
font-size: 24px;
}
</style>
font-size: 24px; 最後面的分號，是在告訴瀏覽器這個屬性樣式結束了，如果後面還有就會是另一個屬性。
這邊會建議在寫網頁時，font-size不要小於12px，因為有些桌機會無法顯示。
font-weight
這是文字粗細。
font-weight屬性的值從100、200、300......、1000
<style>
p {
font-weight:500;
}
</style>
除了給數字以外還可以
font-weight:bold; 這會把文字變成粗體(700)。
font-weight:normal; 這會把文字變成一般粗細(400)，這也是預設值。
font-style
這是文字樣式
normal: 正常顯示文字，這是預設值。
italic: 文字會以斜體形式顯示。
oblique: 文字會以傾斜形式顯示。這與 italic 很相似，但不完全一樣，因為它是由瀏覽器計算而來，並不是字型本身的斜體字形。
<style>
p {
font-style: italic;
}
</style>
text-decoration
這是文字畫線，可以分成三個部分
1.線的位置：
(1).text-decoration-line: none;(沒有線，預設)
(2).text-decoration-line: underline;(底線)
(3).text-decoration-line: overline;(上面)
(4).text-decoration-line: line-through;(穿過字)
2.線的顏色：
(1).text-decoration-color: red;(線的顏色變紅色，預設是黑)
3.線的樣式：
(1).text-decoration-style: solid;(實體線，預設)
(2).text-decoration-style: dashed;(虛線)
(3).text-decoration-style: dotted;(點點線)
(4).text-decoration-style: double;(雙實線)
(5).text-decoration-style: wavy;(波浪線)
我們可以把這三個做組合，完成我們想要的樣式
<style>
p {
text-decoration-line: line-through;
text-decoration-color: yellow;
text-decoration-style: wavy;
}
</style>
所以我們可以發現一個大括號裡面，可以寫不只一種樣式。只要是想要對這個標籤做樣式的調整，就全部寫在這個大括號裡面就好了。
這邊補充一點，其實我們可以把 text-decoration 的三個屬性濃縮成一行來寫，每個值之間用空格隔開就可以了(用live server 看會是一樣的效果)
<style>
p {
text-decoration: line-through yellow wavy;
}
</style>
text-transform
控制英文字大小寫(只對英文有效，不要用中文然後覺得奇怪為什麼沒有效果，所以請把P標籤內的文字換成英文)
1.text-transform: none;(預設，打什麼就是什麼)
2.text-transform: lowercase;(全部換成小寫)
3.text-transform: uppercase;(全部換成大寫)
4.text-transform: capitalize;(每個字首字母大寫)
<style>
p {
text-transform: capitalize;
}
</style>
text-align
文字水平對齊，就是我們用 word 會看到的這個
依上圖順序分別為
text-align: left | center | right | justify
<style>
p {
text-align: left;
}
</style>
line-height
設定文字行高（行與行之間的距離）的屬性。這個屬性會影響文字的可讀性和外觀。
預設值 (normal) ，通常等於 1.2 到 1.5 的範圍內，具體數值由瀏覽器和字型決定。
他可以用三種方式來寫。
1.數字: 這會把字體大小（font-size）乘以這個數字，來計算行高。像下面，假設沒有設定font-size那就是預設的16px乘以1.5等於24px
<style>
p {
line-height: 1.5;
}
</style>
2.長度值（例如：像素 px、em、rem......(忘記這些的請往上滑)）: 這會直接設定行高為這個長度。
p {
line-height: 24px;
}
3.百分比: 設定行高為字體大小的一個百分比。
p {
line-height: 150%;
}
還有許多如， white-space、word-break、font-family......等等，如果有興趣想了解更多，可以去之前day08分享的網站看看哦。
我們明天見囉。
iThome鐵人賽
看影片追技術