【CSS筆記五】CSS格式化排版

一、文字排版：字型
我們可以使用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>膽小如鼠</a>的小女孩。</p>

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

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

六、文字排版：刪除線
刪除線使用下面代碼就可以實現：

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

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

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>

以上就是【CSS筆記五】CSS格式化排版的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

