css如何實現段落排版

這篇文章將為大家詳細講解有關css如何實現段落排版，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

段落排版

縮進

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

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如何實現段落排版”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。