CSS控制網頁中文本的技巧

css|技巧|控制|網頁|中文 　　 控制文字的樣式

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

　　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>等標識符裡。