你能想到哪些好的 CSS 速记？ [关闭]答案

【问题标题】：what are some good css shorthands you can think of? [closed]你能想到哪些好的 CSS 速记？ [关闭]
【发布时间】：2009-05-13 04:01:18
【问题描述】：

我能想到的一些是

font: bold 20px Verdana, sans-serif /* 一行表示变体、大小和系列 */

color: #336 /* 短颜色代码 */

height: 0 /* 0时不需要指定单位 */

border: 0 /* 效果和border: 一样，但是更短 */

background: #ffc /* 如果只需要颜色，则无需使用背景色 */

填充：0；边框：0； margin: 0 /* 只显示内容而不显示其他内容 */

border: 1px dashed #ff0 /* 粗细、样式和颜色 */

margin: 0 0.5em /* 指定上、下、左、右边距*/

【问题讨论】：

速记可能很棒，但请注意，即使您没有指定它们，它们也会覆盖所有适用的属性。例如：“border:solid 1px”也会重置“border-color”，即使你没有提到它。
达斯汀迪亚兹有an excellent CSS shorthand guide。

【解决方案1】：

 1. background: #fff url(image.png) no-repeat 20px 100px fixed;
 2. ul { list-style: decimal-leading-zero inside; }

逗号分隔的声明

第一个子选择器

 1. .footer em:first-child { color:#ccc; }

CSS3 功能

带半径的圆角盒

.rounded_corner { -moz-border-radius:10px; -webkit-border-radius:10px; width:400px; height:100px; background-color:#000; }

阴影效果

.shadow { 宽度:400px;高度：200px；背景颜色：#000; -webkit-box-shadow: 5px 5px 2px #ccc; }

【讨论】：

【解决方案2】：

你也可以用字体属性指定行高

font: bold 20px/1em Verdana, sans-serif /* one line for variant, size, and family */

其中 1em 是行高

【讨论】：

【解决方案3】：

大纲的另一个：

outline:3px dotted gray;

list-style 也支持图片：

list-style:square inside url(image.gif);

有点多余，但这里有另一篇文章解释了它们：

【讨论】：