码迷,mamicode.com
首页 > Web开发 > 详细

CSS属性简写汇总

时间:2014-07-21 10:38:41      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   使用   strong   os   

CSS代码编写的过程中,代码数量非常庞大,许多属性会被反复使用,这样来来回回地敲打同样的属性名称会占用不少的时间。作为一名优秀的web前端人员,应当了解记忆各种属性的简写方式,用以提高自身的工作效率,缩减代码数量,增强可读性。作为一名刚接触不久的初学者,在网上搜集资料,整理了常用属性的简写模式,供大家参考。


1、颜色color简写

在颜色值采用16进制,且每两位的值相同,可以简写一半。

1
color : #113366 ;

简写为

1
color : #136 ;

2、边距margin和padding简写

外边距margin和内边距padding在CSS中使用率是很高,margin和padding都有四个方向的边距

1
2
3
4
padding-top : 2px ;
padding-right : 2px ;
padding-bottom : 2px ;
padding-left : 2px ;

有四种简写方式,都很好记

1
2
3
4
padding : 1px ;//四个方向的边距相同
padding : 1px 2px ;//第一个值表示上下边距,第二个值表示左右边距
padding : 1px 2px 3px ;//第一个值表示上边距,中间值表示左右边距,第三个值表示下边距
padding : 1px 2px 3px 4px ;//边距值以顺时针方向显示,上、右、下、左

3、边框border简写

边框有三个属性

1
2
3
4
5
border-width: 1px 2px 3px 4px ; //上下左右,类似边距的简写
border-style: solid dashed dotted groove ;
border-color : red #ffffff ; 1
按照width、style和color的顺序简写
1 border: 1px solid #ffffff ;//个人喜欢总结为三字口诀“粗型色”

4、背景background简写

一共五个属性,background采用简写将大大提供效率

1
2
3
4
5
background-color : #ffffff || transparent ;
background-image : url () || none ;
background-repeat : repeat || repeat-x || repeat-y || no-repeat ;
background-position : X Y || ( top || bottom || center ) ( left || right || center );
background-attachment : scroll || fixed ;

background简写按顺序如下

1
background : #fff url (img.gif) no-repeat 0 0 ;//个人总结五字口诀“色图重定位”

background的属性有默认值,且不会继承,你可以只声明其中的一个,其它的值会被应用默认值。

1
background : transparent none repeat scroll top left ;

5、字体font简写

font有六个属性,采用简写的话比如简化代码提供效率,不过简写规则要求比较高,要注意

1
2
3
4
5
6
font-style : normal || italic || oblique ;
font-variant : normal || small-caps ;
font-weight : normal || bold || bolder || || lighter || ( 100 -900 );
font-size : 16px || 1em ;
line-height : normal || 16px ;
font-family : arial , sans-serif ;

bubuko.com,布布扣

上图可以看出font简写规则中font-size和font-famil是必写的,其他的四个属性可选,四个属性默认值都为normal,未声明属性则应用默认值。

1
font : italic normal bold 12px / 20px arial , sans-serif ;//个人惯用口绝“型转粗,大高体”

6、列表list-style简写

估计大家用得最多的一个列表属性是list-style:none;其实list-style也有三个属性

1
2
3
list-style-type : none || disc || circle || square || decimal || lower-alpha || upper-alpha || lower-roman || upper-roman
list-style-position inside || outside || inherit
list-style-image :  ( url ) || none || inherit

list-style的默认属性如下,三个都是可选属性,未声明则应用默认值,但是如果声明list-style-image则

list-style-type无效。

1
list-style : disc outside none ;

常用的CSS简写规则总结完毕,CSS3样式属性简写待总结中。



CSS属性简写汇总,布布扣,bubuko.com

CSS属性简写汇总

标签:style   http   color   使用   strong   os   

原文地址:http://my.oschina.net/u/1866405/blog/291247

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!