我知道国内很多网页制作人员都还在制作table式网页,这样的网页打开速度很慢。如果要想网站打开速度快,就要学会使用DIV+CSS,将图片写进CSS,这样如果网站内容很多的时候,也不会影响网页的浏览。它会先显示文字,在你一边浏览的时候,它就一边加载网页的图片。但是很多初学者写的CSS就是代码不够简洁,很多地方重复多余。

现在,我就教大家如何优化CSS,压缩CSS的大小,使网页加载速度更快。

要优化你网站的CSS,首先第一步就是要将你的多个CSS文件合并,这样减少一个CSS文件你的网页速度就会快上一点。CSS文件越少越好,最好只有1个。这样少一个CSS,就直接减少一个http请求。

其次,我给大家推荐一个叫Clean CSS的网站,网址是http://www.cleancss.com/,将你的CSS代码或者CSS文件的URL路径放在输入框中,然后选择你的压缩级别,最后点击“Procsss CSS”。你就可以看到,CSS代码现在简洁多了,注释语句没有了,还有一些代码也合并了,颜色代码简写了。前后比较一下你的CSS文件,你就会发现,文件变小了很多。

最后,你还是不满意的你CSS文件大小的话,我们还可以进一步压缩,但是这样以来就会影响到以后的阅读了。我还是将这个压缩工具也一起告诉大家,它就是Online YUI Compressor,地址是http://www.refresh-sf.com/yui/。注意这个不但可以压缩CSS,还可以压缩JS,但是压缩后的文件都会变成一行,它把所有换行的空白都去掉了,这样文件更加小了。如果你以后不再修改CSS了,那么可以使用一下。文件真的会变小很多哦。

css js 优化工具的更多相关文章

  1. HTML,CSS,JS优化

    HTML部分 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发: 减少DOM节点:加速页面渲染: 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放: 防 ...

  2. 前端开发必备 40款优秀CSS代码编写工具推荐

    摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...

  3. css,js工具篇

    4. web前端开发分享-css,js工具篇   web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emm ...

  4. 关于js优化和css优化

    css优化: 1.css代码的压缩. 2.css文件的合并. 3.不滥用float,因为float在渲染时计算量比较大,所以尽量减少使用float. 4.避免在html标签中写style属性. js优 ...

  5. 前端小白页面开发注意事项及小工具(html\css\js)

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

  6. 【工具相关】web-HTML/CSS/JS Prettify的使用

    一,打开Sublime Text,代码如下面所示. 二,鼠标右键--->HTML/CSS/JS Prettify--->Prettify Code.代码如图所示,明显的代码变得整齐了.

  7. 纯JS文本比较工具

    前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图: 奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctyp ...

  8. Gulp:静态资源(css,js)版本控制

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源: 然后涉及到的html模板里的src也要做相应的修改,静态资源需要优化(压缩合并) 文件目录 ...

  9. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

随机推荐

  1. IOS Notification 通知中心

    1.     通知中心概述 通知中心实际上是在程序内部提供了消息广播的一种机制.通知中心不能在进程间进行通信.实际上就是一个二传手,把接收到的消息,根据内部的一个消息转发表,来将消息转发给需要的对象. ...

  2. 用来解析,格式化,存储和验证国际电话号码:libphonenumber

    用来解析,格式化,存储和验证国际电话号码:libphonenumber libphonenumber是Google的公共Java.C++和Javascript库用来解析,格式化,存储和验证国际电话号码 ...

  3. HEVC码率控制浅析——HM代码阅读之一

    HM的码率控制提案主要参考如下三篇:K0103,M0036,M0257.本文及后续文章将基于HM12.0进行讨论,且首先仅讨论K0103对应的代码,之后再陆续补充M0036,M0257对应的代码分析, ...

  4. python xpath

    提取Item 选择器介绍 我们有很多方法从网站中提取数据.Scrapy 使用一种叫做 XPath selectors的机制,它基于 XPath表达式.如果你想了解更多selectors和其他机制你可以 ...

  5. 调试出不来 断点不起作用 调试技巧 MyEclipse进不了调试

    1:今天遇到了web项目调试总是不起作用,后来经人指点才知,当调试的断点仅仅是一个小圆圈时断点是不起作用的,这是可以重启下tomcat服务器再重新访问断点才会起作用,这是你会发现断点的小圆点左下角有个 ...

  6. Login oracle for external authenticate

    Generally, we can login the oracle by os authentication, if we login os in a remote machine and make ...

  7. YT工作日志-0911

    上午 在导师的帮助下,帮我从svn上下载了项目.但是因为项目太大(不算jar包有730M),很多模块不是我工作中涉及的,但是运行的时候会报错,所以导师还帮我找了很多错误.把那些不需要的东西注释了.就这 ...

  8. javascript每日一练(一)——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  9. Matlab,Visio等生成的图片的字体嵌入问题解决方法

    确保所有字体嵌入,是生成高质量学术论文的必要条件.但是在Windows下,总会遇到Matlab或Visio生成字体没有嵌入的问题,当然这个问题的解决办法有很多(例如,对于Visio可以这样做:直接拷贝 ...

  10. Appium - iOS 各种问题汇总

    Appium - iOS 各种问题汇总 作者: Max.Bai 时间: 2014/10 Appium - iOS 各种问题汇总  1. Appium 滑动: swipe 有三种方式:  第一种:swi ...