| Enkel element |
| Notering | element_1 {CSS-eigenschap:waarde; ...} |
| Voorbeeld | h1 {font-family:Arial,sans-serif;} |
| Conditie | Als h1 dan {...} |
| Opmerking | Basisvorm |
| | |
| Gegroepeerde elementen |
| Notering | element_1,element_2 {CSS-eigenschap:waarde; ...} |
| Voorbeeld | h1,i {...} |
| Conditie | Als h1 of i dan {...} |
| Opmerking | Elementen gescheiden door komma's |
| | |
| Gerelateerde elementen |
| Notering | element_1 element_2 {CSS-eigenschap:waarde; ...} |
| Voorbeeld_1 | h1 i { color:green; font-style:oblique; } |
| Conditie | Als i binnen h1 voorkomt, dan {...} |
| Opmerking | Inherit (overerving) Spatie tussen element_1 en _2 |
| | |
| Notering | element_1 > element_2 {CSS-eigenschap:waarde; ...} |
| Voorbeeld_2 | h1 > i {...} |
| Conditie | Alleen als element_2, 1 level onder element_1 ligt in de structuur |
| Opmerking | Met > |
| | |
| Notering | element_1 * element_2 {CSS-eigenschap:waarde; ...} |
| Voorbeeld_3 | h1 * i {...} |
| Conditie | Alleen als element_2, minstens 2 levels onder element_1 ligt in de structuur |
| Opmerking | Met * |
| | |
| Notering | element_1 + element_2 {CSS-eigenschap:waarde; ...} |
| Voorbeeld_4 | h1 + i {...} |
| Conditie | Indien element_2 op hetzelfde level ligt als element_1 en er onmiddellijk op volgt |
| Opmerking | Met + |
| | |
| Elementen met attributen |
| Notering | element[attribuut_naam]{CSS-eigenschap:waarde; ...} |
| Voorbeeld | a[href=index.htm] >>> <a href="index.htm">...</a> |
| Notering | element[attribuut_naam=attribuut_waarde]{CSS-eigenschap:waarde; ...} |
| Voorbeeld | p[align=center] {color:yellow; text-align:right; } |
| Notering | element[attribuut_naam~=attribuut_waarde]{CSS-eigenschap:waarde; ...} |
| Voorbeeld | td[abbr~=Edam] {background-color:#ffff00 }
<td abbr="Info mbt Edam">Inhoud mbt Edam</td> |
| Conditie | elementen zijn bvb: a, p, img, * (alle elementen)
attribuut_namen zijn bvb: -href- of -align-
attribuut_waarde is bvb -center- |
| Opmerking | Voorbeelden zouden verhelderend werken :-) |
| | |
| Class |
| Notering | .achtergrond {CSS-eigenschap:waarde; ...} |
| Voorbeeld | class="achtergrond". Als in <p class="achtergrond">...</p> |
| Conditie | Selector. |
| Opmerking_1 | Met een . |
| Notering | *.achtergrond {CSS-eigenschap:waarde; ...} (* staat voor alle elementen) |
| Opmerking_2 | Met *. |
| Voorbeeld | H1.achtergrond {CSS-eigenschap:waarde; ...} |
| Opmerking_2 | H1.achtergrond (alleen bij H1) |
| | |
| Individuele eigenschap |
| Notering | #naam {CSS-eigenschap:waarde; ...} |
| Voorbeeld | id="naam". Als in <element id="naam">...</element>
of als in: <div id="naam">...</div> |
| Conditie | id |
| Opmerking | Kan niet als class, voor meerdere elementen gebruikt worden. |
| | |
| Pseudo-class en de volgorde! |
| Notering | a:link {CSS-eigenschap:waarde; ...} /* nog niet bezocht */ |
| Notering | a:visited {CSS-eigenschap:waarde; ...} /* wel bezocht */ |
| Notering | a:hover {CSS-eigenschap:waarde; ...} /* link bij MouseOver */ |
| Notering | a:active {CSS-eigenschap:waarde; ...} /* geclickt */ |
| Notering | a:focus {CSS-eigenschap:waarde; ...} /* link met focus */ |
| | |
| Pseudo-element |
| Notering | element:first-line {...} /* de eerste regel */ |
| Notering | element:first-letter {...} /* de eerste letter */ |
| Notering | element:before { content:waarde; } /* vóór het element invoegen */ |
| Notering | element:after { content:waarde; } /* ná het element invoegen */ |
| | |
| Direct formateren |
| Notering | <element style="CSS-eigenschap:waarde; ...">...</element> |
| Conditie | Een HTML-element zoals p of table of blockquote |
Home