【问题标题】: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

标签: css forms stylesheet short shorthand


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

逗号分隔的声明

  1. h1, h2, h3, h4, h5, h6 { font-family:Helvetica, Verdana, sans-serif; }

第一个子选择器

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

CSS3 功能

带半径的圆角盒

  1. .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);
    

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

    http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-06-02
      • 2010-09-11
      • 2010-12-07
      • 2011-07-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-02-28
      相关资源
      最近更新 更多