在CSS網(wǎng)頁(yè)布局中，排版是一個(gè)麻煩的問(wèn)題。作為一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師和Web前端開(kāi)發(fā)人員，掌握一些簡(jiǎn)單的中文排版技巧是不可或缺的。所以今天小編特意整理了一些簡(jiǎn)單實(shí)用的技巧，希望對(duì)大家有所幫助。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到賓川網(wǎng)站設(shè)計(jì)與賓川網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋賓川地區(qū)。

[[322976]]

文字排版

字體

我們可以使用css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體、字號(hào)、顏色等樣式屬性。

 
 
 
 

  
  
  
  
body{font-family:"宋體";} 
 
 
 
 

這里注意不要設(shè)置不常用的字體，因?yàn)槿绻脩舯镜仉娔X上如果沒(méi)有安裝你設(shè)置的字體，就會(huì)顯示瀏覽器默認(rèn)的字體。(因?yàn)橛脩羰欠窨梢钥吹侥阍O(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。)

現(xiàn)在一般網(wǎng)頁(yè)喜歡設(shè)置“微軟雅黑”，如下代碼：

 
 
 
 

  
  
  
  
body{font-family:"Microsoft Yahei";} 
 
 
 
 

或

 
 
 
 

  
  
  
  
body{font-family:"微軟雅黑";}
 
 
 
 

字號(hào)、顏色

可以使用下面代碼設(shè)置網(wǎng)頁(yè)中文字的字號(hào)為12像素，并把字體顏色設(shè)置為#666(灰色)：

 
 
 
 

  
  
  
  
body{font-size:12px;color:#666} 
 
 
 
 

粗體

可以使用下面代碼實(shí)現(xiàn)設(shè)置文字以粗體樣式顯示出來(lái)。

 
 
 
 

  
  
  
  
p span{font-weight:bold;} 
 
 
 
 

斜體

以下代碼可以實(shí)現(xiàn)文字以斜體樣式在瀏覽器中顯示：

 
 
 
 

  
  
  
  
p a{font-style:italic;} 
  
  
  
  
 
  
  
  
  
三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。
 
 
 
 
 

下劃線

有些情況下想為文字設(shè)置為下劃線樣式，這樣可以在視覺(jué)上強(qiáng)調(diào)文字，可以使用下面代碼來(lái)實(shí)現(xiàn)：

 
 
 
 

  
  
  
  
p a{text-decoration:underline;} 
  
  
  
  
 
  
  
  
  
三年級(jí)時(shí)，我還是一個(gè)膽小如鼠的小女孩。
 
 
 
 
 

刪除線

如果想在網(wǎng)頁(yè)上設(shè)置刪除線怎么辦，這個(gè)樣式在電商網(wǎng)站上常會(huì)見(jiàn)到：

上圖中的原價(jià)上的刪除線使用下面代碼就可以實(shí)現(xiàn)：

 
 
 
 

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

段落排版

縮進(jìn)

中文文字中的段前習(xí)慣空兩個(gè)文字的空白，這個(gè)特殊的樣式可以用下面代碼來(lái)實(shí)現(xiàn)：

 
 
 
 

  
  
  
  
p{text-indent:2em;} 
 
 
 
 

注意：2em的意思就是文字的2倍大小

行間距(行高)

這一小節(jié)我們來(lái)學(xué)習(xí)一下另一個(gè)在段落排版中起重要作用的行間距(行高)屬性(line-height)，如下代碼實(shí)現(xiàn)設(shè)置段落行間距為1.5倍。

 
 
 
 

  
  
  
  
p{line-height:1.5em;} 
 
 
 
 

中文字間距、字母間距

如果想在網(wǎng)頁(yè)排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing 來(lái)實(shí)現(xiàn)，如下面代碼：

 
 
 
 

  
  
  
  
h1{ 
  
  
  
  
 
  
  
  
  
letter-spacing:50px; 
  
  
  
  
 
  
  
  
  
} 
 
 
 
 

注意：這個(gè)樣式使用在英文單詞時(shí)，是設(shè)置字母與字母之間的間距。

如果我想設(shè)置英文單詞之間的間距呢?可以使用 word-spacing來(lái)實(shí)現(xiàn)。如下代碼：

 
 
 
 

  
  
  
  
h1{ 
  
  
  
  
 
  
  
  
  
word-spacing:50px; 
  
  
  
  
 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
... 
  
  
  
  
 
  
  
  
  
welcome to imooc!
 
 
 
 
 

對(duì)齊

想為塊狀元素中的文本、圖片設(shè)置居中樣式嗎?可以使用text-align樣式代碼，如下代碼可實(shí)現(xiàn)文本居中顯示。

 
 
 
 

  
  
  
  
h1{ 
  
  
  
  
 
  
  
  
  
text-align:center; 
  
  
  
  
 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
了不起的蓋茨比
 
 
 
 
 

同樣可以設(shè)置居左：

 
 
 
 

  
  
  
  
h1{ 
  
  
  
  
 
  
  
  
  
text-align:left; 
  
  
  
  
 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
了不起的蓋茨比
 
 
 
 
 

還可以設(shè)置居右：

 
 
 
 

  
  
  
  
h1{ 
  
  
  
  
 
  
  
  
  
text-align:right; 
  
  
  
  
 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
了不起的蓋茨比
 
 
 
 
 

圖文環(huán)繞

在css中有一個(gè)常見(jiàn)的圖文環(huán)繞效果。實(shí)現(xiàn)方式主要是通過(guò)float標(biāo)簽，將圖片左浮動(dòng)，或者右浮動(dòng)。其相鄰的文字，就會(huì)環(huán)繞圖片排列，代碼和效果如下：

豎排文字

使用writing-mode實(shí)現(xiàn)。writing-mode屬性有兩個(gè)值lr-tb和tb-rl，前者是默認(rèn)的左-右、上-下，后者是上-下、右-左。

比如：

 
 
 
 

  
  
  
  
p{ writing-mode: tb-rl;} 
 
 
 
 

可以結(jié)合direction排版。

首字下沉

偽對(duì)象:first-letter配合font-size、float可以制作首字下沉效果。

比如：

 
 
 
 

  
  
  
  
p:first-letter{ padding: 6px; font-size: 32pt; float: left;} 
 
 
 
 

漢字注音

如果我們想為漢字注音，就可以使用ruby標(biāo)簽和ruby-align屬性來(lái)實(shí)現(xiàn)，比如：

 
 
 
 

  
  
  
  
注音zhuyin 
 
 
 
 

然后通過(guò)ruby-align設(shè)置其對(duì)齊方式。

這是一個(gè)比較冷門的技巧，可能平時(shí)使用不多，但小編覺(jué)得不妨提供給大家預(yù)防不時(shí)之需。

以上就是小編要跟大家分享的CSS網(wǎng)頁(yè)布局中文排版技巧，雖然很簡(jiǎn)單，但簡(jiǎn)單的過(guò)程中其實(shí)暗藏玄機(jī)，如果大家喜歡還請(qǐng)記得收藏哦~

 

文章名稱：這里有一些CSS中文排版技巧，值得收藏！
文章網(wǎng)址：http://www.dlmjj.cn/article/cdgocco.html