改變行高
最簡單,最有效的文字樣式效果之一,是line-height屬性,在每行文字之間加上一些額外的空間,就能讓文字段落更容易閱讀,更吸引人,也能為你的頁面帶來奇妙的效果.
只要為＜body>標(biāo)簽加上以下的CSS規(guī)則就能完成這個(gè)技巧.當(dāng)然也可以為其它標(biāo)簽加上這條規(guī)則,比如說只想改變＜p>的行高.
body {
line-height: 1.5em;
}
這段代碼的意義是:頁面上文字的行高應(yīng)該是文字高度的1.5倍.我喜歡在指定line-height的時(shí)候使用em單位,因?yàn)樗鼈儠?huì)隨著字體大小而改變.
圖2顯示的是加上line-height之后的效果.
圖2 預(yù)設(shè)文字加上行高之后的效果
看起來已經(jīng)變得很棒了,小小的line-height能辦到的效果實(shí)在驚人.
都在家族里
當(dāng)然,我們也能改變字體,但需要留意的是可能會(huì)被使用者系統(tǒng)上安裝的字體限制住.
接著以font-family屬性為實(shí)例加上一組希望使用的字體.這邊的概念是:指定一組字體列表,中間以逗號(hào)隔開,并且以希望使用的順序排列.如果使用者沒有安裝列表中的第一個(gè)字體,瀏覽器會(huì)選用第二個(gè)字體,以此類推.
body {
font-family: Georgia, Times, serif;
line-height: 1.5em;
}
在前面這個(gè)例子里,所要求的是"用Georgia字體修飾所有文字,如果使用者沒有安裝Georgia的話,改用Times,如果還沒有安裝Times的話,就是用預(yù)設(shè)的serif字體".
圖3顯示了示例加上font-family之后的效果.
圖3 以Georgia字體顯示的示例效果.
本新聞共 5頁,當(dāng)前在第 2頁 1 2 3 4 5 |
