初學者指南:CSS 常見文本屬性

更新日期: 2024 年 10 月 21 日

在網頁設計中,文本的排版和佈局,是提升用戶體驗的重要部分。

CSS 提供了多種屬性,幫助設計師和開發者更靈活地控制文本的間距、對齊、縮進等效果。

本文將為新手介紹幾個常見且實用的 CSS 文本屬性,包括 line-heighttext-aligntext-indent,以及它們的應用場景和最佳實踐。


line-height —— 行高

line-height 是什麼?

line-height 屬性用來設置文本的行高,也就是行與行之間的距離。

行高控制著段落中文本的間距,可以讓文本更具可讀性和視覺美感。

行高值可以是數值、百分比或相對單位。

語法

selector {
    line-height: ;
}
  • 可以是數值(如 1.5)、百分比(如 150%),或具體單位(如 20px)。

範例

p {
    line-height: 1.5;
}

這段代碼將段落的行高設置為字體大小的 1.5 倍。

行高的應用場景

  • 提升可讀性:適當的行高可以讓文本更易讀,特別是長篇段落。
  • 排版設計:調整行高可以控制文本的垂直間距,讓頁面看起來更整齊。

text-align —— 文本對齊

text-align 是什麼?

text-align 屬性用於設置文本內容在其容器內的水平對齊方式

常見的對齊方式包括左對齊、右對齊、居中對齊和兩端對齊。

語法

selector {
    text-align: left | right | center | justify;
}
  • left:左對齊,這是大部分語言(如英文、中文)的默認對齊方式。
  • right:右對齊,常用於阿拉伯語等從右至左書寫的語言。
  • center:居中對齊,文本會在容器內水平居中。
  • justify:兩端對齊,文本會調整間距,使左右兩側同時對齊。

範例

h1 {
    text-align: center;
}

這段代碼會將標題居中對齊。

應用場景

  • 標題居中:標題通常需要在頁面中居中顯示,使用 text-align: center 能夠輕鬆實現這一效果。
  • 段落兩端對齊justify 可以讓段落在左右兩側都對齊,形成整齊的文本塊。

text-indent —— 文本縮進

text-indent 是什麼?

text-indent 屬性用於設置段落的首行縮進,常用於段落的排版格式,讓文本看起來更具結構性。

縮進可以用具體的長度單位(如 pxem)來表示。

語法

selector {
    text-indent: ;
}
  • 可以是正值(表示向右縮進)或負值(表示向左縮進),也可以是百分比或具體長度單位。

範例

p {
    text-indent: 2em;
}

這段代碼將段落的首行向右縮進兩個字母寬度(em)。

應用場景

  • 文章格式化:使用 text-indent 可以讓段落首行縮進,使文章看起來更具結構和層次感。
  • 特殊效果:設置負縮進(例如 -2em)可以創建出首行向左突出的特殊排版效果。

結語

在網頁設計中,掌握常見的 CSS 文本屬性能幫助你更靈活地控制文本的排版和佈局。

無論是調整文本的行高、對齊方式,還是控制文本的縮進和間距,這些屬性都是必備的工具。

理解並熟練運用這些屬性,可以讓你的網頁排版更具美感,提升用戶的閱讀體驗。

希望本文能夠幫助新手理解 CSS 中幾個常見的文本屬性,並靈活應用它們來設計更具吸引力的網頁。


參考資料

Similar Posts

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *