CSS 教學– 文字大小、間距、行距、背景圖 | html換行行距
大部份CSS語法的教學書籍第一課,就是練習使用CSS語法來調整文字大小、間距、行距…我們這個範例也是,最基本的入門練習,沒有寫過CSS語法的同學,來試試看吧!p{font-size:12px; /*設定文字大小*/line-height:24px; /*設定文字行距*/letter-spacing:3px; /*設定文字間距*/background-image:url(dot.gif);/*設定文字背景圖*/}p{ font-size:12px; /*設定文字大小*/ line-height:24px; /*設定文字行距*/ letter-spacing:3px; /*設定文字間距*/ background-image:url(dot.gif);/*...
大部份 CSS 語法的教學書籍第一課,就是練習使用 CSS 語法來調整文字大小、間距、行距 …
我們這個範例也是,最基本的入門練習,沒有寫過 CSS 語法的同學,來試試看吧!
p { font-size: 12px; /* 設定文字大小 */ line-height: 24px; /* 設定文字行距 */ letter-spacing: 3px; /* 設定文字間距 */ background-image: url(dot.gif); /* 設定文字背景圖 */ }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[1]
by 姜智豪 老師
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區[2]】一起交流討論喔!
...