CSS Text 文字

CSS Text 文字

line-height 屬性是用來設定每一行之間的空間
p { line-height: 200%;  }
p { line-height:40px; }


letter-spacing 屬性是用來設定每一個字母之間的空間
p { letter-spacing:8px; }


word-spacing 屬性是用來設定每個字與每個字之間的距離
p { word-spacing:5px; }

text-transform 屬性是用來控制大小寫是如何展現的

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

p {
text-transform:capitalize;
}

this is I2YES

p {
text-transform:uppercase;
}

this is I2YES

p {
text-transform:lowercase;
}

this is i2yes


text-indent 屬性是用來設定每一段的第一行前面要留多少空間。可設定的值包括百分比以及長度
p { text-indent:15px; }


text-decoration 屬性是用來設定文字上有什麼裝飾

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

p {
text-decoration:underline;
}

文字下加一條線

p {
text-decoration:overline;
}

文字上加上一條線

p {
text-decoration:line-through;
}

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


text-align 屬性是用來設定文字是如何對齊

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

p {
text-align:left;
}

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

p {
text-align:right;
}

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

p {
text-align:center;
}

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

p {
text-align:justify;
}

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


direction 屬性是用來設定文字的方向
p { direction:ltr; }
p { direction:rtl; }