|
Verschillende CSS-eigenschappen kunnen ingekort worden tot één algemene eigenschap waaraan je verschillende waarden kunt toekennen:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;
font-variant: normal;
wordt
font: 1em/1.5em bold italic serif;
Opgelet
Voorwaarde om deze shorthand techniek te gebruiken is dat je font-size en font-family gebruikt, anders zal de regel niet worden toegepast.
Wens je geen gebruik te maken van font-weight, font-style, enzovoort zullen deze waarden altijd naar normal worden gezet, tenzij in je browser andere standaardinstellingen aanwezig zijn.
Achtergrond
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
wordt
background: #fff url(image.gif) no-repeat top left;
Voorwaarde om deze shorthand techniek te gebruiken is dat je background-color en background-image gebruikt, anders zal deze regel niet worden toegepast.
Tip
Let ook dat je geen dubbele aanhalingstekens gebruikt bij de afbeelding. Oudere browsers kunnen deze regel anders niet interpreteren.
Lijsten
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif);
wordt
list-style: disc outside url(image.gif);
Marges
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;
wordt
margin: 2px 1px 3px 4px; /*top, right, bottom, left*/
Met identieke waarden rechts en links:
margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;
wordt
margin: 5em 1em 3em; /*top, right & left, bottom*/
Met identieke waarden boven en beneden, rechts en links:
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;
wordt
margin: 5% 1%; /*top & bottom, right & left*/
>
Met 0-waarden aan alle marges:
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
wordt
margin: 0; /*top & bottom & right & left*/
Dezelfde regels geldt ook voor padding en border.
Randen
border-width: 1px;
border-color: black;
border-style: solid;
wordt
border: 1px black solid;
Deze shorthand techniek werkt ook met border-right, border-left, ...
Tip
De originele informatie over de shorthand properties vind je op www.dustindiaz.com/css-shorthand.
|
Ontwerp je site