以文本方式查看主题 -  爱心论坛  (http://zqax.net/bbs/index.asp) --  平面设计 网页设计  (http://zqax.net/bbs/list.asp?boardid=43) ----  [转帖]Web标准基础教程：CSS简写指南  (http://zqax.net/bbs/dispbbs.asp?boardid=43&id=1872327)

--  作者：五味瓶 --  发布时间：2010/4/28 11:28:58 --  [转帖]Web标准基础教程：CSS简写指南 高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。 色彩缩写 色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个： color：#113366 可以简写为 color：#136 所有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、 box-shadow等。 盒子大小 这里主要用于两个属性：margin和padding，我们以margin为例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距： margin-top:1px; margin-right:1px; margin-botton:1px; margin-left:1px; 这四个值可以缩写到一起： margin:1px 1px 1px 1px; 缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉： margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px; margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。

--  作者：五味瓶 --  发布时间：2010/4/28 11:29:34 --   边框(border) border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。 border-width:数字+单位; border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ; border-color: 颜色 ; 它可以按照width、style和color的顺序简写： border:5px solid #369; 有的时候，border可以写的更简单些，有些值可以省掉，但是请注意哪些是必须的，你也可以测试一下： border:groove red; //大家猜猜这个边框的宽度是多少？ border:solid; //这会是什么样子？ border:5px; //这样可以吗？ border:5px red; //这样可以吗？？ border:red; //这样可以吗？？？ 通过上面的代码可以了解到，border默认的宽度是3px，默认的色彩是black——黑色。border的缩写中border- style是必须的。 同时，还可以对每条边采用缩写： border-top:4px solid #333; border-right:3px solid #666; border-bottom:3px solid #666; border-left:4px solid #333; 还可以对每个属性采用缩写： border-width：1px 2px 3px; //最多可用四个值，缩写规则类似盒子大小的缩写，下同 border-style：solid dashed dotted groove; border-color:red blue white black;