常用 CSS 缩写语法总结
使用 CSS 缩写可以减少 CSS 文件的大小,并使其更为易读。CSS 缩写的主要规则如下:
1. 颜色缩写
#000000 可以缩写为 #000,#336699 可以缩写为 #369;
2. 盒尺寸缩写
通常有下面四种书写方法:
- Property: Value1;表示所有边都是一个值 Value1;
- Property: Value1 Value2;表示 Top 和 Bottom 的值是 Value1,Right 和 Left 的值是 Value2
- Property: Value1 Value2 Value3;表示 Top 的值是 Value1,Right 和 Left 的值是 Value2,Bottom 的值是 Value3
- Property: Value1 Value2 Value3 Value4;四个值依次表示 Top,Right,Bottom,Left
方便的记忆方法是按顺时针,上右下左。例如:
margin: 1em 0 2em 0.5em;
3. 边框(Border)缩写
边框的属性如下:
- border-width: 1px;
- border-style: solid;
- border-color: #000;
可以缩写为一句:border: 1px solid #000;
4. 背景(Backgrounds)缩写
背景的属性如下:
- background-color: #F00;
- background-image: url(Background.gif);
- background-repeat: no-repeat;
- background-attachment: fixed;
- background-position: 0 0;
可以缩写为一句:background: #F00 url(Background.gif) no-repeat fixed 0 0;
可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值:
- Color: transparent
- Image: none
- Repeat: repeat
- Attachment: scroll
- Position: 0% 0%
5. 字体(Fonts)缩写
字体的属性如下:
- font-style: italic;
- font-variant: small-caps;
- font-weight: bold;
- font-size: 1em;
- line-height: 140%;
- font-family: “Lucida Grande”, sans-serif;
可以缩写为一句:font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
注意,如果你缩写字体定义,至少要定义 Font-size 和 Font-family 两个值。
6. 列表(Lists)缩写
取消默认的圆点和序号: list-style: none;
List-style 的属性:
-
- list-style-type: square;
- list-style-position: inside;
- list-style-image: url(Image.gif);
可以缩写为:list-style: square inside url(image.gif);