CSS常见属性缩写与全写对比

发布时间：2013-09-11 12:01:25   作者：佚名   我要评论

布局过程中总是离不开css的属性，在书写过程中高手与新手的区别是很大的，本文整理了一些常见css属性的缩写及全写对比，喜欢的朋友可以收藏下

【font】

简写：

font:italic small-caps bold 12px/1.5em arial,verdana;

等效于：

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:12px;

line-height:1.5em;

font-family:arial,verdana;

顺序：font-style | font-variant | font-weight | font-size | line-height | font-family

(注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写)

【background】简写：

background:#fff url(bg.gif) no-repeat fixed left top;

等效于：

background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;

顺序：background-color | background-image | background-repeat | background-attachment | background-position

【margin & padding】

简写：

margin:1px 0 2em -20px;

等效于：

margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;

顺序：margin-top | margin-right | margin-bottom | margin-left

(注：padding的简写和margin完全一样)

【border】

简写：

border:1px solid #000;

等效于：

border-width:1px;border-style:solid;border-color:#000;

顺序：border-width | border-style | border-color

(注：这三句也是简写，等于是把四边的样式合而为一了)

【border-top / border-right / border-bottom / border-left】

简写：

border-top:1px solid #000;

等效于：

border-top-width:1px;border-top-style:solid;border-top-color:#000;

(注：这三句也是简写，等于是把四边的样式合而为一了)

【list-style】

简写：

list-style:square outside url(bullet.gif);

等效于：

list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif);

顺序：list-style-type | list-style-position | list-style-image

【四边】

四边的简写一般如下：

padding:1px 2px 3px 4px;

等效于：

padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;

顺序：top | right | bottom | left

(注：不论是边框宽度，还是边框颜色、边距等，只要css样式涉及四边，顺序通通都是“上右下左”的顺时针方向)

如果四边的值省略一个，只写三个：

padding:1px 2px 3px;

则等效于：

padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:2px;

(注：省略的“左”值等于“右”)

如果四边的值省略两个：

padding:1px 2px;

则等效于：

padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;

(注：省略的“下”值等于“上”)

如果只有一个值：

padding:1px;

则等效于：

padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;

【颜色】

颜色的简写：

color:#FFF

等效于：

color:#FFFFFF 或 color:white

简写：

color:#06c

等效于：

color:#0066cc

相关文章

margin缩写想必有很多新手朋友们都不知道吧，善于使用缩写的朋友可以有效的提高css样式的书写效率，看到这里是不是有点心动了，下面的示例将会让你有所收获2013-09-05

采用css缩写div+css布局代码，你会发现很简洁很好看也是对网页布局者的一个比较高的要求吧，接下来为网页爱好者详细介绍下，css样式中常用的缩写语法，感性的朋有可以参考2013-03-22

网页制作Webjx文章简介：缩写可以帮助减少CSS文件的大小，更加容易阅读。我看了别人写的一些css样式，发现自己很多时候写的也不够简单和规范。

使用缩写可2009-04-02

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#2008-10-31

CSS语法在进行WEB标准网页设计时必不可少的，一般情况下我们可以通过Dreamweaver软件的“CSS样式”面板自动生成相应的CSS代码。不过虽然软件生成的CSS代码阅读清2008-10-31

本文将通过CSS实例，讲解六种缩写的形式。它们分别是margin和padding、border、background、font、list和color。Webjx.Com以前也有过类似的文件，但本文的讲解更加的清2008-10-31

CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS代码简2008-10-31

在进行WEB标准网页设计时，必不可少的是写入大量的CSS语法，一般情况下我们可以通过Dreamweaver软件的“CSS样式”面板自动生成相应的CSS代码。

不过虽然软件2008-10-17

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#2008-10-17

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况2008-10-17

最新评论