今天介紹的屬性是可以針對關於文字的樣式做設定，大致上會針對這些介紹:

• font-size: 文字大小
• color:文字顏色
• text-align:文字的水平對齊位置
• text-decoration: 文字裝飾線的外觀(例如底線)
• text-indent: 文字縮排
• line-height: 文字行距
• letter-spacing: 文字水平間距
• font-family: 為所選的元素指定一個或多個字體的優先順序
• font-weight:文字粗體

計算單位

在CSS計算單位分成兩種:

• 絕對單位:,px,cm, mm, in
• 相對單位:%,em,ex,rem,vw,vh

這兩者之間的差別在於絕對單位是不會因為外在因素影響的數值，ex:

一公斤(KG)=1000公克(g)
一公分(cm)=10毫米(mm)

而相對單位會是受到外在影響的因素:

十個拳頭寬
十步的距離

試問你的拳頭跟我的拳頭有一樣大嗎?有見過沙鍋般大的拳頭嗎?

你的十步也跟我的十步不會一樣!因為有人說過我的一小步是人類的一大步

font-size文字尺寸

如果今天想改變文字的尺寸大小可以設定這個屬性。

這個屬性在設定值上有幾個選項可以選：

• 關鍵字:
  xx-small x-small small medium large x-large xx-large smaller larger
• 絕對單位
• 相對單位

這邊提一下關鍵字也算是是絕對單位，因為會對應到相應的px尺寸。

<div>
	  <h3 class="text-1">
		 這裡有
         <h3 class="text-2">我是大帥哥</h3>
	  </h3>
</div>

.text-2 {
		font-size: 50px;
}

那換個相對單位試試看

.text-1 {
		  font-size: 25px;
}

.text-2 {
		  font-size: 2em;
}

color文字顏色

這個屬性可以改變文字顏色

.text-1 {
			font-size: 25px;
			color: blue;
}

text-align 文字水平對齊

文字的水平對齊位置

• left: 對齊左邊
• center: 對齊中間
• right: 對齊右邊
• justify: 強制對齊左右兩側，除了最後一行。
• justify-all: 強制對齊左右兩側。
• start:對齊語言書寫順序的起始位置
• end:對齊語言書寫順序的結束位置

這裡有一段文字

我想讓他看起來左右對齊

p {
	text-align: justify;
}

或是置中

p {
	text-align: center;
}

text-decoration 文字的裝飾線外觀

這個屬性可以去增加或是減少文字的裝飾線

• none: 無效果
• overline: 頂線
• line-through: 中線/刪除線
• underline 底線

這邊拿個超連結來使用，因為超連結預設是有底線的

一定有一些小夥伴們看著那個底線就會想說好醜可不可以把它拿掉，這時候這個屬性就派上用場啦!

a {
	 font-size: 36px;
	 text-decoration: none;
}

那個萬惡的底線就可以消失了

那線的部分也是可以選擇的

• dotted 點線
• dashed 虛線
• solid 單實線
• double 雙實線
• wavy 波浪線

那這邊就大概先介紹這樣，有興趣的小夥伴可以自己去嘗試看看喔

text-indent 文字首行縮排

用來設定文字首行縮排，設定的值通常適用數值為主也可以設定關鍵字或是百分比。

以下有可使用的值與單位:

• px
• em
• ex
• vw
• vh
• cm
• in
• %

那一定有人會好奇可不可以設定負值，這邊跟你們說其實是可以的!

這樣可以做到凸排的效果，讓首行有凸出去的效果。

就可以達到這種效果。

那今天對於文字樣式的屬性先到這邊告一段落，明天在為大家介紹剩下的屬性

參考文獻

相對單位？絕對單位？