CSS tut - Deel 2

CSS Shorthands

Verder met de tutorial over CSS! Deze keer behandel ik shorthands. Het is even wat theorie, maar stamp het in je hoofd en je zult er nooit spijt van krijgen. Shorthands moet je zien als een soort steno voor CSS. In plaats van elk attribuut specifiek op te geven, doe je er een aantal in één keer.

Fonts
Font attributen, uitgebreide vorm:
[red]p {
font-family: verdana;
font-size: 12px;
line-height: 18px;
font-weight: bold;
font-style: italic;
}[/red]

Font shorthand:
[red]p {
font: italic bold 12px/18px verdana;
}[/red]

Bij de font shorthand hou je deze volgorde aan: style weight size line-height family
De shorthand moet minstens bevatten: size - family
De fontkleur kun je helaas niet in een shorthand verwerken. Die geef je apart op met 'color'.

Er is wel een korte schrijfwijze voor kleur. Ik werk altijd hexadecimaal, dus met waarden van 0 tm F. Hexadecimaal mag je op twee manieren opgeven: #FF0000 (format RRGGBB), of #f00. De korte schrijfwijze doe ik altijd lowercase, voor het overzicht. Met de lange schrijfwijze heb je meer kleurcombinaties, maar bijvoorbeeld gewoon blauw (#0000FF) schrijf je sneller als #00f.

Border attributen, uitgebreide vorm:
[red]p {
border-color: #f00;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}[/red]

Border shorthand:
[red]p {
border: 1px solid #f00;
}[/red]

Bij de border shorthand hou je deze volgorde aan: width - style - color

Padding & Margin

Uitgebreide vorm (werkt ook voor margin):
[red]p {
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}[/red]

Padding shorthand:
Kan op een aantal manieren:

- 1 getal:
padding: 3px;
Geldt voor alle kanten, boven, rechts, onder en links
- 2 getallen:
padding: 3px 5px;
Het eerste getal geldt voor boven en onder, het tweede voor rechts en links
- 3 getallen:
gebruik ik nooit want ik kan de volgorde niet onthouden ;-)
- 4 getallen:
padding: 3px 5px 7px 9px;
met de klok mee: boven rechts onder links

Uitgebreide vorm
[red]p {
background-color: #fff;
background-image: url(bg.jpg);
background-position: left;
background-position: top;
background-repeat: repeat;
background-attachment: fixed;
}[/red]

Image shorthand
[red]p {
background: #fff url(bg.jpg) left top repeat fixed;
}[/red]

Volgorde voor de shorthand: color - image - horizontal position - vertical position - repeat - fixed

Dit overzicht geeft een redelijk volledig beeld van de mogelijkheden. Het duurt een tijdje voor je alles uit je hoofd kent. Het is nogal veel om te onthouden, maar mijns inziens zeker de moeite waard. Ga het volgend voorbeeld eens na:

[red]p {
font: 12px verdana;
padding: 3px;
margin: 3px 0px;
background: #fff url(bg.jpg) center top repeat-x;
border: 1px dotted #ddd;
}[/red]

Als je al deze attributen zonder shorthands zou moeten noteren wordt je code een heel stuk langer!

1) Combineer tags met een komma:

[red]p, input, li, textarea, select, option {
font: 12px verdana;
}[/red]

2) Gebruik een spatie om elementen binnenin een ander element te stylen:
[red]#container p {
color: #f00;
}[/red]
betekent dat alle <p> elementen in de div met id="container" rood worden.

Let op: een komma is echt een scheidingteken! Dit:
[red]#container p, span {
color: #f00;
}[/red]

betekent NIET alle <p> en <span> elementen binnen div met id="container". Dat moet zo:
[red]#container p, #container span {
color: #f00;
}[/red]

3) Combineer classes in je HTML. Stel sommige spans moet rood worden en andere vet en weer andere rood èn vet.
Dan doe je:

[red].red {
color: #f00;
}

.bold {
font-weight: bold;
}[/red]

En dan kun je dit doen voor rood: <span class="red">
dit voor vet: <span class="bold">
en dit voor rood en vet: <span class="red bold">

Volgende keer ga ik floats behandelen en een crossbrowser liquid lay-out maken met een header, een footer en een sidebar. Liquid houdt in dat de lay-out geen vaste breedte heeft, maar afhangt van de breedte van het browservenster.

Een voorproefje van zo'n lay-out kun je hier zien: link naar voorbeeld

Tot ziens en happy CSS-ing.

Jan Koehoorn