CSS中文排版的技巧有哪些

這篇文章主要講解了“CSS中文排版的技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS中文排版的技巧有哪些”吧！

文字排版

字體

我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。

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

這里注意不要設置不常用的字體，因為如果用戶本地電腦上如果沒有安裝你設置的字體，就會顯示瀏覽器默認的字體。(因為用戶是否可以看到你設置的字體樣式取決于用戶本地電腦上是否安裝你設置的字體。)

現在一般網頁喜歡設置“微軟雅黑”，如下代碼：

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

或

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

字號、顏色

可以使用下面代碼設置網頁中文字的字號為12像素，并把字體顏色設置為#666(灰色)：

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

粗體

可以使用下面代碼實現設置文字以粗體樣式顯示出來。

p span{font-weight:bold;}

斜體

以下代碼可以實現文字以斜體樣式在瀏覽器中顯示：

p a{font-style:italic;}  <p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>

下劃線

有些情況下想為文字設置為下劃線樣式，這樣可以在視覺上強調文字，可以使用下面代碼來實現：

p a{text-decoration:underline;}  <p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>

刪除線

如果想在網頁上設置刪除線怎么辦，這個樣式在電商網站上常會見到：

上圖中的原價上的刪除線使用下面代碼就可以實現：

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

段落排版

縮進

中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：

p{text-indent:2em;}

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

行間距(行高)

這一小節我們來學習一下另一個在段落排版中起重要作用的行間距(行高)屬性(line-height)，如下代碼實現設置段落行間距為1.5倍。

p{line-height:1.5em;}

中文字間距、字母間距

如果想在網頁排版中設置文字間隔或者字母間隔就可以使用 letter-spacing 來實現，如下面代碼：

h2{  letter-spacing:50px;  }

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

如果我想設置英文單詞之間的間距呢?可以使用 word-spacing來實現。如下代碼：

h2{  word-spacing:50px;  }  ...  <h2>welcome to imooc!</h2>

對齊

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

h2{  text-align:center;  }  <h2>了不起的蓋茨比</h2>

同樣可以設置居左：

h2{  text-align:left;  }  <h2>了不起的蓋茨比</h2>

還可以設置居右：

h2{  text-align:right;  }  <h2>了不起的蓋茨比</h2>

圖文環繞

在css中有一個常見的圖文環繞效果。實現方式主要是通過float標簽，將圖片左浮動，或者右浮動。其相鄰的文字，就會環繞圖片排列，代碼和效果如下：

豎排文字

使用writing-mode實現。writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認的左-右、上-下，后者是上-下、右-左。

比如：

p{ writing-mode: tb-rl;}

可以結合direction排版。

首字下沉

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

比如：

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

漢字注音

如果我們想為漢字注音，就可以使用ruby標簽和ruby-align屬性來實現，比如：

<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

然后通過ruby-align設置其對齊方式。

感謝各位的閱讀，以上就是“CSS中文排版的技巧有哪些”的內容了，經過本文的學習后，相信大家對CSS中文排版的技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！