文字方塊(Text)

`letter-spacing`屬性

繼承屬性，設定文字間的間隔。文字間可以不加入不必要的空白。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
letter-spacing	all	長度 normal (default) inherit	→ em、px等長度(相對、絕對單位) → 標準文字間隔 → 強制繼承上層元素的屬性值

.normal { letter-spacing : normal ; }

.inc { letter-spacing : 10px ; }

.dec { letter-spacing : -3px ; }

output

normal
increase
decrease

`line-height`屬性

繼承屬性，設定行的最小行高。但是，行內含有置換元素(img、input、object、select、textarea元素)且設定有height屬性時，若其屬性值(高度)高於line-height的屬性值，則會取代行高。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
line-height	all	長度百分比(%) 倍數 normal (default) inherit	→ em、px等長度 → 元素內文字高度的百分比(%) → 元素內文字高度的倍數(10進位，可有1個小數點) → 元素內文字高度的1.2倍左右 → 強制繼承上層元素的屬性值

.normal	{line-height : normal ;}

.low	{line-height : 0.7 ;}

.height	{line-height : 200% ;}

output

normal
low
height

`text-align`屬性

繼承屬性，設定「區塊」元素、表的儲存格元素(th、td)內的文字或圖像的水平方向配置。但是，在IE6版如果「區塊」元素有指定寬度時，無法正常顯示，必須使用margin屬性調整。想要置中時可以設定{margin-left : auto ; margin-right : auto}。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
text-align	區塊元素表的儲存格元素(th、td)	left right center justify inherit	→ 靠左對齊 → 靠右對齊 → 置中對齊 → 左右等間對齊，自動調整字間間隔 → 強制繼承上層元素的屬性值

.center	{text-align:center;}

.left	{text-align:left;}

.right	{text-align:right;}

.justify	{text-align:justify;}

output

center
left
right
左右等間對齊左右等間對齊左右等間對齊左右等間對齊左右等間對齊左右等間對齊左右等間對齊

`text-decoration`屬性

非繼承屬性，設定文字上線、下線、刪除線、點滅等裝飾。文字的顏色裝飾則是使用color屬性設定。置換元素(img、input、object、select、textarea元素)不適用。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
text-decoration	all	none (default) underline overline line-through blink inherit	→ 沒有任何裝飾 → 下線(和u元素類似) → 上線 → 刪除線(和del、s、strike元素類似) → 點滅(和blink元素類似) → 強制繼承上層元素的屬性值

.none	{text-decoration:none ;}

.underline	{text-decoration:underline ;}

.overline	{text-decoration:overline ;}

.through	{text-decoration:line-through ;}

.blink	{text-decoration:blink ;}

output

none
underline
overline
line-through
blink

`text-indent`屬性

繼承屬性，設定「區塊」元素第1行的縮排。縮排長度可以為負數，但是會超過領域外，可以配合overflow屬性來控制是否要顯示。另一種作法，就是指定負數的極大值"-9999" ，如此就不會出現於畫面上。這種常運用於想插入圖像，又想加入文字讓搜尋引擎能夠找到的情形。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
text-indent	「區塊」元素	長度百分比(%) inherit	→ em、px等長度(default值= 0) → 上一層區塊元素的領域寬度的百分比 → 強制繼承上層元素的屬性值

.indent	{ text-indent : 2em ; }

output

中文段落的第一行常縮排2個字元，可以讓人一看到就知道這是段落的開始。使用text-indent屬性只能讓區塊元素的第一行縮排。屬性值建議使用相對單位的em來指定，2em代表相對2個字元的大小。

`text-transform`屬性

繼承屬性，使用於有大小寫之分的文字，轉換大寫成小寫，或轉換小寫成大寫。在聲音出力的環境下，大寫只會1個1個字被念出，因此如何讓文章被適切的朗讀，可以利用此屬性來控制。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
text-transform	「區塊」元素	none(default值) capitalize uppercase lowercase inherit	→ none → 單字的第1個文字轉換成大寫 → 所有文字轉換成大寫 → 所有文字轉換成小寫 → 強制繼承上層元素的屬性值

.none	{ text-transform : none ; }

.capitalize	{ text-transform : capitalize ; }

.uppercase	{ text-transform : uppercase ; }

.lowercase	{ text-transform : lowercase ; }

output

information Techmology network
information Techmology network
information Techmology network
information Techmology network

`vertical-align`屬性

非繼承屬性，設定「線內」元素和表的儲存格元素(th、td)內的垂直配置位置。尤其是圖像和文字的配置，才能顯現效果。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
vertical-align	「線內」元素表的儲存格元素(th、td)	長度百分比(%) baseline (default值) top bottom middle super sub text-top text-bottom inherit	→ em、px等長度 → line-heightg屬性所指定的高度的百分比 →該元素基礎線對齊上層元素的基礎線 →該元素上方靠上對齊 →該元素下方靠下對齊 → 該元素基礎線對齊置上層元素的小文字中間 →該元素基礎線對齊上層元素的上標文字位置(表格不適用) → 該元素基礎線對齊上層元素的下標文字位置(表格不適用) → 該元素基礎線對齊上層元素的文字上方位置 (表格不適用) → 該元素基礎線對齊上層元素的文字下方位置(表格不適用) → 強制繼承上層元素的屬性值

img.baseline	{ vertical-align:baseline ; }

img.top	{ vertical-align:top ; }

img.middle	{ vertical-align:middle ; }

img.bottom	{ vertical-align:bottom ; }

output

baseline
top
middle
bottom

`white-space`屬性

繼承屬性，設定元素內連續空白要如何處理。內容太長超出1行時，若指定"pre"、"nowrap"不會自動換行，須要利用overflow屬性控制。"pre"屬性的動作和"pre"元素類似，因有些瀏覽器的版本沒有對應"pre"屬性，還是建議使用"pre"元素取代。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
white-space	all	normal(default值) pre nowrap inherit	→ 連續空白變成1個半形空白，自動換行 → 維持連續空白，不會自動換行 → 連續空白變成1個半形空白，不會自動換行 → 強制繼承上層元素的屬性值

.normal	{ white-space:normal" ; }

.pre	{ white-space:pre;overflow:hidden ; }

.nowrap	{ white-space:nowrap;overflow:scroll ; }

output

white-space屬性值為"normal"時，連續空白變成1個半形空白，自動換行。不用再使用"overflow"的屬性來控制換行方式。
white-space屬性值為"pre"時，維持連續空白，不會自動換行。設定"overflow"屬性值為"hidden"，將超出的部分隱藏起來。
white-space屬性值為"nowrap"時，連續空白變成1個半形空白，不會自動換行。設定"overflow"屬性值為"scroll"，產生卷軸顯示。</p>

`word-spacing`屬性

繼承屬性，設定單字間的間隔。單字和單字中間要有半形空白做切割。

○Win IE
○Firefox
○Opera
○Safari
○MC IE

屬性	適用元素	屬性值	說明
word-spacing	all	長度 normal(default值) inherit	→ em、px等長度 → 標準間隔 → 強制繼承上層元素的屬性值

.normal { word-spacing:normal ; }

.inc1 { word-spacing:1em ; }

.dec1 { word-spacing:-0.5em ; }

output

information Technology
information Technology
information Technology