我要成為前端工程師的學習筆記：HTML & CSS 篇 - 文字排版、線條 Day4

文字排版

這章節我們要來介紹文字排版，而文字排版其實蠻重要的，排版排的好可以增加使用者好體驗，讓閱讀文章可以輕鬆毫無壓力，以下會介紹幾個文字排常用的語法。

CSS

p {
  color: black;    // 文字顏色
  font-family: Verdana;    // 字型設定，它有很多種類
  font-size: 16px;    // 文字大小
  line-height: 1.5;    // 行與行之間的距離，簡稱行距
  text-align: left;    // 文字靠左，預設是靠左
  text-indent: 32px;    // 首行縮排
  text-decoration: underline;    // 文字加上下底線
  text-decoration: line-through;    // 文字加上刪除線
  letter-spacing: 5px;    // 字和字之間的距離，簡稱字間
}

畫面

補充：
這裡想補充行距的部分，例：文字大小 font-size: 18px，行距 1.5 倍 line-height: 1.5，意思是 16px 大小的文字，文字整行就是 18px * 1.5 = 27px 的大小，而行距也直接用 px 設定，像是 line-height: 24px。

圖片解釋：

線條

線條是 HTML 上面蠻常會看到，像是標題、段落、圖片...等都會看到它的出現，所以下面會介紹怎麼樣使用線條。

語法：
border: 線大小 樣式 顏色;
border-上下左右: 線大小 樣式 顏色;

CSS

//  標題上使用線條
h2 {
  font-size: 30px;
  border-left: 10px solid red;    // 左邊線條
  border-top: 10px solid #000;    // 上面線條
  border-right: 10px solid blue;    // 右邊線條
  border-bottom: 10px solid pink;    // 下面線條
}

畫面

//  圖片上使用
img {
  border: 5px solid black;    // 1.實線
  border: 5px dashed black;    // 2.虛線
  border: 5px dotted black;    // 3.點綴線
}

畫面
1.實線

2.虛線

3.點綴線