CSS 教學 - 文字大小、間距、行距、背景圖【飛肯設計】

CSS 教學 – 文字大小、間距、行距、背景圖

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

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

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

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

樣式使用前~

樣式使用後~

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

by

姜智豪

老師

當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！

關於「姜智豪老師」

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

CSS 教學 – 文字大小、間距、行距、背景圖

by

姜智豪

老師

關於「姜智豪 老師」

熱門的文章

關於「姜智豪老師」