仓酷云

标题: CSS教程之CSS紧缩年夜法：技能与东西 [打印本页]

作者: 不帅 时间: 2015-1-15 23:31
标题: CSS教程之CSS紧缩年夜法：技能与工具
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
网页制造poluoluo文章简介：CSS紧缩年夜法：技能与工具.
进修编写简洁、优化的CSS必要大批的理论和一种不盲目的强制性干净的巴望。但是让你的CSS坚持整齐其实不仅仅是你对干净的猖狂的心思需求，特别关于年夜型网站来讲，这会使页面加载更快。更快的加载工夫就同等于进步可用性和较高的用户中意度。

良多人都有代码洁癖。这不是件好事。
本文将收拾会合你能够用来优化你的CSS的手艺，和一些能够主动紧缩你的代码的在线和桌面紧缩工具。
紧缩仍是不紧缩

在我们会商怎样紧缩CSS之前，必要注重一下在紧缩和代码的易读性上经常要有个均衡。良多编码者以其CSS构造明晰为傲，并且其实不但愿本人的代码被经由过程紧缩器往失落正文和断行。作为一个计划师，你应当剖析你所编写的代码的方针。假如你要创立一个小的只必要几行CSS的网站，大概就没有需要做分外的紧缩。一样，假如你在编写必要和一个开放团队分享的代码，拔出分外的正文和断行能够节俭你的同事的大批工夫并取得他们至心的感激。但是，假如你在计划一个必要大批CSS的年夜型网站，你一定要注重你的文件巨细并进你所能坚持其最小。
大概在寻觅紧缩和大概性之间的完善分离下面必要花一些工夫，可是它们都值得发掘并且完成它们的均衡可让你的事情变得简单良多。同时，很分明并非说紧缩必定会招致可读性的下降。良多可用于紧缩代码的手艺都能天生更好更有构造的代码。
思索到这一点儿，让我们入手下手懂得一些手艺已坚持CSS文件最小化吧。
空缺款式界说

让我们从分明的入手下手。假如你有一个空缺款式，丢失落它。不要托言稍后也许会用到，你也晓得它们是混乱的。除非你有一个公道的来由，不然不要增加它们。
缩写

CSS缩写是一种将多行CSS兼并到单行的办法。养成利用你晓得的一切缩写技能的习气能够分明的削减你终极写出的代码的行数。这里是个例子：
长写版本:

#container{padding-top:5pxpadding-right:10pxpadding-bottom:30pxpadding-left:18px}

复制代码

缩写版本:

#container{padding:5px10px30px18px;}

复制代码

懂得更多CSS缩写技能，能够会见上面的文章：

保举浏览阿捷的文章：《经常使用CSS缩写语法总结》
CSSSprites

CSSsprites面前的最后设法是削减HTTP哀求的数目以加速页面的加载工夫。Sprite完成这个方针的路子就是拼合多张图片到一个独自的图片文件中，一般是一个网格格局的图片。每一个独自的图片经由过程切换年夜的sprite图片的background-position来显现。关于CSS代码来讲，利用sprite手艺能够年夜年夜的进步代码的重费用和可保护性，这会分明的削减CSS的代码量。
要懂得更多关于CSSSprites，请检察ChrisCoyier在CSS-Tricks上的教程:

固然，前端察看也有一些很有代价的关于CSSSprites的文章和技能。
削减正文

我喜好在代码内里利用正文。我增加的正文越多，我就可以在视觉上更快的定位到代码中的分歧的部分。但是，假如你必要利用少的资本来高度优化的CSS，过分的正文就会吃失落可贵的字节。以是，试着往失落一切不用要的正文偏重新格局化那些你必需要保存的正文到尽量少的字节。
公道的字体范例(font-Family)

当文件巨细成为一个年夜成绩的时分，不要将替换字体包进你的font-famly中。往失落一切不用要的包袱，并将你的分外选项削减到一到两个。
之前:

#container{font-family:Palatino,Georgia,Times,serif;}

复制代码

以后:

#container{font-family:Palatino,serif;}

复制代码

关于字体，激烈保举浏览一下玉伯写的《三谈Web默许字体》，文中提到的几篇文章也都值得我们往浏览和思索。
利用16进制色采

为了削减字节数，将一切RGB色值转换成他们对应的16进制值。这开起来大概没有太年夜的意义，可是任何字节都是值得的！
之前:

#container{color:rgb(131,100,219);}

复制代码

以后:

#container{color:#8364DB;}

复制代码

往失落断行

检察每个款式属性，并将不必要的硬前往往失落。你也能够往失落最初一个分号。
之前:

#container{margin:5px;padding:5px10px30px18px;}

复制代码

之前:

#container{margin:5px;padding:5px10px30px18px}

复制代码

10个在线CSS紧缩工具

CSS紧缩工具能够主动完成清算你的代码的年夜部合作作。它们中的良多会告知你你的文件被紧缩的百分比，以是请多实验几个以懂得哪一个是最好的。
CSSDrive

可选项:

紧缩形式:低、一般、高度紧缩
正文紧缩:不紧缩、全体、大概善于某个特定值的。

CSSCompressor

可选项(每一个都可选Yes或No):

重排属性
紧缩色采
紧缩font-weight
小写化选择器
往除不用要的空间
往除不用要的分号

Arantius

可选项(每一个都可选Yes或No):

往除正文
往除最少x字节长度的正文
每行一个划定规矩

CSSOptimizer

可选项:

不删除断行(Yes或No)
能够处置URL、文件或粘贴的文本等体例的CSS

LotteryPost

可选项:无
CleanCSS

可选项(每一个都可选Yes或No):

重排选择器
重排属性
优化选择器及其属性(0,1or2)
兼并简写属性
只要平安优化
紧缩色采
紧缩Font-weight
小写化选择器
属性字体(小写或年夜写)
往除不用要的反斜杠
转换!importanthack
移除最初一个分号”;”
节俭正文
剔除有效属性(CSS2.1,CSS2.0或CSS1.0)
输出为文件

现实上，这就是开源项目csstidy的演示网站。CSStidy中文版：http://www.isparkle.cn/show/csstidy/。
Pingates

可选项(每一个都可选Yes或No):

转换长色采名为16进制
转换长16进制代码为短16进制代码
转换长16进制代码为色采名字
转换RGB为16进制
往除0器度
兼并统一个划定规矩
兼并统一个选择器
兼并属性
往除反复的属性
从margin和padding中往除无用的值
显现统计
以黑色格局输入
利用最小尺寸输入

PHPInsider

可选项:无
SevenForty

可选项:

截断选项:500,1000,1500or2000

该工具基于YUI紧缩器，可是会主动将IE的hacks删除，开辟者给出的注释是，IEhacks应当以单个文件呈现，而不是杂糅在主CSS文件中，如许会变得难于保护。
PageColumn

可选项:None
桌面版CSS紧缩工具保举

YUICompressor与TBCompressor

YUICompressor是yahoo前端团队开辟的一个前端代码紧缩工具，功效很壮大。必要Java运转情况，能够用java命令手动紧缩CSS和JS文件，也能够用ant在编译的时分批量紧缩。
淘宝前端团队的玉伯依据YUIcompressor封装的Windows平台紧缩工具，安装卸载都很复杂。正如功效壮大的YUICompressor，TBCompressor不但能够紧缩CSS，也能够紧缩JS。
在这里下载。懂得更多关于TBCompressor–JS和CSS紧缩工具
别的，保举浏览屈超同砚的《完美TBCompressor对CSS文件的紧缩历程》。
web2.0资本优化工具

国人用delphi7开辟的一款桌面工具，也是能够紧缩CSS和JS。保举一下。别的值得一提的是，作者放出了该项目标源代码。
检察官方先容及下载。别的，貌似该工具的CSS紧缩部分基于CSSTidy。
mergeCSS

CSS丛林站长鬼哥出品的一个基于AIR的工具，有良多很有效的功效，好比多文件兼并、兼并@import导进文件等。检察具体先容。
必要注重的是，该工具对缩写和属性兼并的撑持其实不太好，假如可以增添这些撑持，大概会更好吧。
别的一个十分主要的事变是，到今朝为止，鬼哥还没有放出该工具，假如你想实验一下，能够接洽他。
pagespeed

pagespeed实际上是Google开辟的一个基于Firebug的firefox插件，次要是用来剖析网站前端功能的。可是在pagespeed的剖析了局列表中MinifyCSS选项，点开便可看到你的CSS能够紧缩的比例，和前面供应一个紧缩过的版本，点击便可检察。独一不敷的就是不克不及自界说紧缩。

GZIP

不管何等丑恶的网站，GZIP都是一个对紧缩良多范例的代码都切实其实很有效的工具。它也许并非最复杂的紧缩办法，并且对初学者大概还会有些利诱。检察这个教程以猎取更多关于利用GZIP紧缩你的款式的信息。
总结

正如我后面说的，这些办法中的一些大概看起来有些过分或毫偶然义。关头是看年夜局。固然这些技能中的任何一个大概的只要几近是微乎其微的影响，分离这些手艺中的几个或全体就能够对你的CSS文件的巨细构成伟大的影响。
别的，假如你懂得到有别的的好用的紧缩工具，接待与我们分享哦～～
</p>
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

作者: 简单生活 时间: 2015-1-17 23:01
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 爱飞 时间: 2015-1-17 23:01
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 金色的骷髅 时间: 2015-1-21 16:40
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 深爱那片海 时间: 2015-1-30 21:14
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 分手快乐 时间: 2015-2-17 01:22
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 小妖女 时间: 2015-3-5 14:49
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 谁可相欹 时间: 2015-3-12 08:42
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 飘飘悠悠 时间: 2015-3-19 20:11
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)