Walter She's Blog

速记属性允许多个属性值合并成一个属性，也更容易书写和保养，css文件也更简洁。大多数速记属性不需要按照一定的顺序书写，然而 font属性被W3C推荐按照如下顺序书写：font-style, font-variant, font-weight, font-size, line-height, 和 font-family.当 font-size 和 line-height 属性一起使用时，必须把font-size属性放在前面，后面跟一个斜杠(/)放line-height属性，如下：

/* 多行书写  */
h2
{
    font-style: italic;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 100%;
    line-height: 120%;
    font-family: arial, helvetica, sans-serif;
}

/* 简写  */
h2
{
    font: italic small-caps bold 100%/120% arial, helvetica,
sans-serif;
}



然而所有的值不需要在一个速记申明里面都出现，没有出现的使用属性的默认值，如下：

p
{
    color: maroon;
    font: 80% arial, helvetica, sans-serif;
}


仅仅使用了font-size 和 font-family 属性。

边框（border）

h1
{
    border-width: 1px;
    border-style: solid;
    border-color: gray;
}

h1
{
    border: 1px solid gray;
}



Margins 和 Padding

p
{
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 3em;
    padding-left: 4em;
}

p
{
    padding: 1em 2em 3em 4em;
}



The declaration p { padding: 1em; } will apply 1em of padding to all sides of an element.

The declaration p { padding: 1em 2em; } will apply 1em of padding to the top and bottom, and 2em of padding to the left and right of an element.

The declaration p { padding: 1em 2em 3em; } will apply 1em of padding to the top, 2em of padding to the left and right, and 3em to the bottom of an element.

The declaration p { padding: 1em 2em 3em 4em; } will apply 1em of padding to the top, 2em of padding to the right, 3em of padding to the bottom, and 4em of padding to the left of an element.

背景（background）

The background property combines background-color, background-image, background-repeat, background-attachment, and background-position

h1
{
    background: yellow url(tint.jpg) repeat-y 100% 0;
}


列表（list-style）

The list-style property combines list-style-type, list-style-position, and list-style-image

ul
{
    list-style: square inside;
}