css入門教程資料（3）

七．控制文字的樣式

控制文字的樣式包括文字大小寫、文字修飾兩個部分。

1．文字大小寫

文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫，而可以在輸入完畢後，再根據需要對局部的文字設定大小寫。

基本格式如下：

text-transform: 參數

參數取值範圍：

·uppercase：所有文字大寫顯示

·lowercase：所有文字小寫顯示

·capitalize：每個單詞的頭字母大寫顯示

·none：不繼承母體的文字變形參數

注意：繼承是指HTML的辨別符對于包含自己的辨別符的參數會繼承下來。

2．文字修飾

文字修飾的主要用途是改變浏覽器顯示文字連結時的下劃線。

text-decoration: 參數

·underline：為文字加下劃線

·overline：為文字加上劃線

·line-through：為文字加删除線

·blink：使文字閃爍

·none：不顯示上述任何效果

八．控制文本的樣式

控制文本的樣式包括單詞距離、字母距離、文本行距、文本水準對齊、文本垂直對齊文本縮進六個部分。

1．單詞間距

單詞間距指的是英文每個單詞之間的距離，不包括中文文字。

word-spacing: 間隔距離

間隔距離的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。

2．字母間距

字母間距是指英文字母之間的距離，功能、用法，以及參數的設定和單詞間距很相似。

letter-spacing: 字母間距 

3．行距

行距是指上下兩行基準線之間的垂直距離。一般地說，英文五線格練習本，從上往下數的第三條橫線就是計算機所認為的該行的基準線。

line-height: 行間距離

行間距離取值：

·不帶機關的數字：以1為基數，相當于比例關系的100%

·帶長度機關的數字：以具體的機關為準

·比例關系

注意：如果文字字型很大，而行距相對較小的話，可能會發生上下兩行文字互相重疊的現象。

4．文本水準對齊

文本水準對齊可以控制文本的水準對齊，而且并不僅僅指文字内容，也包括設定圖檔、影像資料的對齊方式。

text-align: 參數

參數的取值：

·left：左對齊

·right：右對齊

·center：居中對齊

·justify：相對左右對齊

但需要注意的是，text-alight是塊級屬性，隻能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等辨別符裡。

5．文本垂直對齊

文本的垂直對齊應當是相對于文本母體的位置而言的，不是指文本在網頁裡垂直對齊。比如說，表格的單元格裡有一段文本，那麼對這段文本設定垂直居中就是針對單元格來衡量的，也就是說，文本将在單元格的正中顯示，而不是整個網頁的正中。

vertical-align: 參數

參數取值：

·top：頂對齊

·bottom：底對齊

·text-top：相對文本頂對齊

·text-bottom：相對文本底對齊

·baseline：基準線對齊

·middle：中心對齊

·sub：以下标的形式顯示

·super：以上标的形式顯示

6．文本縮進

文本縮進可以使文本在相對預設值較窄的區域裡顯示，主要用于中文闆式的首行縮進，或是為大段的引用文本和備注做成縮進的格式。

text-indent: 縮進距離

縮進距離取值：

·帶長度機關的數字

但是需要注意的是，在使用比例關系的時候，有人會認為浏覽器預設的比例是相對段落的寬度而言的，其實事實并非如此，整個浏覽器的視窗才是浏覽器所預設的參照物。

另外，text-indent是塊級屬性，隻能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等辨別符裡。