如何写一个很小的 CSS 文件

转载 2007年09月30日 23:40:00

原文:http://blog.istef.info/2007/09/24/how-to-create-small-css-files/

看了这篇文章,想想自己也经常和 CSS 打交道,对于压缩 CSS 还是有一点心得。总结一下,和大家分享。

我们知道,在 XHTML+CSS 布局流行的今天,CSS 已经成为一个网站事实上的“门面”。那么为什么我们需要一个尽可能小的 CSS 文件呢?这主要是基于流量和读取速度两方面考虑。小的 CSS 文件可以节省你的服务器流量,同时缩短用户打开你网页所需的时间。既节省了流量开支,又获得了更好的用户体验,何乐不为呢?下面我们一起看看有哪些缩小 CSS 的方法。

  1. 简化你的注释
    很多情况下,特别是曾经从事过 C/Java 等语言开发工作的程序员,可能会喜欢写多行注释,例如:
    /*————————*/
    /*—comments——–*/
    /*————————*/
    在编译语言中这样的注释当然没有问题,但在 CSS 中他们会显著的增大 CSS 文件的体积,应该尝试简化成这样:
    /*Comments*/
    这样在保持可读性的同时,减小了文件体积。事实上,在一个真正发布版本的 CSS 文件中,你完全可以去掉这些注释。
  2. 简化颜色代码
    在 CSS 中,我们经常会跟十六进制颜色代码打交道。你可能习惯于写成以下“标准形式”:
    color: #ffffff;
    color: #ff88ff;
    事实上,在 CSS 中是可以简化这个写法的,我们可以写成:
    color: #fff;
    color: #f8f;
  3. 使用单行属性代替多行属性
    在 CSS 中像 margin/padding/font/border 等属性均可以用一行来代替很多行设置,例如:
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0;
    padding-right: 0;
    我们可以写成:
    padding: 10px 0 10px 0;
    顺序为上、右、下、左,当然,对于 margin 和 padding 属性,当左右/上下的值相同时,还可以写的更简单,例如上面的例子,可写为:
    padding: 10px 0;
    上下左右都相同时,甚至可以写成:
    padding: 10px;
    对于其它缩写方法,可以参考网上一些资料。当然,我更推荐使用 TopStyle 这款软件在写 CSS 的过程中学习,它会给出具体提示。
  4. 当值为 0 时可省略掉单位
    例如:padding: 0;
  5. 同时设定多个元素的属性
    举例说明。例如:
    h1 {
        margin: 0;
        padding: 0;
    }
    h2 {
        margin: 0;
        padding: 0;
    }
    h3 {
        margin: 0;
        padding: 0;
    }
    更赞的写法是这样:
    h1,h2,h3 {
        margin: 0;
        padding: 0;
    }
  6. 删除空白和换行
    这是个很不起眼的操作,但对于脱离了开发阶段,而要应用在网络上的 CSS 而言应该进行这样的处理,至少 Google 所有应用都是这样做的。举个例子:
    h1  {
        margin: 0;
        padding: 0;
    }
    blockquote {
        background-color: #ffcccc;
    }
    应该处理成:
    h1{margin:0;padding:0;}
    blockquote{background:#fcc;}
    事实上,在 CSS 文件中可以不需要任何换行的。但是为了保持代码那么一点点可读性,我还是比较建议每个元素写成一行。现在可以利用一些工具来进行类似的操作,因此它将不会影响你的开发过程。
  7. 设定过期时间,使用 GZip
    如果有条件的话,我们应该设定 CSS 文件的过期时间,并开启 GZip 来传输 CSS 文件。设定前者可以让流行的浏览器缓存你的 CSS 文件,从而避免每次 Load 都要读取文件,大大加快速度同时也降低流量消耗。而开启 GZip 则可以让你的 CSS 文件缩小的难以想象的程度,而且如今流行的浏览器都是支持 GZip 的。
 

标准css文件开头怎么写

/*全局样式*/ *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,...
  • lipeiran1987
  • lipeiran1987
  • 2015年01月07日 11:50
  • 5790

如何写一个很小的 CSS 文件

原文:http://blog.istef.info/2007/09/24/how-to-create-small-css-files/看了这篇文章,想想自己也经常和 CSS 打交道,对于压缩 CSS ...
  • qsdnet
  • qsdnet
  • 2007年09月30日 23:40
  • 1731

HTML加载外部css文件的两种方法

HTML加载外部css文件的两种方法          方法1:    import url("/css.css"); -->   方法2: rel="stylesheet" type="text...
  • cexosoft
  • cexosoft
  • 2008年05月06日 17:30
  • 18272

外部式css样式,写在单独的一个文件中

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在内(不是在标签内)使用标签将css样式文件链接到HTML文件内,如下面代码: ...
  • a454335066
  • a454335066
  • 2017年09月04日 19:50
  • 366

【HTML+CSS】教你切图篇2-文本输入框编写

在之前的一篇文章我们提到按钮的实现,今天我们来说一下同样很常用的文本框的用途,在网页中我们经常会看到文本输入框,结合上一篇的按钮实现,那么文本框和按钮的结合我们可以用来做什么呢? 1.首先我们可以想...
  • LZGS_4
  • LZGS_4
  • 2015年12月15日 16:55
  • 1750

HTML中引入CSS文件的几种方法

概况来说有以下四种:        1.行内式:也称内联式,在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势;        2.嵌入式:将CSS样式集中写在网页的标签对的标签对...
  • lvlongyin
  • lvlongyin
  • 2016年05月10日 21:24
  • 8561

HTML外部引用CSS文件不生效

作为一个前端小白,鼓捣了几天前端。。今天突然发现我深信不疑的东西,竟然出现了问题。。就比如我在css目录下面写了一个css样式文档:style.css。这时里面只有一句话body { ba...
  • coder_zyz
  • coder_zyz
  • 2016年03月25日 10:53
  • 14128

对文件进行数字签名

未整理: 对文件进行数字签名大致上是这样做的,当用户连接设备的会话结束以后,系统对LOG文件后面再上一串固定的字符串(64个字符差不多了,需保密),然后用MD5进行hash,这样将得到一串128位的...
  • kluleia
  • kluleia
  • 2012年06月11日 18:02
  • 2726

一个很小的动物本体 owl文件

  • zhtw512
  • zhtw512
  • 2010年03月29日 16:00
  • 1071

css文件开头需要注意的几点(有待补充)

css文件开头需要注意的几点(有待补充)有写标签默认是有边距的,首先将标签的内外边距全部清空 a, address, b, big, blockquote, body, center, cite...
  • iOS_Programmer
  • iOS_Programmer
  • 2016年07月07日 10:36
  • 386
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何写一个很小的 CSS 文件
举报原因:
原因补充:

(最多只允许输入30个字)