CSS筆記（四）文本

　　CSS 文本屬性可定義文本的外觀。經過文本屬性，能夠改變文本的顏色、字符間距，對齊文本，裝飾文本和對文本進行縮進，等等。

　　參考：http://www.w3school.com.cn/css/css_text.asp

 

• 縮進文本

　　首行縮進：

p {text-indent: 5em;}

負值縮進，實現「懸掛縮進」等：

p {text-indent: -5em; padding-left: 5em;}

• 水平對齊

<center>既會影響文本居中，還會影響整個元素居中。而text-align不會影響元素的對齊方式，只會影響文本。

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

• 單詞間間隔

其默認值爲normal，與設置值爲０效果相同。

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

• 字母間隔

　　改變字符或字母間的間隔。

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

• 字符轉換

文本大小寫轉換，共none，uppercase，lowercase和capitalize（首字母大寫）四個值。

h1 {text-transform: uppercase}

• 文本裝飾

對文本進行裝飾，共none，underline，overline，line-through和blink五個值。

a:link a:visited {text-decoration: underline overline;}

• 處理空白符

影響對源文檔中的空格、換行和tab字符的處理。

p {white-space: normal;}

下面的表格總結了 white-space 屬性的行爲：

值	空白符	換行符	自動換行
pre-line	合併	保留	容許
normal	合併	忽略	容許
nowrap	合併	忽略	不容許
pre	保留	保留	不容許
pre-wrap	保留	保留	容許

 

• 文本方向

用於設置文本方向。下邊的例子從右到左顯示。

div
  {
      direction: rtl
  }

注意：對於行內元素，只有當 unicode-bidi 屬性設置爲 embed 或 bidi-override 時纔會應用 direction 屬性。

 

CSS 文本屬性

屬性	描述
color	設置文本顏色
direction	設置文本方向。
line-height	設置行高。
letter-spacing	設置字符間距。
text-align	對齊元素中的文本。
text-decoration	向文本添加修飾。
text-indent	縮進元素中文本的首行。
text-shadow	設置文本陰影。CSS2 包含該屬性，可是 CSS2.1 沒有保留該屬性。
text-transform	控制元素中的字母。
unicode-bidi	設置文本方向。
white-space	設置元素中空白的處理方式。
word-spacing	設置字間距。