這節要講解的是CSS+DIV教程中一個非常實用的技術：CSS Sprites。這不是什麼新的技術，只是對於新手來說是新的。它對網頁的製作非常有用，希望大家仔細看下面的文章：
CSS Sprites介紹：
CSS Sprites在國內很多人叫css精靈，也有叫CSS雪碧。我喜歡叫它css精靈，其實叫什麼無所謂。知道它的應用叫什麼都行。它是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問 該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
CSS Sprite原理：
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景 圖片的位置。
CSS Sprites優點：
利用CSS Sprites設計的網頁最大的優點就是提高網頁的加載速度。這也是CSS Sprite其被廣泛傳播和應用的主要原因；它之所以能提高網頁的加載速度主要是是因爲用CSS Sprites製作的網頁加載時能很好地減少了網頁的http請求，如你的網頁有五張圖片，按正普通的技術設計加載時，要向服務器請求五次才能加載成功。而我們有CSS Sprite設計的網頁把這五張圖整合到一張圖上，加載時向服務器請求一次就可以了，從而大大的提高了網頁的加載速度，提高了網頁的性能。這也是CSS Sprites最大的優點。
還有，CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合併成1張圖片的字節總是小於這3張圖片的字節總和。 這樣網頁的總的體積就小了。對加載速度提高有幫助。
解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
CSS Sprites缺點：
雖然CSS Sprites有很多優點，但是也存在一些不可忽視的缺點
CSS雪碧的最大問題是內存使用。除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白。這樣就浪費了系統的內存了。
在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內不會出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這活難度倒是沒有但很麻煩。
CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增加了，還要改動css。
任何一項技術都有它的優點和不足。就看我們怎麼應用了。只要應用得當就會給我們帶來方便。CSS Sprites精靈也是如此。很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
總結下來CSS Sprites非常值得學習和應用的。
下面我們就通過一個例子就說明下CSS Sprites的應用。我們裏做的是橫向導航菜單。
首先我們準備張圖。如下
我是爲了講解方便。圖做的比較簡單，要是喜歡用圓角自己用photoshop做一張換了就行了。
要是photosho運用的不好，用這張也可以，但最好自己做，不會的可以學下，photosho教程網一搜一大把。也不是很難。
接下來我們建立一個HTML文件。
學了我前面的CSS+DIV教程。這點應不成問題了。這裏就講的不那麼些麼詳細了。
代碼如下：
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- <html xmlns=”http://www.w3.org/1999/xhtml”>
- <head>
- <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
- <title>css sprites技術詳解</title>
- <style>
- #menu{margin:0;padding:0;height:28px;border-bottom:3px solid #bc0000;}
- #menu ul{margin:0;padding:0;list-style:none;}
- #menu ul li {float:left;margin-left: 1px;}
- #menu ul li a{display:block;padding:0 8px;background:url(images/1_1.gif);text-align:center;font-size:14px;color:#ffffff;text-decoration:none;font-weight:bold;line-height:28px;background-position:0 0;}
- #menu ul li a:hover{padding-left: 8px;background:url(images/1_1.gif);color:#FFFFFF;background-position:0 28px;}
- </style>
- </head>
- <body>
- <div id=”menu”>
- <ul>
- <li><a href=”http://www.998seo.info/”>首頁</a></li>
- <li><a href=”#”>網站建設</a></li>
- <li><a href=”#”>網站優化</a></li>
- <li><a href=”#”>網站地圖</a></li>
- </ul>
- </div>
- </body>
- </html>
最後在瀏覽器的中效果如下圖：
