css代碼壓縮

1. css中的background-image圖片會被壓縮

需要准備陸輪的材料分別有：電腦、瀏覽器、html編輯器。岩鎮

1、首先，打開html編輯器，新建html文件，例如：早棗信index.html。

2、在index.html中的<style>標簽中，輸入css代碼：body {background: url(image.jpg) no-repeat; background-size: 300px}。

3、瀏覽器運行index.html頁面，此時背景圖片成功用css等比例縮小到了300px寬度的大小。

2. 如何還原壓縮過的css或Js文件，如下圖

1、首先新建一個html文件，命名為test.html。

3. 怎麼用過uglifyjs 壓縮css

uglifyjs 只能壓縮js,壓縮css要用 minify，
部分代碼：
{% javascripts '*' filter='uglifyjs2' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
謝謝
.....

4. CSS的CSS壓縮方法

理想的情況是只擁有一個CSS文件（如果你使用RWD以支持IE的老版本，那就需要兩個CSS文件。）構建並維護幾個單獨的CSS文件也算合理納斗做，但在部署到產品伺服器之前，你應該將它們集合在一起，並刪掉那些不必要的空白區域。
Saas、LESS和Stylus等預處理器可幫你完成這些痛苦的工作。 Grunt.js、 Gulp等工具可自動化你的工作流。如果你更喜歡GUI，可藉助Koala提供的免費跨平台應用。
如果你覺得這些比較麻煩，也可手動通過命令行工具將CSS文件集中在銷啟一起，如在Windows中，可使用如下代碼：
在Mac/linux中，可使用如下代碼：
最終文件經過在線CSS壓縮工具（如 cssminifier.com、 CSS Compressor & Minifieror等）壓縮後即可運行。
最後，請記住在頭部（Head）載入所有CSS，以便瀏覽器展示接下來的HTML元素，同時也可避免瀏覽洞衡器下次再重繪頁面元素。

5. grunt壓縮的css問價怎麼解壓縮

安裝

1
要想使用grunt，首先必須將grunt-cli安裝到全局環境中，打開控制台（注意：windows系統下請使用管理員許可權打開），輸入：
npm install -g grunt-cli
注意，mac os 系統、部分linux系統中，在這句話的前面加上「sudo 」指令。

2
回車，命令行會出現一個轉動的小橫線，表示正在聯網載入。載入的時間看你網速的快慢，不過這個軟體比較小，一般載入時間不會很長，稍一會兒，就載入完了。你會看到以下界面。

3
要驗證一下grunt-cli是否安裝完成並生效，你只需要繼續在命令行中輸入
「grunt」命令即可。如果生效，則會出現以下結果：
-- 可能不一樣 --

END
創建一個簡單的網站

1
首先，我在電腦的D盤下面建了一個「grunt_test」文件夾，裡面建了三個空文件夾、兩個空文檔，名稱如下圖。（注意 Gruntfile.js 文件的首字母大寫！）
devDependencies是什麼意思？字面意思解釋是「開發依賴項」，即我們現在這個系統，將會依賴於哪些工具來開發

2
先把package.json這個文件寫一些東西
{ "name": "my", "version": "1.0.0", "devDependencies": {
}

3
接下來我們會有一系列插件的安裝，他們的安裝過程和grunt一樣。但是他們的執行都是基於grunt的，因此才能把grunt叫做一個「構建工具」。

4
注意，這里安裝grunt不再是全局安裝了，需要你在控制台進入到網站或系統的具體目錄下。這里我們進入 D:\grunt_test 目錄下。然後輸入以下命令。

5
應該第一時間打開package.json去看看，那裡的「devDependencies」有什麼變化。我這里的變化如下圖，看看你的是不是和我的一樣
然後你再看看文檔目錄中的文件或者文件夾有什麼變化？我這里多了一個「node_moles」文件夾，其中有一個「grunt」文件夾，再其中有若干文檔。這里就是存儲grunt源文件的地方。

6
在控制台運行「grunt」命令。如果你得到一個warning提示，那說明grunt已經起作用了。

END
配置Gruntfile.js

1
Gruntfile.js 這個文件，肯定是為了grunt做某種配置的。按照grunt的規定，我們首先把Gruntfile.js配置成如下格式

END
Grunt插件

Contrib-jshint——javascript語法錯誤檢查；
Contrib-uglify——壓縮javascript代碼
Contrib-cssmin——壓縮css代碼
Contrib-watch——實時監控文件變化、調用相應的任務重新執行；
Contrib-clean——清空文件、文件夾；
Contrib-——復制文件、文件夾
Contrib-concat——合並多個文件的代碼到一個文件中
使用uglify插件（壓縮javascript代碼）。
安裝uglify插件的方式，和安裝grunt是一樣的。還記得grunt是怎麼安裝的嗎？

我們在現有的「src」文件夾中新建一個「test.js」，並隨便寫一些代碼。顯然，我們無法通過雙手和鍵盤寫出壓縮後的代碼。

第一步，在grunt.initConfig方法中配置 uglify 的配置參數
uglify:
{ target: { files: [{ expand: true,
cwd: 'src', src: ['*.js', '!*.min.js'], ext:
'.min.js' }] }}
)};
grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.registerTask('default',
['uglify', 'cssmin']);//使用grunt命令執行

以上說的這三步已經OK了，接下來我們去試試。在控制台中運行grunt命令，
控制台將輸入如下信息：
現在好像沒有 -- without errors --

6. 如何利用node進行js css合並壓縮

gulp是基於Node.js的前端構建工具。所以首先需要安裝nodejs，安裝nodejs。
完成nodejs安裝之後，需要使用npm安裝gulp。
先安裝全局gulp
npm install -g gulp然後在項目根目錄下安裝本地gulp。
此時項目根目錄下會多出下面這個文件夾 node_moles
好的，現在gulp已經安裝完成了，但是gulp本身不提供js壓縮合並等功能，需要使用gulp的相關插件。目前只需要完成js壓縮合並和css文件壓縮的功能，先安裝相應的插件：
1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合並 gulp-concat
由於壓縮之前需要對js代碼進行代碼檢測，壓縮完成之後需要加上min的後綴，我們還需要安裝另外兩個插件：

7. 高效整潔CSS代碼原則

CSS學起來並不難，但在大型項目中，就變得難以管理，特別是不同的人在CSS書寫風格上稍有不同，團隊上就更加難以溝通，為此總結了一些如何實現高效整潔的CSS代碼原則：
1. 使用Reset但並非全局Reset
不同瀏覽器元素的默認屬性有所不同，使用Reset可重置瀏覽器元素的一些默認屬性，以達到瀏覽器的兼容。但需要注意的是，請不要使用全局Reset：
*{ margin:0; padding:0; }
這不僅僅因為它是緩慢和低效率的方法，而且還會導致一些不必要的元素也重置了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的做法。
/** 清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
th, td, /* table elements 表格元素 */
img/* img elements 圖片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 設置默認字體 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋體',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超鏈接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置圖片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
2. 良凳猛衡好的命名習慣
無疑亂七八糟或者無語義命名的代碼，誰看了都會抓狂。就像這樣的代碼：
.aaabb{margin:2px;color:red;}
我想即使是初學者，也不至於會在實際項目中如此命名一個class，但有沒有想過這樣的代碼同樣是很有問題的：
h1My name is span class="red blod"Wiky/span/h1
問題在於如果你需要把所有原本紅色的字體改成藍色，那修改後就樣式就會變成：
.red{color:bule;}
這樣的命名就會很讓人費解，同樣的命名為.leftBar的側邊欄如果需要修改成右側邊欄也會很麻煩。所以，請不要使用元素的特性（顏色，位置，大小等）來命名一個class或id，您可以選擇意義的命名如：#navigation{...}，.sidebar{...}，.postwrap{...}
這樣，無論你如何修改定義這些class或id的樣式，都不影響它跟HTML元素間的聯系。
另外還有一種情況，一些固定的樣式，定義後就不會修改的了，那你命名時就不用擔憂剛剛說的那種情況，如
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
那麼對於這樣一個段落
p class="alignleft"我是一個段落！/p
如果需要把這個棗做段落由原先的左對齊修改為右對齊，那麼只需要修改它的className就為alignright就可以了。
3. 代碼縮寫
CSS代碼縮寫可以提高你寫代碼的速度，精簡你的代碼量。在CSS裡面有不少可以縮知盯寫的屬性，包括margin，padding，border，font，background和顏色值等，如果您學會了代碼縮寫，原本這樣的代碼：
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
就可以縮寫為：
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
4. 利用CSS繼承
如果頁面中父元素的多個子元素使用相同的樣式，那最好把他們相同的樣式定義在其父元素上，讓它們繼承這些CSS樣式。這樣你可以很好的維護你的代碼，並且還可以減少代碼量。那麼本來這樣的代碼：
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
就可以簡寫成：
#container{ font-family:Georgia, serif; }
5. 使用多重選擇器
你可以合並多個CSS選擇器為一個，如果他們有共同的樣式的話。這樣做不但代碼簡潔且可為你節省時間和空間。如：
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
可以合並為:
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
6. 適當的代碼注釋
代碼注釋可以讓別人更容易讀懂你的代碼，且合理的組織代碼注釋，可使得結構更加清晰。你可以選擇做的樣式表的開始添加目錄:
/*------------------------------------
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
----------------------------------- */
如此你代碼的結構就一目瞭然，你可以容易的查找和修改代碼。
而對於代碼的主內容，也應適當的加以劃分，甚至在有必要的地方在對代碼加以注釋說明，這樣也有利於團隊開發:
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 設置字體顏色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }
7. 給你的CSS代碼排序
如果代碼中的屬性都能按照字母排序，那查找修改的時候就能更加快速:
/*** 樣式屬性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
8. 保持CSS的可讀性
書寫可讀的CSS將會使得更容易查找和修改樣式。對於以下兩種情況，哪種可讀性更高，我想不言而明。
/*** 每個樣式屬性寫一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** 所有的樣式屬性寫在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
當對於一些樣式屬性較少的選擇器，我會寫到一行：
/*** 選擇器屬性少的寫在同一行 ***/
div{ background-color:#3399cc; color:#666;}
對於這個規則並非硬性規定，但無論您採用哪種寫法，我的建議是始終保持代碼一致。屬性多的分行寫，屬性少於3個可以寫一行。
9. 選擇更優的樣式屬性值
CSS中有些屬性採用不同的屬性值，雖然達到的效果差不多，當性能上卻存在著差異，如
區別在於border:0把border設為0px，雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。
而border:none把border設為"none"即沒有，瀏覽器解析"none"時將不作出渲染動作，即不會消耗內存值。所以建議使用border:none;
同樣的，display:none隱藏對象瀏覽器不作渲染，不佔用內存。而visibility:hidden則會。
10. 使用link代替@import
首先，@import不屬於XHTML標簽，也不是Web標準的一部分，它對於較早期的瀏覽器兼容也不高，並且對於網站的性能有某些負面的影響。
11. 使用外部樣式表
這個原則始終是一個很好的設計實踐。不單可以更易於維護修改，更重要的是使用外部文件可以提高頁面速度，因為CSS文件都能在瀏覽器中產生緩存。內置在HTML文檔中的CSS則會在每次請求中隨HTML文檔重新下載。所以，在實際應用中，沒有必要把CSS代碼內置在HTML文檔中：
style type="text/css"
#container{ .. }
#sidebar{ .. }
/style
而是使用link導入外部樣式表：link rel="stylesheet" type="text/css" href="css/styles.css" /
12. 避免使用CSS表達式（Expression）
CSS表達式是動態設置CSS屬性的強大（但危險）方法。Internet Explorer從第5個版本開始支持CSS表達式。下面的例子中，使用CSS表達式可以實現隔一個小時切換一次背景顏色：
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
如上所示，expression中使用了JavaScript表達式。CSS屬性根據JavaScript表達式的計算結果來設置。
表達式的問題就在於它的計算頻率要比我們想像的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次。給CSS表達式增加一個計數器可以跟蹤表達式的計算頻率。在頁面中隨便移動滑鼠都可以輕松達到10000次以上的計算量。
如果必須使用CSS表達式，一定要記住它們要計算成千上萬次並且可能會對你頁面的性能產生影響。所以，在非不得已，請避免使用CSS表達式。
13. 代碼壓縮
當你決定把網站項目部署到網路上，那你就要考慮對CSS進行壓縮，出去注釋和空格，以使得網頁載入得更快。壓縮您的代碼，可以採用一些工具，如YUI Compressor，利用它可精簡CSS代碼，減少文件大小，以獲得更高的載入速度。

8. dw站點怎麼壓縮

壓縮方法

使用DW軟體的查找與替換工具進行替換壓縮CSS代碼。

1、DW軟體打開CSS文件

2、刪除空格壓縮代碼

2-1：使用快捷鍵「Ctrl+F」，調出查找與替換工具選項卡。



2-2：查找處鍵入(輸入)一個英文半形小寫「空格」

在「查找」輸入框中輸入一個空格



在「查找」輸入框中輸入一個空格，「替換」的輸入框中或亂無需填入然後字元或代碼，這樣在執行替換時候，相當於把空格替換為沒有字元，相當於刪除空格位置。

2-3：點擊「替換全部」



點擊「替換全部」後，即可將多餘的空格位置刪除完成，完成壓縮一部分。

3、將多餘的分號刪除

在CSS代碼中，每個CSS選擇器內的最後一個CSS樣式的結束是不需要「分號」結束的，換句話說每個選擇器內即「後花括弧」前是不需要分號結束最後一個CSS樣式的。



同樣使用DW軟體「查找與替換」功能刪除掉，避免刪除錯其它「分號」，這個時候在「查找與替換」選項卡中「查找」輸入框中填寫「;}」(分號+後花括弧)，在「替換」輸入框中只輸入「}」(後花括弧)，然後點擊「替換全部」，即可完成刪除多餘分號符號。

4、刪除多餘空行，讓代碼都排成一排(緊貼一起)

可以手動刪除空行，也可以使用DW軟體快速刪除空行，具體刪除壓縮如下。

4-1：首先DW打開CSS文件代碼

4-2：選中空行



首先將滑鼠游標移衫告檔動到選擇器開頭，然後點擊滑鼠左鍵不放同時往上拉到上一個選擇器結束前(上一個CSS樣式選擇器後花括弧後)，這個時候即可選中空行，此時選中空行為藍色區域。

4-3：調出「查找與替換」工具

在選中後松開滑鼠左鍵後，使用快捷鍵「Ctrl+F」，即可調用出「查找與替換」選項卡，此時「查找與替換」選項卡的「查找」輸入框中即可自動填上友禪剛剛選取好的空行。



4-4：點擊「替換全部」完成壓縮