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 或 strong 標籤了。

斜體：

p a{font-style:italic;}

下劃線：

p a{text-decoration:underline;}

刪除線：

p span{text-decoration:line-through;}

2. 段落排版

縮排

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

p{text-indent:2em;}

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

行間距（行高）

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

p{line-height:1.5em;}

中文字間距、字母間距

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

h1{ letter-spacing:50px; }

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

單詞間距設定：

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

h1{ word-spacing:50px; }

塊狀元素對齊

想為塊狀元素中的文字、圖片設定居中樣式嗎？可以使用 text-align 樣式程式碼，例如：

h1{ text-align:center;}    /*居中對齊*/
/*left:左對齊  right:右對齊*/

元素分類

在CSS中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的內聯塊狀元素有：

<img>、<input>

塊狀元素

什麼是塊級元素？在 html 中 <div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設定 display:block 就是將元素顯示為塊級元素。如下程式碼就是將內聯元素 a 轉換為塊狀元素，從而使 a 元素具有塊狀元素特點。

a{display:block;}

塊級元素特點：
1. 每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行）
2. 元素的高度、寬度、行高以及頂和底邊距都可設定。
3. 元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

內聯元素

在 html 中，<span>、<a>、<label>、 <strong> 和c<em>c就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過程式碼 display:inline 將元素設定為內聯元素。如下程式碼就是將塊狀元素div轉換為內聯元素，從而使 div 元素具有內聯元素特點。

 div{ display:inline; }

內聯元素特點：
1. 和其他元素都在一行上；
2. 元素的高度、寬度及頂部和底部邊距不可設定；
3. 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

內聯塊狀元素

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，程式碼display:inline-block 就是將元素設定為內聯塊狀元素。(css2.1新增)，<img>、<input>標籤就是這種內聯塊狀標籤。

inline-block 元素特點：
1. 和其他元素都在一行上；
2. 元素的高度、寬度、行高以及頂和底邊距都可設定。