CSS控制網頁中文字的技巧

2021-04-13 09:59:13 字數 2243 閱讀 1976

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

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

CSS控制網頁中文字的技巧

t color 0000ff 控制文字的樣式 控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 upper...

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...

css控制中文字型間距

平時在使用模板,特別是外國人開發的模板的時候,用中文字型會比較難看,css可以控制中文字型的間距,還有是什麼字型。word spacing是英文單詞的間距。如果要是單個的中文字元的話要用letter spacing 下面是字型集 中文名 英文名unicode windows 宋體 simsun 5b...