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

2016-02-19 09:30 2 1 收藏

今天图老师小编给大家精心推荐个CSS代码格式化和压缩的方法与技巧教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~

【 tulaoshi.com - Web开发】

第一步：需要掌握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> CSS代码格式化和加密化 <textarea> /*请将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需刷新才能执行]

来源:https://www.tulaoshi.com/n/20160219/1591050.html

上一篇： java时间戳转日期格式的实现代码
下一篇： mysql 日期和时间格式转换实现语句

看过《CSS代码格式化和压缩的方法与技巧》的人还看了以下文章更多>>

CSS压缩大法：技巧与工具

标签： Web开发

学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求，尤其对于大型网站来说，这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。很多人都有代码洁癖。这不是件坏事。本文将整理集中你可以用来优化你的CSS的技术，以及一些可以...

格式化数字函数FormatNumber

标签： ASP

如果有一个数字498.8573945,如何把它格式化成两位小数据呢？用过ASP的都知道,在VbScript里我们可以调用FormatNumber,即用FormatNumber(498.8573945,2)就可以输出：498.86。由于JavaScript里没有这个函数，那么我们该如何实现呢？下面我就给出这个函数，大家可以把：<SCRIPT LANGUAGE=javascript src="http://img.jcwcn.com/...

怎样格式化c盘？

标签：电脑入门

在重装系统时把C盘格式化 1、光驱启动 (1)Award Bion 4.51PG设置重启，按DEL进入BIOS Award 4.51PG界面，用功能键区方向键选第二行"BIOS Features Setup"(BIOS特性设置)，回车进入BIOS Features Setup界面，找到第七行"Boot Sequence"，用PgUp或PgDn翻页将它右边显示的A，C，换成CDROM，C，A。按ESC，按F1...

怎么格式化c盘格式化c盘会怎么样

对于很多电脑使用者来说，对c盘这个名称并不陌生，不仅很多软件会默认储存在c盘，而且c盘里面都是电脑重要的启动系统，可想而知c盘在电脑里面的重要性了。随着电脑的使用的次数变多，人们对于一些电脑问题也就越发疑惑了。就比如如果我想格式化c盘，那么命令符号有哪些呢？如果我格式化之后会产生什么样的问题呢？以下知识为你详细解答。 ...

10款非常棒的CSS代码格式化工具推荐

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

如果你刚开始学习CSS，这意味着你的很多代码或结构可能需要优化，比如你可能过多使用了类、添加了多余的间隔或空行等等，这将导致代码臃肿、混乱，可读性和执行效率将大大降低。本文为你整理了几款CSS工具，借助它们，你可以轻松写出漂亮的CSS代码。 1. CSS Lint 这是一个在线工具，可以帮助你检测CSS代码中的问题。该工具可以对一些基本的语...

查看更多精彩>>