我要成為前端工程師的學習筆記: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.點綴線

#html #css







你可能感興趣的文章

CSS保健室|padding

CSS保健室|padding

AI輔導室|製作黑洞效果

AI輔導室|製作黑洞效果

React Class 與 Function component 有甚麼根本上的差別?

React Class 與 Function component 有甚麼根本上的差別?






留言討論