1.文字排版

字型

我們可以使用CSS樣式為網頁中的文字設定字型、字號、顏色等樣式屬性。下面我們來看一個例子，下面程式碼實現：為網頁中的文字設定字型為宋體。

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

這裡注意不要設定不常用的字型，因為如果使用者本地電腦上如果沒有安裝你設定的字型，就會顯示瀏覽器預設的字型。（因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。）
現在一般網頁喜歡設定“微軟雅黑”，如下程式碼：

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

或

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

注意：第一種方法比第二種方法相容性更好一些。

因為這種字型即美觀又可以在客戶端安全的顯示出來（使用者本地一般都是預設安裝的）。

字型字號

可以使用下面程式碼設定網頁中文字的字號為12畫素，並把字型顏色設定為#666(灰色)：

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

粗體

我們還可以使用css樣式來改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面程式碼實現設定文字以粗體樣式顯示出來。

p span{font-weight:bold;}

在這裡大家可以看到，如果想為文字設定粗體是有單獨的css樣式來實現的，再不用為了實現粗體樣式而使用h1-h6

斜體

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

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

下劃線

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

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

刪除線

刪除線使用下面程式碼就可以實現：

 p {text-decoration
 
:line-through;}

2.段落排版

縮排

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

p{text-indent:2em;}
<p>1922年的春天，一個想要成名名叫尼克卡拉威（託比?馬奎爾Tobey Maguire 飾）的作家，
離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，
股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>

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

行間距（行高）

另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下程式碼實現設定段落行間距為1.5倍。

p{line-height:1.5em;}
<p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和
戲劇家的想象為"爵士樂時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦為那個奢靡年代的
不二註解。</p>

中文字間距、字母間距

中文字間隔、字母間隔設定：

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

h1{
    letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1>

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

單詞間距設定：

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

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

對齊

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

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

同樣可以設定居左：

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

還可以設定居右：

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