文字排版--字體
我們可以使用css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體藏杖、字號(hào)懂盐、顏色等樣式屬性竭恬。下面我們來(lái)看一個(gè)例子跛蛋,下面代碼實(shí)現(xiàn):為網(wǎng)頁(yè)中的文字設(shè)置字體為宋體。
body{font-family:"宋體";}
這里注意不要設(shè)置不常用的字體痊硕,因?yàn)槿绻脩?hù)本地電腦上如果沒(méi)有安裝你設(shè)置的字體赊级,就會(huì)顯示瀏覽器默認(rèn)的字體。(因?yàn)橛脩?hù)是否可以看到你設(shè)置的字體樣式取決于用戶(hù)本地電腦上是否安裝你設(shè)置的字體岔绸。)
現(xiàn)在一般網(wǎng)頁(yè)喜歡設(shè)置“微軟雅黑”理逊,如下代碼:
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
注意:第一種方法比第二種方法兼容性更好一些橡伞。
因?yàn)檫@種字體即美觀又可以在客戶(hù)端安全的顯示出來(lái)(用戶(hù)本地一般都是默認(rèn)安裝的)。
文字排版--字號(hào)挡鞍、顏色
可以使用下面代碼設(shè)置網(wǎng)頁(yè)中文字的字號(hào)為12像素骑歹,并把字體顏色設(shè)置為#666(灰色):
body{font-size:12px;color:#666}
文字排版--粗體
我們還可以使用css樣式來(lái)改變文字的樣式:粗體预烙、斜體墨微、下劃線(xiàn)、刪除線(xiàn)扁掸,可以使用下面代碼實(shí)現(xiàn)設(shè)置文字以粗體樣式顯示出來(lái)翘县。
p span{font-weight:bold;}
在這里大家可以看到,如果想為文字設(shè)置粗體是有單獨(dú)的css樣式來(lái)實(shí)現(xiàn)的谴分,再不用為了實(shí)現(xiàn)粗體樣式而使用h1-h6或strong標(biāo)簽了锈麸。
文字排版--斜體
以下代碼可以實(shí)現(xiàn)文字以斜體樣式在瀏覽器中顯示:
p a{font-style:italic;}
<p>三年級(jí)時(shí),我還是一個(gè)<a>膽小如鼠</a>的小女孩牺蹄。</p>
文字排版--下劃線(xiàn)
有些情況下想為文字設(shè)置為下劃線(xiàn)樣式忘伞,這樣可以在視覺(jué)上強(qiáng)調(diào)文字,可以使用下面代碼來(lái)實(shí)現(xiàn):
p a{text-decoration:underline;}
<p>三年級(jí)時(shí)沙兰,我還是一個(gè)<a>膽小如鼠</a>的小女孩氓奈。</p>
文字排版--刪除線(xiàn)
刪除線(xiàn)的效果:
.oldPrice{text-decoration:line-through;}
段落排版--縮進(jìn)
中文文字中的段前習(xí)慣空兩個(gè)文字的空白,這個(gè)特殊的樣式可以用下面代碼來(lái)實(shí)現(xiàn):
p{text-indent:2em;}
<p>1922年的春天鼎天,一個(gè)想要成名名叫尼克卡拉威(托比?馬奎爾Tobey Maguire 飾)的作家舀奶,離開(kāi)了美國(guó)中西部,來(lái)到了紐約斋射。那是一個(gè)道德感漸失育勺,爵士樂(lè)流行,走私為王罗岖,股票飛漲的時(shí)代涧至。為了追尋他的美國(guó)夢(mèng),他搬入紐約附近一海灣居住桑包。</p>
注意:2em的意思就是文字的2倍大小南蓬。
段落排版--行間距(行高)
這一小節(jié)我們來(lái)學(xué)習(xí)一下另一個(gè)在段落排版中起重要作用的行間距(行高)屬性(line-height),如下代碼實(shí)現(xiàn)設(shè)置段落行間距為1.5倍捡多。
p{line-height:1.5em;}
<p>菲茨杰拉德蓖康,二十世紀(jì)美國(guó)文學(xué)巨擘之一,兼具作家和編劇雙重身份垒手。他以詩(shī)人的敏感和戲劇家的想象為"爵士樂(lè)時(shí)代"吟唱華麗挽歌蒜焊,其詩(shī)人和夢(mèng)想家的氣質(zhì)亦為那個(gè)奢靡年代的不二注解。</p>
段落排版--中文字間距科贬、字母間距
中文字間隔泳梆、字母間隔設(shè)置:
如果想在網(wǎng)頁(yè)排版中設(shè)置文字間隔或者字母間隔就可以使用 letter-spacing 來(lái)實(shí)現(xiàn)鳖悠,如下面代碼:
h1{
letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1>
注意:這個(gè)樣式使用在英文單詞時(shí),是設(shè)置字母與字母之間的間距优妙。
單詞間距設(shè)置:
如果我想設(shè)置英文單詞之間的間距呢乘综?可以使用 word-spacing 來(lái)實(shí)現(xiàn)。如下代碼:
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
段落排版--對(duì)齊
想為塊狀元素中的文本套硼,圖片設(shè)置居中樣式卡辰,可以使用text-align樣式代碼,如下代碼可實(shí)現(xiàn)文本居中顯示邪意。
h1{
text-align:center;
}
<h1>了不起的蓋茨比</h1>
同樣也可以設(shè)置居左
h1{
text-align:left;
}
<h1>了不起的蓋茨比</h1>
居右
h1{
text-align:right;
}
<h1>了不起的蓋茨比</h1>