HTML+CSS基礎(七):CSS格式化排版

文字排版


我們可以使用css樣式爲網頁中的文字設置字體、字號、顏色等樣式屬性。

  • 字體

不要設置不常用的字體,如果用戶本地電腦上沒有安裝設置的字體,會顯示瀏覽器默認的字體。

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;}
  • 刪除線
.oldPrice{text-decoration:line-through;}

段落排版


  • 縮進

中文文字中的段前習慣空兩個文字的空白。

p{text-indent:2em;}

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

  • 行間距(行高)

如下代碼實現設置段落行間距爲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;
}
<h1>了不起的蓋茨比</h1>

同樣可以設置居左:

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

還可以設置居右:

h1{
    text-align:right;
}
<h1>了不起的蓋茨比</h1>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章