当前位置：首页 > 资讯 > 技术文档

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

时间：2022-12-17 19:53 编辑：来源：阅读：
扫一扫，手机访问

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

第一步：需要掌握css的缩写技巧参考下面的文章即可 [url=http://www.1sucai.cn/css/6739.html]CSS缩写优化CSS文件的体积[/url] [url=http://www.1sucai.cn/css/7855.html]CSS常用属性缩写实例[推荐] [/url]第二步：用[url=http://www.1sucai.cn/tools/cssyasuo.htm]css在线格式化与压缩工具 [/url]第三步：测试，看看经过压缩后的css文件，会不会导致页面变形等问题，一般情况下不会，不排除特殊情况。别忘了备份样式文件啊。下面是一般用于css压缩的代码，一般情况下，喜欢脚本的朋友看下。具体的应用上面的两部即可。

CSS代码格式化和加密化 
<meta content="EditPlus" name="Generator"> 
<meta content="" name="Author"> 
<meta content="" name="Keywords"> 
<meta content="" name="Description"> 
 
 
 
CSS代码格式化和加密化<hr> 
<textarea cols="" id="code" name="" rows="" style="width:600px;height:300px;"> 
/*请将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 onclick="$('code').value = CSSdecode($('code').value);" type="submit" value="格式化"> | <input onclick="$('code').value = CSSencode($('code').value);" type="submit" value="加密化">

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：Lua中实现StringBuffer功能
下一篇：JS 实现Json查询的方法实例

资讯排行榜
更多>>