选择器分组

使用: h1, h2, h4 {font-weight: bold;} 替换 h1{font-weight : bold;} h2{font-weight : bold;} h4{font-weight : bold;}

属性组合

定义

<样式名> :={选择器|.类名|#ID名}

字体(Font)

使用: <样式>{ font: 1em/1.5em bold italic serif; } 替换 <样式>{ font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif; }

背景(Background)

使用: <样式>{ background: #fff url("image.gif") no-repeat top left; } 替换 <样式>{ background-color: #fff; background-image: url("image.gif"); background-repeat: no-repeat; background-position: top left; }

列表(Lists)

使用: <样式>{ list-style: disc outside url("image.gif"); } 替换 <样式>{ list-style-type: disc; list-style-position: outside; list-style-image: url("image.gif"); }

内外边距(Margin & padding)

使用: <样式>{ margin: 2px 1px 3px 4px /*(顺时针:上,右,下,左);*/ } 替换 <样式>{ margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-left: 4px; } /* margin上下左右10px*/ <样式>{ margin : 10px; } /* margin上下20px , margin左右 10px;*/ <样式>{ margin: 20px 5px; } /* 上margin50px,下margin300px 左右margin 10px;*/ <样式>{ margin : 50px 10px 300px; } !注: 有点变长参数的味道

边框(Border)

使用: <样式>{border: 1px black solid 替换 <样式>{ border-width: 1px; border-color: black; border-style: solid; } 使用: <样式>{ border-right: 1px black solid 替换 <样式>{ border-right-width: 1px; border-right-color: black; border-right-style: solid; } 使用: <样式>{ border: 8px solid #336; border-left: 10px solid #ccf; border-top: 10px solid #ccf; } 替换 <样式>{ border: 8px solid #336; border-width: 10px 8px 8px 10px border-color: #ccf #336 #336 #ccf; }

参考资料:

http://www.dustindiaz.com/css-shorthand/

http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml

更多阅读

W3's CSS-2 Selector Specifications

W3.or's CSS-2 Shorthand Properties

posted on 2009-07-03 18:17  qinghao  阅读(214)  评论(0编辑  收藏  举报

Copyright © 2009 qinghao Powered by: 博客园