CSS common attribute abbreviations and full write comparisons

"Font"

Shorthand:

Font:italic small-caps Bold 12px/1.5em Arial,verdana;

is equivalent to:

Font-style:italic;

Font-variant:small-caps;

Font-weight:bold;

font-size:12px;

Line-height:1.5em;

Font-family:arial,verdana;

Order: Font-style | Font-variant | Font-weight | Font-size | Line-height | Font-family

(Note: When abbreviated, Font-size and line-height can only be made by slashes/compose a value and cannot be written separately)

"Background"

Shorthand:

Background: #fff URL (bg.gif) no-repeat fixed left top;

is equivalent to:

Background-color: #fff; Background-image:url (bg.gif); background-repeat:no-repeat;background-attachment:fixed; Background-position:left top;

Order: Background-color | Background-image | Background-repeat | background-attachment | Background-position

"Margin & padding"

Shorthand:

margin:1px 0 2em-20px;

is equivalent to:

margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;

Order: Margin-top | Margin-right | Margin-bottom | Margin-left

(Note: Padding's shorthand and margin are exactly the same)

"Border"

Shorthand:

border:1px solid #000;

is equivalent to:

Border-width:1px;border-style:solid;border-color: #000;

Order: Border-width | Border-style | Border-color

(Note: These three sentences are shorthand, equal to the four sides of the style of the same)

"Border-top/border-right/border-bottom/border-left"

Shorthand:

border-top:1px solid #000;

is equivalent to:

Border-top-width:1px;border-top-style:solid;border-top-color: #000;

(Note: These three sentences are shorthand, equal to the four sides of the style of the same)

"List-style"

Shorthand:

List-style:square outside URL (bullet.gif);

is equivalent to:

List-style-type:square;list-style-position:outside;list-style-image:url (bullet.gif);

Order: List-style-type | list-style-position | List-style-image

Quadrilateral

The abbreviations for the four sides are generally as follows:

padding:1px 2px 3px 4px;

is equivalent to:

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

Order: Top | Right | Bottom | Left

(Note: Whether the border width, or border color, margin, etc., as long as the CSS style involves four sides, the order is all "upper right Left" clockwise direction)

If the value of four edges is omitted, write only three:

padding:1px 2px 3px;

is equivalent to:

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

(Note: The omitted "left" value equals "right")

If the value of four edges is omitted two:

PADDING:1PX 2px;

is equivalent to:

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

(Note: The omitted "bottom" value equals "top")

If there is only one value:

padding:1px;

is equivalent to:

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

Color

Short of color:

Color: #FFF

is equivalent to:

Color: #FFFFFF or Color:white

Shorthand:

Color: #06c

is equivalent to:

Color: #0066cc