Wednesday, August 26, 2009

Shorthand

* We can use shorthand methods to write our CSS styles more quickly and also make them easier for editing, for example:
LONGHAND
padding-left:100px;
padding-right:90px;
padding-top:80px;
padding-bottom:70px;
SHORTHAND VERSION 1
padding:80px 90px 70px 100px;
(The order goes clockwise from the top)
SHORTHAND VERSION 2
padding:80px 90px;
(The order is top/bottom, right/left)
* The exact same principle works for margins.
* The basic principle also works for border but is a little more difficult.
VERSION 1:
border-left-width:10px;
border-right-width:20px; (1 rule per side)
VERSION 2:
border-width:10px; (1 rule for all sides)
VERSION 3:
border-width:10px 20px 30px 40px; (top/right/bottom/left)
VERSION 4:
border-width:10px 20px; (top/bottom, right/left)
* The above principle can be applied to border-style and border-color.

No comments:

Post a Comment