CSS Sprite 網頁優化技巧

1. 前言

本篇適合對象為網頁設計人員或前端人員，在使用網頁圖檔時可減輕取檔名的麻煩，統一在一張圖檔就能用定立的方式找出對應的圖檔，常使用的範圍在項目符號與按鈕圖檔上。

2. 目的

css語法網頁「CSS Sprite」應用

3. 實作練習

【步驟一】 新建 HTML 頁面

要使用項目符號的地方用3號標題。

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

新增一個空白 CSS 檔案(“styleicon.css”)，並附加在HTML 網頁中。

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

【步驟三】CSS語法

開啟styleicon.css “檔案，首先從 #BOX 開始，輸入寬、高並將畫面設為水平置中。

接下來，請準備一張將 icon 圖示合併在一起的圖檔，設定每個 icon 大小是 20px * 20px。

然後，我們來寫 <h3> 標籤的共用 CSS 語法，把有共同設定的語法寫在一起，最重要的是icon 圖片設為 “background-image”。

接下來設定icon個別的位罝，一張圖分別是水平不變，垂直20的距離，所以x軸為0，y軸就往下負數的遞增20。

完成後就能看到以下成果：

4. 參考來源

http://www.flycan.com/article/css/css-icon-sprite-1938.html