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

大部份 CSS 語法的教學書籍第一課,就是練習使用 CSS 語法來調整文字大小、間距、行距 …

我們這個範例也是,最基本的入門練習,沒有寫過 CSS 語法的同學,來試試看吧!

CSS 語法 - 網頁設計  - CSS 語法入門 - 文字大小、間距、行距、背景圖 - fly_02_102

p { 
    font-size: 12px;               /* 設定文字大小 */
    line-height: 24px;              /* 設定文字行距 */
    letter-spacing: 3px;              /* 設定文字間距 */
    background-image: url(dot.gif); /* 設定文字背景圖  */
} 

由於文字的行距設定為 line-height: 24px; 因此我們用 Photoshop 製作一張寬 8 像素、高 24 像素的背景圖,儲存為 dot.gif 如下:

CSS 語法 - 網頁設計  - CSS 語法入門 - 文字大小、間距、行距、背景圖 - fly_00_340


樣式使用前~

CSS 語法 - 網頁設計  - CSS 語法入門 - 文字大小、間距、行距、背景圖 - fly_01_112


樣式使用後~

CSS 語法 - 網頁設計  - CSS 語法入門 - 文字大小、間距、行距、背景圖 - fly_02_102

範例下載 http://www.flycan.com/flycancss/css-text/css-text.zip

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , .

迴響已被關閉。