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
姜智豪
老師

關於 姜智豪 老師

從事網頁設計工作和教學工作 20 多年,參與設計過許多網站開發專案。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 HTML、CSS、JavaScript、jQuery、RWD 等網頁設計技術,對於 SEO 搜尋引擎排名最佳化,以及 Instructional Design 教學專案設計亦有深入的研究。

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

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

迴響已被關閉。