CSS shorthand property's order

Question

As you know,we can use shorthand property in css. but i find the order of property values is important.

'border:1px red solid;' is equal to 'border: 1px solid red;'

---

but 'font:italic bold 12px/20px ' is not equal to ' font:italic 12px/20px bold;'

i read the manual carefully but can not find any cotent about the order of property values;

Answer 1

The relevance of order is defined on a per-property basis. For example, the description of the font shorthand uses the following syntax:

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'>
[ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box |
 small-caption | status-bar | inherit

This looks a bit messy, but the key to the metanotations used is in section 1.4.2 CSS property definitions. It says, among other things:

1. Several juxtaposed words mean that all of them must occur, in the given order.
2. A bar (|) separates two or more alternatives: exactly one of them must occur.
3. A double bar (||) separates two or more options: one or more of them must occur, in any order.

So we can read that font style, font variant, and font weight may appear in any order, and they are all omissible, but if present, they must precede font size and font family, which are both required and must appear in that order.

Luckily, most properties are simpler. Mostly the order of items in a value is not significant, due to a design that makes it possible to infer the role of an item from is format. And you don’t ever need the font shorthand: you can always write down the individual font properties instead.

Answer 2

Here is a nice cheat sheet to help you remember: http://www.land-of-web.com/freebies/css-shorthand-property-cheat-sheet.html