Tag: shorthand

Margin & padding

/* top, right, bottom, left */
.ex1 { margin: 0 0 0 0; }
/* top, right & left, bottom */
.ex2 { margin: 0 10px 0; }
/* top bottom, left right */
.ex3 { margin: 0px 10px }
/* top left right bottom */
.ex4 { margin: 0; }

Font

Opgelet: als je shorthand gerbuikt, worden alle ‘niet gebruikte’ paramters op ‘normal’ gezet

/* font-style, font-variant, font-weight, font-size, line-height, font-family [sans serif, serif] */
/* font-family uses "" when font-name is more than one word */
body{ font: italic, small-caps, normal, 12px/14px "Times New Roman", serif; }
/* in onderstaand voorbeeld verliest h1, ... 'bold' font-weight */
body{ font: 1.4em Verdana;}

Border

Minimum style & color definiëren. Bij shorthand is 3px de ‘normal’ value

/* volledige shorthand */
.border{ border: 1px solid red;}
/* ok */
.border { border: solid red;}
/* fout */
.border { border: red;}

Lists

/* list-style-image, list-style-position, list-style-type */
.list { lists: disc outside none; }

Background

/*
  background-color: color || #hex || (rgb / % || 0-255);
  background-image:url(URI);
  background-repeat: repeat || repeat-x || repeat-y || no-repeat;
  background-position: X Y || (top||bottom||center) (left||right||center);
  background-attachment: scroll || fixed;
*/
background: #fff url(image.jpg) no-repeat 10px 100px fixed;