CSS之文字、段落

1.文字排版

1.1 文字排版--字體

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

或

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

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

1.2 文字排版--字號、顏色

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

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

1.3 文字排版--粗體

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

p span{font-weight:bold;}

1.4 文字排版--斜體

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

p a{font-style:italic;}

<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>

1.5 文字排版--下划線

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

p a{text-decoration:underline;}

<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>

1.6 文字排版--刪除線

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

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

2.段落排版

2.1 段落排版--縮進

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

p{text-indent:2em;}
<p>1922年的春天，一個想要成名名叫尼克卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。</p>

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

2.2 段落排版--行間距（行高）

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

p{line-height:1.5em;}

2.3 段落排版--中文字間距、字母間距

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

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

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

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

單詞間距設置：

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

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

2.4 段落排版--對齊

想為塊狀元素中的文本、圖片設置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本居中顯示。(那么什么是塊狀元素呢？在后面的11-1、11-2小節中會講到。)

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

同樣可以設置居左：

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

還可以設置居右：

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