iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0
Modern Web

從骨架到靈魂:網頁構成三部曲系列 第 11

Day- 11 CSS文字段落

  • 分享至 

  • xImage
  •  

昨天教了文字樣式今天則是文字段落,主要還可以使用css來調整字元間距、行高、文字對齊等等,這些都是在排版上很重要的細節,尤其是行高的部分,若是行高過小會讓閱讀上感到吃力,過大則會讓文章看起來支離破碎,這些都需要多加練習與調整。

段落樣式

1. 字元間距

「字元間距」屬性 (letter-spacing) 用於調整文字字元之間的水平距離。它的預設值為 normal,也就是瀏覽器預設的標準間距。
若想自訂間距,可以指定一個具體的長度 ,並搭配常用的單位,例如 px (像素)、em (相對單位) 或 cm (公分)。
格式:{letter-spacing}
範例:{ letter-spacing: -2px; }
https://ithelp.ithome.com.tw/upload/images/20250921/20178756HUPj6gwJ37.png

2. 行高

用來設定每一行文字的高度,也就是行跟行之間的距離,常常會用在調整區塊的高度、圖片的高度、表格的高度或者是文字輸入欄位的高度等,也可以使用數字來調整
可以使用auto來讓瀏覽器自動判斷網頁元素高度
格式:{line-height: value}
範例:{ line-height: 2.5; }
https://ithelp.ithome.com.tw/upload/images/20250921/20178756nxQDcsdDuI.png

3. 文字對齊

設定文字在容器內的水平對齊方式,可以設定left為左對齊、right為右對齊、center為置中對齊或是justify為左右兩端對齊。
格式:{text-align: value}
範例:{text-align: center}
https://ithelp.ithome.com.tw/upload/images/20250921/20178756cCyXAJ7sJ9.png

4. 單字間距

用來設定單字與單字之間的距離(主要對英文等以空格分詞的語言有效)。
格式:{word-spacing: length}
範例:{ word-spacing: 10px; }
https://ithelp.ithome.com.tw/upload/images/20250921/20178756BOrSJ0oZog.png

5. 首行縮排

設定段落第一行文字的縮排距離,可以使用負值,如果使用負值,則會使第一行文字向左縮排。
格式:{text-indent: length}
範例:{text-indent: -10px}
https://ithelp.ithome.com.tw/upload/images/20250921/20178756Kyj6kLl5jy.png


上一篇
Day -10 CSS的文字樣式
系列文
從骨架到靈魂:網頁構成三部曲11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言