css的样式缩写简洁,而且减少了页面传输的流量,应该是每一个页面设计师追求的目标。我们就来看看我们前面讲解的内容中的一些缩写。
文本缩写
- /* 文本没有缩写 */
- /* Specify blanket rules for all elements */
- font-size:12px;
- line-height:160%;
- font-weight:bold;
- font-style:italic;
- font-family: "Lucida Grande",Arial,Sans-serif;
- /* 文本有缩写 */
- /* Specify blanket rules for all elements */
- font: 12px/160% bold italic "Lucida Grande",Arial,Sans-serif;
注意:这个规则只有在你同时设定了font-size和font-family的情况下才起作用,这两个属性中任何一个没有定义,该规则都将被忽略。同时,如果你没有设定font-weight、font-style或font-variant,它们将默认设置为normal。
背景缩写
- /* 背景没有缩写 */
- background-color:#CCC;
- background-image:url(image.gif);
- background-repeat:no-repeat;
- background-position:top left;
- /* 背景有缩写 */
- background:#CCC url(image.gif) no-repeat top left;
注意:在background中省略任何值,浏览器将使用默认值。如果没有设定background-repeat值,背景图像将默认为在水平和垂直两个方向上重复。
列表缩写
- /* 列表没有缩写 */
- list-style-type:disc;
- list-style-position:inside;
- list-style-image:url(image.gif);
- /* 列表有缩写 */
- list-style:disc inside url(image.gif);
注意:在此css规则中省略任何值,浏览器将使用默认值,即分别为disc、outside和none。
外边距和内边距缩写
根据外边距或内边距值有多少不同,针对外边距和内边距有4种不同的css缩写命令
4个不同值
- /* 外边距没有缩写 */
- margin-top:50px;
- margin-right:auto;
- margin-bottom:20px;
- margin-left:10px;
- /* 外边距有缩写 */
- margin:50px auto 20px 10px;
3个不同值
- /* 外边距没有缩写 */
- margin-top:50px;
- margin-right:10px;
- margin-bottom:3px;
- margin-left:10px;
- /* 外边距有缩写 */
- margin:50px 10px 3px;
两个不同值
- /* 外边距没有缩写 */
- margin-top:50px;
- margin-right:10px;
- margin-bottom:50px;
- margin-left:10px;
- /* 外边距有缩写 */
- margin:50px 10px;
一个值
- /* 外边距没有缩写 */
- margin-top:10px;
- margin-right:10px;
- margin-bottom:10px;
- margin-left:10px;
- /* 外边距有缩写 */
- margin:10px;
注意:这4种缩写方法同样适用于内边距和边框。这里的属性值排列顺序很重要,顺序为上、右、下、左。简单记忆为时间的半天时针的走动。
边框缩写
- /* 边框没有缩写 */
- border-width:1px;
- border-color:#CCC;
- border-style:dashed;
- /* 边框有缩写 */
- border:1px #CCC dashed;
- /* 边框没有缩写 */
- border-right-width:1px;
- border-right-color:#CCC;
- border-right-style:dashed;
- /* 边框有缩写 */
- border-right:1px #CCC dashed;
- /* 边框没有缩写 */
- border-style:dashed dotted solid ridge;
- border-top-width:thin;
- border-right-width:20px;
- border-bottom-width:medium;
- border-left-width:thick;
- border-color:#000 #999 #333 #ccc;
- /* 边框有缩写 */
- border-top:#000 thin dashed;
- border-right:#999 20px dotted;
- border-bottom:#333 medium solid;
- border-left:#ccc thick ridge;