CSS 教學 – CSS Sprite 網頁優化技巧入門

大家好,今天飛肯教學文要來教各位一個非常實用, CSS 語法網頁設計的重要CSS排版技巧之一: 「CSS Sprite」的應用。

這個「CSS Sprite」CSS排版技巧不但可以幫我們減輕網頁主機端的圖檔數量(連帶減輕主機的讀取次數)、加快網頁的開啟速度,更進一步還可以讓網頁的 SEO 排名提高,所以大家一定要學會這一招,將它應用在排版時,這麼一來就可以輕鬆達到網頁優化的效果喔!

這次我們先從常用的 icon 圖示開始練習吧,其實原理很簡單,就是把網頁所需要用到的 icon 圖示合併成同一張圖檔,再用 CSS 語法來指定 icon 個別的位置,而不必在 html 架構中一張一張的插入圖片,浪費寶貴的時間跟空間喔。完成之後的效果如下方圖示:

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-00

接著請打開你所使用的網頁編輯器,跟著我們的教學步驟一起練習吧!


【步驟一】 新建 HTML 頁面

首先,我們新建一個 HTML 頁面,結構很簡單,如下方圖示:

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-02-1

 

程式碼寫法:(將比較重要的課程名稱,使用3號標題。)

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-02


【步驟二】 附加 CSS 樣式表,並使用 ID 及 Class 選取器。

新增一個空白 CSS 檔案(“flycan.css”),並附加在剛剛的 HTML 網頁中。(如圖示第7行)

然後,先用 < div id = “BOX” >做單獨性、整體版型結構的設定,而具有重複性的 <h3> 標籤,則使用 Class 選取器來做個別的設定,命名為”AA”~”DD”。

這樣子,HTML 的程式碼部分就完成了。

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-01-1


【步驟三】CSS語法

開啟” flycan.css “檔案,首先從 #BOX 開始,套用事先備好的背景圖片、輸入寬、高(像素等於背景圖片大小),並將畫面設為水平置中。

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-08-1

接下來,請準備一張將 icon 圖示合併在一起的圖檔,在這個範例中,我們所設的每個 icon 大小是 40px * 40px ,四個合併之後這張圖就是 40px * 160px 寬高。

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-03-1

然後,我們來寫 <h3> 標籤的共用 CSS 語法: (主要是將 icon 圖片設為 “background-image”,以及行高、邊框、文字的共同設定。 )

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-08-2

承上,我們接著要來做 icon 位置的個別設定(即 class=”AA”~”DD”這一部分),這也是這篇教學文關於「 CSS Sprite 」的主要用法,請先看下方圖解:

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-03-2

分別輸入各個 icon 的 “background-position” 數值,記得先水平、後垂直;

要注意y軸部分,如果由上往下的話依序為負數的遞增:0、-40px、-80px、-160px 。

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-09-1


將以上語法全部輸入完畢,就大功告成囉!

最後,我們再用圖示幫大家快速複習一下這一篇的主要結構:

CSS 教學 - 網頁排版  - CSS 教學 - CSS Sprite 網頁優化技巧入門 - FLY-00-1

做完這個「CSS Sprite」入門的教學練習之後,希望大家都能學會並且活用,然後朝更進階的 CSS 語法之路邁進喔! ^_^

 

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

 

posted in CSS 教學 - 網頁排版 and tagged , , , , , , , .

留言功能已關閉。