2012年2月8日 星期三

CSS 語法入門 – 文字大小、間距、行距、背景圖

大部份 CSS 語法的教學書籍第一課,就是練習使用 CSS 語法來調整文字大小、間距、行距 …
我們這個範例也是,最基本的入門練習,沒有寫過 CSS 語法的同學,來試試看吧!
CSS 語法入門 - 文字大小、間距、行距、背景圖
1
2
3
4
5
6
p { 
    font-size: 12px;               /* 設定文字大小 */
    line-height: 24px;              /* 設定文字行距 */
    letter-spacing: 3px;              /* 設定文字間距 */
    background-image: url(dot.gif); /* 設定文字背景圖  */
}
由於文字的行距設定為 line-height: 24px; 因此我們用 Photoshop 製作一張寬 8 像素、高 24 像素的背景圖,儲存為 dot.gif 如下:
fly_00.jpg

樣式使用前~
fly_01.jpg

樣式使用後~
fly_02.jpg

沒有留言:

張貼留言