CSS文字排版

1.文字排版--字體

我們可以使用css樣式為網(wǎng)頁中的文字設(shè)置字體、字號、顏色等樣式屬性。下面我們來看一個例子,下面代碼實現(xiàn):為網(wǎng)頁中的文字設(shè)置字體為宋體。

body{font-family:"宋體";}
這里注意不要設(shè)置不常用的字體,因為如果用戶本地電腦上如果沒有安裝你設(shè)置的字體,就會顯示瀏覽器默認的字體。(因為用戶是否可以看到你設(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。)
現(xiàn)在一般網(wǎng)頁喜歡設(shè)置“微軟雅黑”,如下代碼:

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

body{font-family:"微軟雅黑";}
注意:第一種方法比第二種方法兼容性更好一些。

因為這種字體即美觀又可以在客戶端安全的顯示出來(用戶本地一般都是默認安裝的)。

2.文字排版--字號、顏色

可以使用下面代碼設(shè)置網(wǎng)頁中文字的字號為12像素,并把字體顏色設(shè)置為#666(灰色):

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

3.文字排版--粗體

使用下面代碼實現(xiàn)設(shè)置文字以粗體樣式顯示出來
p span{font-weight:bold;}

4.文字排版--斜體

以下代碼可以實現(xiàn)文字以斜體樣式在瀏覽器中顯示:

p a{font-style:italic;}

5.文字排版--下劃線

有些情況下想為文字設(shè)置為下劃線樣式,這樣可以在視覺上強調(diào)文字,可以使用下面代碼來實現(xiàn):

p a{text-decoration:underline;}

6.文字排版--刪除線

使用下面代碼就可以實現(xiàn):

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

7.段落排版--縮進

中文文字中的段前習(xí)慣空兩個文字的空白,這個特殊的樣式可以用下面代碼來實現(xiàn):

p{text-indent:2em;}
注意:2em的意思就是文字的2倍大小。

8.段落排版--行間距(行高)

在段落排版中起重要作用的行間距(行高)屬性(line-height),如下代碼實現(xiàn)設(shè)置段落行間距為1.5倍。

p{line-height:1.5em;}

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

中文字間隔、字母間隔設(shè)置:

如果想在網(wǎng)頁排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing 來實現(xiàn),如下面代碼:

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

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

單詞間距設(shè)置:

如果我想設(shè)置英文單詞之間的間距呢?可以使用 word-spacing 來實現(xiàn)。如下代碼:

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

10.段落排版--對齊

想為塊狀元素中的文本、圖片設(shè)置居中樣式嗎?可以使用text-align樣式代碼,如下代碼可實現(xiàn)文本居中顯示。

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

同樣可以設(shè)置居左:

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

還可以設(shè)置居右:

h1{
    text-align:right;
}
<h1>了不起的蓋茨比</h1>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容