Content opmaken met :first-line
Soms wordt in een boek de eerste regel van een nieuw hoofdstuk gedrukt in een afwijkend lettertype. Je ziet dat vaak in oude boeken.
Ook op deze pagina is dat het geval. De letters zijn wat groter en vet gedrukt. De eerste regel staat ook in Small Caps. Daarbij wordt alleen gebruik gemaakt van hoofdletters. Hoofdletters en kleine letters verschillen alleen van elkaar in grootte.
Op deze bladzijde wordt besproken hoe je dit doet.
- De code bestaat uit een CSS-class met de naam 'eersteRegel' waar de pseudo-class :first-line aan is gekoppeld, zie onderaan deze bladzijde.
- De eerste paragraaf heeft de class 'eersteRegel', waardoor (alléén) de eerste regel van de paragraaf anders wordt opgemaakt.
- Aan de class 'eersteRegel' is de pseudo-class first-line toegevoegd. Je herkent een pseudo-class aan de dubbele punt die er voor staat.
- Er mag geen spatie staan tussen de naam van de class en de pseudo-class.
- Om het effect van :first-line goed te beoordelen, kun je de breedte van het browser-window flink kleiner maken.
(voor deze website: minder dan 800 pixels).
- Als je meer dan één paragraaf met afwijkende opmaak wilt laten beginnen, geef je die extra paragrafen gewoon de class + pseudo-class eersteRegel mee.
- Toepassing van :first-line is niet beperkt tot <p>-tags. Het werkt bij alle HTML-elementen waarmee je blokken tekst kunt weergeven.
- Zoals je zie werkt het ook met lijst-elementen <li> (binnen een ordered of een unordered list <ol> resp. <ul>).
- Op deze bladzijde is het effect niet fraai, dus let er wel goed op dat het effect de verdere opmaak van je pagina geen geweld
aan doet.
- Het is eigenlijk een kwestie van een beetje spelen met font-family, font-size, line-height en color om tot een goed resultaat te komen.
Het is mogelijk om de pseudo-class :first-line te combineren met :first-letter.
Dat doe je door aan het tekstblok (in dit geval een paragraaf) zowel de classes eersteRegel en eerste mee te geven:
<p class="eersteRegel eerste">De pseudo-class first-letter wordt besproken in het item Content opmaken met :first-letter.
Gebruik:
- De code staat in de <HEAD>.
- Referenties aan de class staan in de <BODY>, in de tags waar de nodig zijn.
De code van de class eersteRegel ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
.eersteRegel:first-line { font-variant:small-caps; font-size:120%;
font-weight:bold }
</style>
Opmerkingen:
- De paragrafen met een anders opgemaakte beginregel hebben de class 'eersteRegel', waaraan een pseudo-class is toegevoegd. Dat is gedaan om onderscheid mogelijk te maken met de andere paragrafen in de tekst.
- Het is ook mogelijk om de pseudo-class direct aan een element (bijvoorbeeld een paragraph <p>) te koppelen:
P:first-line { ... (enz.) }
