CSS 語法入門 – 為標題文字設定背景圖片

CSS 語法最重要的功能就是 display:block;  框格模型(區塊模式),框格可以製定寬度高度,可以調整位置,可以置入圖片… 等。 所謂的 CSS 網頁排版技巧,有一大半就是利用 display:block; 這個方法來完成的。

這個範例很簡單,先在網頁中將文字設定為 <h3> 標題,然後利用 CSS 語法 display:block;  ,再置入圖片,就可以為每個標題文字設定背景圖片,很實用的入門技巧。

CSS 語法 - 網頁設計  - CSS 語法入門 - 為標題文字設定背景圖片 - 002_206

範例預覽: http://www.flycan.com/flycancss/block_TITLE.html


首先,在 HTML 網頁中,將標題文字設定為 <h3> 如下圖 ↓

CSS 語法 - 網頁設計  - CSS 語法入門 - 為標題文字設定背景圖片 - 001_278

 


CSS 語法 – 設定如下 ↓

h3{           

display: block;                /*將 

文字 設定為區塊模式*/ height: 25px;           /*設定區塊的高度*/ width: 513px;           /*設定區塊的寬度*/ background-image: url(bar.gif);  /*設定區塊的背景圖*/ font-size: 12px;         /*設定文字大小*/ color: #000000;          /*設定文字顏色*/ text-indent: 40px;        /*文字內縮排40像素*/ font-weight: bold;        /*設定文字為粗體*/ padding-top: 12px;        /*設定文字在區塊中的上方間距*/ }

 

完成圖如下 ↓

CSS 語法 - 網頁設計  - CSS 語法入門 - 為標題文字設定背景圖片 - 002_206

範例預覽: http://www.flycan.com/flycancss/block_TITLE.html

by
姜智豪
老師

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

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

迴響已被關閉。