CSS样式代码缩写总结

发表于 2009年10月11日由 kily

使用缩写的代码行式自然有很多好处：如加快代码输入速度，减少CSS文件大小，便于阅读等。那好吧我们研究一下。大概总结了四种：

1.盒模型代码简写

关于边框如：

border-color:#f00;
border-with:1px;
border-style:solid

可以简写成：

border:1px solid #f00;

关于margin或padding如：

margin-top:10px;
margin-left:15px;
margin-bottom:16px;
margin-right:17px;

可以简写成：

margin: 10px 17px 16px 15px; /*顺序为上右下左，如果像素值一样只写一条即可*/

注意：如果你看见只有三个声明如：margin:1px 2px 3px 则表示上间距为1px，左右为2px，下为3px.

1.列表和背景简写

关于列表如：

list-style-type: circle;
list-style-image:url(arrow.gif);
list-style-position:inside;

可以简写为：

list-style:circle url(arrow.gif) inside;

关于背景：

background-color:#ff0000;

background-image:url(arrow.gif);

background-position:left top;

background-repeat:repeat-x;

可以简写为：

background:#ff0000 url(arrow.gif) left top repeat-x;

关于送颜色的红缩写相信大家应该知道吧：诸如：#ffffff,#ff0000,#112233我们可以分别写成#fff,#f00,#123。

关于字体的缩写如：

font-style:italic;
font-weight:bold;
font-size:12px;
line-height:14em;
font-family: “宋体” ，verdana;

可以简写为：

font:italic bold 12px/14em “宋体” ，verdana;

需要特别注意的是：字体样式简写的时候必须得有“字体大小”和“字体家族”两项定义，其它可省略。

《CSS样式代码缩写总结》上有 25 条评论

Always.Life 在 2009年11月29日16:24 说：

就是这个缩写，有的时候有点郁闷，看起来迷迷糊糊的

回复 ↓
- kily 在 2009年11月29日16:33 说：
  
  @Always.Life 多做几个实例多调试一下就行了。
  
  回复 ↓
28.com 在 2009年10月27日18:49 说：

把楼主发表的内容抄袭一遍就基本掌握了：）

回复 ↓
- kily 在 2009年10月27日18:52 说：
  
  @28.com 嗯。多抄抄对理解有好处。
  
  回复 ↓
hiro 在 2009年10月12日21:49 说：

我都是用简写的！

回复 ↓
卢松松在 2009年10月12日17:22 说：

今天刚刚弄了个幻灯CSS+js写的

回复 ↓
安在 2009年10月12日15:17 说：

==!我记得我来过了…

回复 ↓
- kily 在 2009年10月12日16:57 说：
  
  @安但是没你脚印儿啊^!^
  
  回复 ↓
吴熠在 2009年10月12日13:37 说：

有用,收藏.

回复 ↓
俊贤齐哲在 2009年10月12日11:58 说：

写的很好，css就要简单化，标准化！

回复 ↓
China CSS 在 2009年10月12日10:24 说：

你是学习CSS的吗？写的这么好啊

回复 ↓
- kily 在 2009年10月12日10:40 说：
  
  @China CSS 嗯。学习CSS纯属个人爱好。
  
  回复 ↓
on7heway 在 2009年10月12日09:16 说：

学习一下。

回复 ↓
whisperer 在 2009年10月11日13:06 说：

比较常见了哈哈。

其实如果不懂或者怕麻烦的话，可以直接拿着css去在线压缩，

另外可以拿着压缩后的代码和之前对比一下，也能学到不少。

回复 ↓
- kily 在 2009年10月11日13:56 说：
  
  @whisperer 嗯。我道不怎么用那个在线压缩工具，都是自己写呢^!^
  
  回复 ↓
  - whisperer 在 2009年10月11日15:27 说：
    
    比如这个，很好用而且它不给你乱改
    
    http://www.csscompressor.com/
    
    回复 ↓
    - kily 在 2009年10月11日15:57 说：
      
      @whisperer 嗯。以后可以试试。
      
      回复 ↓
yedo 在 2009年10月11日11:39 说：

这个是必须要知道的呀…不然多浪费时间

回复 ↓
- kily 在 2009年10月11日11:43 说：
  
  @yedo 嗯。确实。
  
  回复 ↓
365hope 在 2009年10月11日09:22 说：

恩，CSS代码是每个独立博客必须要掌握的知识，至少应该懂得一些！

回复 ↓
- kily 在 2009年10月11日09:26 说：
  
  @365hope 嗯。的确，不过这些还是比较基础一点的。
  
  回复 ↓
mimzyx 在 2009年10月11日09:07 说：

我CSS代码还没动过。

回复 ↓
- kily 在 2009年10月11日09:15 说：
  
  @mimzyx 动动是有好处的，不过新手可能比较危险^!^
  
  回复 ↓
万戈在 2009年10月11日07:46 说：

哈哈，我通常是用CSS在线工具来帮忙缩写的

回复 ↓
- kily 在 2009年10月11日08:52 说：
  
  @万戈嗯。那个东西我从来没用过。一般都是手动的哈。
  
  回复 ↓

发表评论取消回复