Summary of CSS Properties shorthand

In the process of writing CSS code, the number of code is very large, many properties will be reused, so to go back and forth to beat the same property name will take a lot of time. As a good web front-end person, you should understand the memory of various attributes of the shorthand way to improve their efficiency, reduce the number of code, enhance readability. As a novice who has just come into contact, the online collection of information, collation of the common attributes of the shorthand model for everyone to reference.

1. Color Shorthand

The color value is 16 binary, and each two bits of the same value, can be shortened by half.

1	color : #113366 ;

Shorthand for

1	color : #136 ;

2. Margin margin and padding shorthand

Margins margin and padding padding are very high in CSS, margin and padding have four-direction margins

1 2 3 4

padding-top : 2px ; padding-right : 2px ; padding-bottom : 2px ; padding-left : 2px ;

There are four shorthand methods that are very well remembered.

1 2 3 4

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

3, Border border shorthand

Border has three properties

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 shorthand

With a total of five attributes, the background uses shorthand to provide efficiency

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 abbreviated in order as follows

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

Background properties have default values and do not inherit, you can declare only one of them, and the other values will be applied by default.

1	background : transparent none repeat scroll top left ;

5. Font Shorthand

Font has six attributes, using shorthand words such as simplifying the code to provide efficiency, but the shorthand rules require relatively high, pay attention to

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 ;

You can see that font-size and font-famil are required in the font shorthand rules, the other four properties are optional, the default values for four properties are normal, and the default values are applied without declaring the attribute.

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

6, List List-style shorthand

It is estimated that one of the most Used list properties is list-style:none; in fact, List-style has three properties.

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

The default properties of List-style are as follows, three are optional, and default values are not declared, but if you declare list-style-image

List-style-type invalid.

1	list-style : disc outside none ;

The commonly used CSS shorthand rules are summarized, and the CSS3 style attributes are abbreviated to summarize.