CSS文字排版

有稜角的圓發表於2016-07-29

1.文字排版--字型
我們可以使用css樣式為網頁中的文字設定字型、字號、顏色等樣式屬性。下面我們來看一個例子,下面程式碼實現:為網頁中的文字設定字型為宋體。

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

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

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

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


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

2.文字排版--字號、顏色
可以使用下面程式碼設定網頁中文字的字號為12畫素,並把字型顏色設定為#666(灰色):

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

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

p span{font-weight:bold;}

4.文字排版--斜體
以下程式碼可以實現文字以斜體樣式在瀏覽器中顯示:

p a{font-style:italic;}

5.文字排版--下劃線
有些情況下想為文字設定為下劃線樣式,這樣可以在視覺上強調文字,可以使用下面程式碼來實現:

p a{text-decoration:underline;}

6.文字排版--刪除線
如果想在網頁上設定刪除線怎麼辦,這個樣式在電商網站上常會見到:
原價上的刪除線使用下面程式碼就可以實現:

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

7.段落排版--縮排
中文文字中的段前習慣空兩個文字的空白,這個特殊的樣式可以用下面程式碼來實現:

p{text-indent:2em;}

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

p{line-height:1.5em;}

9.段落排版--中文字間距、字母間距
中文字間隔、字母間隔設定:
如果想在網頁排版中設定文字間隔或者字母間隔就可以使用    letter-spacing 來實現,如下面程式碼:

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

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

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

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

10.段落排版--對齊
想為塊狀元素中的文字、圖片設定居中樣式嗎?可以使用text-align樣式程式碼,如下程式碼可實現文字居中顯示。(那麼什麼是塊狀元素呢?在後面的11-1、11-2小節中會講到。)

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


同樣可以設定居左:

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


還可以設定居右:

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

相關文章