大家好,今天飛肯教學文要來教各位一個非常實用, CSS 語法網頁設計的重要CSS排版技巧之一: 「CSS Sprite」的應用。
這個「CSS Sprite」CSS排版技巧不但可以幫我們減輕網頁主機端的圖檔數量(連帶減輕主機的讀取次數)、加快網頁的開啟速度,更進一步還可以讓網頁的 SEO 排名提高,所以大家一定要學會這一招,將它應用在排版時,這麼一來就可以輕鬆達到網頁優化的效果喔!
這次我們先從常用的 icon 圖示開始練習吧,其實原理很簡單,就是把網頁所需要用到的 icon 圖示合併成同一張圖檔,再用 CSS 語法來指定 icon 個別的位置,而不必在 html 架構中一張一張的插入圖片,浪費寶貴的時間跟空間喔。完成之後的效果如下方圖示:
接著請打開你所使用的網頁編輯器,跟著我們的教學步驟一起練習吧!
【步驟一】 新建 HTML 頁面
首先,我們新建一個 HTML 頁面,結構很簡單,如下方圖示:
程式碼寫法:(將比較重要的課程名稱,使用3號標題。)
【步驟二】 附加 CSS 樣式表,並使用 ID 及 Class 選取器。
新增一個空白 CSS 檔案(“flycan.css”),並附加在剛剛的 HTML 網頁中。(如圖示第7行)
然後,先用 < div id = “BOX” >做單獨性、整體版型結構的設定,而具有重複性的 <h3> 標籤,則使用 Class 選取器來做個別的設定,命名為”AA”~”DD”。
這樣子,HTML 的程式碼部分就完成了。
【步驟三】CSS語法
開啟” flycan.css “檔案,首先從 #BOX 開始,套用事先備好的背景圖片、輸入寬、高(像素等於背景圖片大小),並將畫面設為水平置中。
接下來,請準備一張將 icon 圖示合併在一起的圖檔,在這個範例中,我們所設的每個 icon 大小是 40px * 40px ,四個合併之後這張圖就是 40px * 160px 寬高。
然後,我們來寫 <h3> 標籤的共用 CSS 語法: (主要是將 icon 圖片設為 “background-image”,以及行高、邊框、文字的共同設定。 )
承上,我們接著要來做 icon 位置的個別設定(即 class=”AA”~”DD”這一部分),這也是這篇教學文關於「 CSS Sprite 」的主要用法,請先看下方圖解:
分別輸入各個 icon 的 “background-position” 數值,記得先水平、後垂直;
要注意y軸部分,如果由上往下的話依序為負數的遞增:0、-40px、-80px、-160px 。
將以上語法全部輸入完畢,就大功告成囉!
最後,我們再用圖示幫大家快速複習一下這一篇的主要結構:
做完這個「CSS Sprite」入門的教學練習之後,希望大家都能學會並且活用,然後朝更進階的 CSS 語法之路邁進喔! ^_^
當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!