1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 網頁必用-CSS compressor線上壓縮CSS

網頁必用-CSS compressor線上壓縮CSS

2010/10/26

梅問題-網頁設計-CSS compressor線上壓縮CSS

  瞎密!CSS壓縮器,是滴!不是只有檔案才可壓縮,現在連CSS也可壓縮囉~身為網頁設計人員,當要開始設計網頁時,除了前製視覺版型的設定外,接下來就是把版型分割,再套入CSS語法,有時套完版頁面時,光CSS語法就有五、六百行,都要快比程式碼還多,雖然說五、六百行的文字檔不會,但當網站流量大時,就相當的可觀,所以今天梅干來分享一個CSS壓縮器,透過CSS Compressor不但可壓縮CSS碼,同時還可進行CSS的優化,比方可設定刪除多餘的分號,斜線..等,讓CSS碼更加輕巧,且線上就可直接完成,現在就一塊來瞧瞧這個線上的CSS壓縮器。


Step1
開啟瀏覽器,於網址列輸入http://www.csscompressor.com/,進入後下方有些設定,可依所需自行調整。
梅問題-網頁設計-CSS compressor線上壓縮CSS


Step2
設定完成後,開啟要壓縮的CSS檔,將CSS的語法拷貝貼到CSS Input中。
梅問題-網頁設計-CSS compressor線上壓縮CSS


Step3

完成後再按下方的【Compress】 鈕,就會開始進行壓縮。

梅問題-網頁設計-CSS compressor線上壓縮CSS


Step4

完成後,在Messages中就會顯示,語法的優化記錄。

梅問題-網頁設計-CSS compressor線上壓縮CSS


Step5

按下【Select All】鈕後,貼到記事本再存成.css檔就大功告成了。

梅問題-網頁設計-CSS compressor線上壓縮CSS


  當壓縮過後,只會變成一行文字,所以原來的CSS檔還是要保留著,以防下次要修改時才好編修,而那一行主要是給瀏覽器看的,機器看的果真跟人看的不同,真佩服機器的好眼力,而這一個壓縮器,除了會壓縮外,也會幫忙修正一些小錯誤,當五、六百行,往往容易不小心多打或少分號,這時它就會將CSS作優化的處理,真的蠻不錯用滴!