易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS在线优化

最近在网上找到了几款CSS在线优化器,自己试了试,放上来跟大家分享一下。
1. Online CSS Optimizer /在线CSS优化
该在线工具用于精简和压缩样式表的文件大小,优化后的代码将完全是混乱的,支持输入URL,提交文件和直接输入进行压缩。
2. CSS Compressor/CSS压缩
作用同上,但这个工具拥有非常详细的压缩选项,它包含基本模式和高级模式。
在基本模式下, 你可以选择压缩模式: 轻度,标准和高度。最高模式压缩后的文件最小,但同时可读性也就最低,甚至压缩后就出问题也可能,以此类推。还可以选择CSS注释代码的处理: 不处理注释,清除所有注释或限定注释字符数。
在高级模式下,还可以对空白,Tab,新行等等进行选择处理。
3. CleanCSS / CSS格式化和优化工具
基于 CssTidy 的一款在线CSS优化工具,既可以格式化CSS代码,也可以优化CSS减少CSS文件大小,包含非常详细的选项设置。比如选择器和属性的排序,大小写转换等等。
4. CSS Analyzer / CSS有效性分析工具
检查样式表的有效性,验证样式表是否符合 W3c 标准,同时进行颜色对比测试和确保尺寸的单位(W3C的Guideline 3.4 建议使用相对而非绝对单位,虽然px是相对单位,但是最终的字体大小却取决于输出介质,所以建议是使用百分比和em等尺寸单位。)
5. Format CSS Online /在线CSS格式化工具
这是一个专门用于格式化CSS样式表文件的在线工具,讨论该使用”多行模式”还是”单行模式”或其它模式是没什么意义的,不如大家就按自己的模式去做,在协作的时候用工具重新格式化成自己喜欢的模式就好了。
6. Tabifier
非常简单的格式化工具,通过增加代码的缩进来让代码更具可读性。
7. Pretty Printer
一款多用途代码优化工具,提供多种选项,除 CSS 外,还支持 PHP,Java,C++,C,Perl,javascript 等多种语言。
8. Styleneat
简单易用的CSS格式化工具,虽然选项不多,但还是蛮实用的,支持直接输入,上传文件和输入URL。


相关文档:

《精通CSS高级WEB标准解决方案》第八章:招数和过滤器

我在www.c09.com 发表了这个笔记并上传了原著的PDF,今天有空,转到BLOG上来。
招数和过滤器
IE的有条件注释:仅用这一项,就可以解决IE的兼容问题,至于其它浏览器的不同版本,我们完全可以忽略不计。[code]
/*有条件注释仅在IE中支持且IE5以后的所有版本均支持*/
<!--[if IE]
<style type='text/css'>
@im ......

DIV+CSS样式编写字体大小标准

各地哀悼玉树地震遇难同胞h1
各地哀悼玉树地震遇难同胞32px
各地哀悼玉树地震遇难同胞h2
各地哀悼玉树地震遇难同胞24px
各地哀悼玉树地震遇难同胞h3
各地哀悼玉树地震遇难同胞18px
各地哀悼玉树地震遇难同胞h4
各地哀悼玉树地震遇难同胞16px
各地哀悼玉树地震遇难同胞h5
各地哀悼玉树地震遇难同胞13px
各地哀悼玉 ......

纯CSS实现的背景渐变条特效代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS渐变条</ ......

CSS嵌套选择器优先级计算

一组嵌套选择器的实际特性可以计算出来。基本的,使用ID选择器的值是100,使用class选择器的值是10,每个html选择器的值是1。
它们加起来就可以计算出特性的值。
p的特性是1(一个html选择器)
div p的特性是2(两个html选择器)
.tree的特性是10(1个class选择器)
div p.tree的特性是1+1+10=12,(两个html选择器 ......

【Css的一些小技巧1】右对齐的日期。


如图,做网站时经常遇到的情况,将项目名和发布时间左右分开。
方法1:
思路是直接将时间放到一个行内元素里,然后将这个元素右浮动。
   如:<li><span>(2009-01-01)</span>[媒体播放] KMPlayer
2.9.3.1428 中文正式版 </li>
只要将 li span{float:right;},然后 li{width:200 ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号