CSS代码格式化和压缩的方法与技巧

更新时间：2007年06月29日 00:00:00 作者：

下面脚本之家编辑就将一些css的格式化与压缩技巧简单的介绍下，一把情况需要尽量的缩写样式，减少体积，然后用工具进行压缩，然后再测试网页。

第一步：需要掌握css的缩写技巧
参考下面的文章即可
CSS缩写优化CSS文件的体积
 CSS常用属性缩写实例[推荐]
第二步：用css在线格式化与压缩工具
第三步：测试，看看经过压缩后的css文件，会不会导致页面变形等问题，一般情况下不会，不排除特殊情况。别忘了备份样式文件啊。

下面是一般用于css压缩的代码，一般情况下，喜欢脚本的朋友看下。具体的应用上面的两部即可。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>CSS代码格式化和加密化</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script language="JavaScript">  </script> CSS代码格式化和加密化<hr> <textarea name="" rows="" cols="" style="width:600px;height:300px;" id="code"> /*请将CSS代码复制到这里，下面是示例*/ input,button{ height:20px;background-color: #ffffff;/*border:1px solid #333333;*/ } textarea{background-color: #ffffff;border: #3872b4 1px solid;} select{ height:20px;font-size: 12px;background-color: #ffffff;border:1px solid #333333; } a{ /*color:#794820;color:#000000;*/color:#004f8a;text-decoration: none;text-transform: capitalize; } a:link { text-decoration: none; } a:visited { text-decoration: none; } .input{border: #3872b4 1px solid;height:20px;line-height:20px;font-size:12px;} #result_dao{ border-right: #b3cad6 1px solid; padding-right: 0px;border-top: #b3cad6 1px solid; padding-left: 2px;font-size: 12px; float: left; padding-bottom: 0px; margin: 2px 0px; border-left: #b3cad6 1px solid; padding-top: 0px; border-bottom: #b3cad6 1px solid; background-color: #e6eff4;width:100%;text-align: left;text-indent:20px;color:#333333;} #content{ white-space: pre; } /***rss***/ .rss_b{/*border:1px solid #99ccff;*/ padding:1px;line-height:18px;font-size:12px;width:95px;height:18px;text-align:center} .rss_l{border:1px solid #99ccff;background:#99ccff;margin:0px;margin-right:3px;padding-left:2px;padding-right:2px;color:#ffffff;} .rss_a{border:1px solid #99ccff;background:#e8f3fd;margin:0px;padding-left:1px;padding-right:1px;color:#ffffff;} .rss_a:link{color:#99ccff;} .rss_a:visited{color:#99ccff;} .rss_a:hover{background-color: #e8f3fd;text-decoration: none;color:#008ed2;border:1px solid #99ccff;} /********rank*********/ .mo_{ background-color: #ffffff;width:48px !important;width:50px;border:1px solid #99ccff;cursor:pointer ; text-align: center;font-size:12px;float:left;border-top:1px solid #99ccff;border-bottom:1px solid #99ccff;text-decoration: underline;color:#cccccc;} .mu_{ background-color: #e8f3fd;width:48px !important;width:50px;cursor:pointer ; text-align: center;font-size:12px;float:left;border:1px solid #99ccff;border-top:1px solid #ff9966;border-bottom:1px solid #99ccff;text-decoration: underline;} .ms_{ background-color: #ffffff;border:1px solid #99ccff;border-top:1px solid #99ccff;border-bottom:1px solid #ffffff;width:48px !important;width:50px;height:25px !important;height:27px;cursor:default; text-align: center;font-size:14px;line-height:25px;float:left;} .mx_{ float:left;height:260px !important;height:250px; } #Hot_Div span{float:left;height:26px !important;height:27px;border-bottom:1px solid #99ccff;width:2px; } .top{background-image: url(bg2.gif);background-position: center -145px; background-repeat: repeat-x;padding-left:5px;margin-top:5px;width:730px;float:left;margin-left:8px;/*border:1px solid #e8f3fd;*/border-top:1px solid #99ccff;/*background-color: #e8f3fd;*/padding-bottom:5px;} .top h1{ font-family: arial, helvetica, sans-serif;font-size:15px;text-indent:5px;} .top li{float:left;width:48%;/*background-color: #e8f3fd;height:20px;*/} .belong_topic{ margin-left:15px;text-align:center;font-size:14px; } #article{ margin-left:10px;width:700px;margin-top:20px;word-break:break-all;overflow:scroll !important;overflow:default;float:left;background-color: #FAFAFA; } #copyright{width:700px;margin-left:20px;background-color: #F7F7F7;color:#8B8B8B;padding:10px;} #bd_more{display:none;} #page_p_div{width:100%;padding:auto;text-align: center;} #page{margin:0 auto;} /* #i_1{background-color:#fdf7ff;} #i_1 li{background-color:#fdf7ff;} #i_1 li{color:#333;} #i_1 li a{color:#333;} */ #i_1 .list2{border-top:1px solid #cc00ff;background-color: #ccccff;} #i_1 .list2 h1{color:#333;} #i_1 h3 a{color:#333;} </textarea> <input type="submit" onclick="$('code').value = CSSdecode($('code').value);" value="格式化"> | <input type="submit" onclick="$('code').value = CSSencode($('code').value);" value="加密化" /> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

CocosCreator骨骼动画之龙骨DragonBones
这篇文章主要介绍了怎么在CocosCreator中使用骨骼动画龙骨DragonBones，对骨骼动画感兴趣的同学，可以试一下
2021-04-04
javascript iframe内的函数调用实现方法
用下面的方法可以调用iframe中的函数，实现一些比较特殊的效果，不过能跨域的。
2009-07-07
js获取最近一周一个月三个月时间的简单示例
时间的获取和格式化是我们经常遇到的问题,下面这篇文章主要给大家介绍了关于利用js如何获取最近一周一个月三个月时间的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2021-12-12
JavaScript使用setInterval()函数实现简单轮询操作的方法
这篇文章主要介绍了JavaScript使用setInterval()函数实现简单轮询操作的方法,以实例形式分析了轮询操作的原理与javascript实现技巧,需要的朋友可以参考下
2015-02-02
JS实现canvas仿ps橡皮擦刮卡效果详解
这篇文章主要为大家详细介绍了使用js中的Canvas实现橡皮擦效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
node.js Web应用框架Express入门指南
这篇文章主要介绍了node.js Web应用框架Express入门指南,从安装到各种技术的应用,都进行了讲解,是一篇不错的Express入门教程,需要的朋友可以参考下
2014-05-05
微信小程序日期选择器实例代码
本文通过一段实例代码给大家介绍了微信小程序日期选择器的实现思路，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-07-07
js 判断js函数、变量是否存在的简单示例代码
本篇文章主要是对判断js函数、变量是否存在的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
微信小程序获取用户openid的方法详解
小程序的openid相当重要,它是用户的唯一标识id,牵扯的支付,登录,授权等,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,需要的朋友可以参考下
2022-04-04
将字符串中由空格隔开的每个单词首字母大写
这篇文章主要介绍了如何将字符串中的每个单词的首字母变为大写,需要的朋友可以参考下
2014-04-04

CSS代码格式化和压缩的方法与技巧

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具