改變行高
最簡單,最有效的文字樣式效果之一,是line-height屬性,在每行文字之間加上一些額外的空間,就能讓文字段落更容易閱讀,更吸引人,也能為你的頁面帶來奇妙的效果.
只要為<body>標(biāo)簽加上以下的CSS規(guī)則就能完成這個技巧.當(dāng)然也可以為其它標(biāo)簽加上這條規(guī)則,比如說只想改變<p>的行高.
body { line-height: 1.5em; }
這段代碼的意義是:頁面上文字的行高應(yīng)該是文字高度的1.5倍.我喜歡在指定line-height的時候使用em單位,因為它們會隨著字體大小而改變.
圖13-2顯示的是加上line-height之后的效果.
圖13-2 預(yù)設(shè)文字加上行高之后的效果
看起來已經(jīng)變得很棒了,小小的line-height能辦到的效果實在驚人.
都在家族里
當(dāng)然,我們也能改變字體,但需要留意的是可能會被使用者系統(tǒng)上安裝的字體限制住.
接著以font-family屬性為實例加上一組希望使用的字體.這邊的概念是:指定一組字體列表,中間以逗號隔開,并且以希望使用的順序排列.如果使用者沒有安裝列表中的第一個字體,瀏覽器會選用第二個字體,以此類推.
body { font-family: Georgia, Times, serif; line-height: 1.5em; }
在前面這個例子里,所要求的是"用Georgia字體修飾所有文字,如果使用者沒有安裝Georgia的話,改用Times,如果還沒有安裝Times的話,就是用預(yù)設(shè)的serif字體".
圖13-3顯示了示例加上font-family之后的效果.
圖13-3 以Georgia字體顯示的示例效果.
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 標(biāo)記語言——為文字指定樣式 [1] 下一頁 標(biāo)記語言——為文字指定樣式 [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|