CSS 教學  >  文字


以下是幾個最常被用到與文字樣式有關的 CSS 屬性。 direction letter-spacing line-height text-align text-decoration text-indent text-transform word-spacing direction direction 屬性是用來設定文字的..

以下是幾個最常被用到與文字樣式有關的 CSS 屬性。

  • direction
  • letter-spacing
  • line-height
  • text-align
  • text-decoration
  • text-indent
  • text-transform
  • word-spacing

    direction

    direction 屬性是用來設定文字的方向。可能的值為 'ltr' 及 'rtl'。

    舉例來說，若 CSS 宣告是，

    p {
      direction:ltr;
    }

    那以下的 HTML 碼，

    <p>LTR 方向</p>

    就會顯現

    LTR 方向

    若 CSS 宣告是，

    p {
      direction:rtl;
    }

    那以下的 HTML 碼，

    <p>RTL 方向</p>

    就會顯現

    RTL 方向

    letter-spacing

    letter-spacing 屬性是用來設定每一個字母之間的空間。舉例來說，若 CSS 宣告是，

    p {
      letter-spacing:8px;
    }

    那以下的 HTML 碼，

    <p>8px between letters</p>

    就會顯現

    8px between letters

    line-height

    line-height 屬性是用來設定每一行之間的空間。舉例來說，若 CSS 宣告是，

    p {
      line-height:40px;
    }

    那以下的 HTML 碼，

    <p>第一行和第二行之間<br>相隔 40px。</p>

    就會顯現

    第一行和第二行之間
    相隔 40px。

    text-align

    text-align 屬性是用來設定文字是如何對齊。可能的值包括：

  • left： 靠左對齊
  • right： 靠右對齊
  • center： 向中間對齊
  • justified： 左右對齊

    請看以下的例子：

    CSS 樣式顯現結果

    p {
      text-align:left;
    }

    這一段句子，是靠左對齊的例子。

    p {
      text-align:right;
    }

    這一段句子，是靠右對齊的例子。

    p {
      text-align:center;
    }

    這一段句子，是向中間對齊的例子。

    p {
      text-align:justify;
    }

    這一段句子，是左右兩邊都對齊的例子。

    text-decoration

    text-decoration 屬性是用來設定文字上有什麼裝飾。可能的值包括：

  • underline: 文字下加上一條線。
  • overline: 文字上加上一條線。
  • line-through: 文字中間加上一條線劃過去。
  • blink: 讓文字閃爍。

    請看以下的例子：

    CSS 樣式顯現結果

    p {
      text-decoration:underline;
    }

    文字下加一條線

    p {
      text-decoration:overline;
    }

    文字上加上一條線

    p {
      text-decoration:line-through;
    }

    文字中間加上一條線劃過去

    text-indent

    text-indent 屬性是用來設定每一段的第一行前面要留多少空間。可設定的值包括百分比以及長度。舉例來說，若有以下的 CSS 宣告，

    p {
      text-indent:15px;
    }

    那以下的 HTML 碼，

    <p>這一段第一行的最前面會留 15px 的空間。之後的行數就沒有留任和空間了。</p>

    就會顯現，

    這一段第一行的最前面會留 15px 的空間。之後的行數就沒有留任和空間了。

    text-transform

    text-transform 屬性是用來控制大小寫是如何展現的。可能的值包括：

  • capitalize： 每一個字的第一個字母都以大寫顯現，其他的字母則不改變。
  • uppercase： 所有的字母都以大寫顯現。
  • lowercase： 所有的字母都以小寫顯現。
  • none： 大小寫不做任何改變。

    舉例來說，用以上這幾個值用在 "this is a LAWYER" 這幾個字上，我們回得到以下的結果：

    CSS 樣式顯現結果

    p {
      text-transform:capitalize;
    }

    this is a LAWYER

    p {
      text-transform:uppercase;
    }

    this is a LAWYER

    p {
      text-transform:lowercase;
    }

    this is a LAWYER

    word-spacing

    word-spacing 屬性是用來設定每個字與每個字之間的距離。舉例來說，若 CSS 宣告是，

    p {
      word-spacing:5px;
    }

    那以下的 HTML 碼，

    <p>Words here are separated by 5px.</p>

    就會顯現，

    Words here are separated by 5px.

    下一頁： CSS 浮動