CSS Tekstopmaak
CSS biedt verschillende eigenschappen waarmee je tekst kunt stijlen. Je kunt de eigenschappen voor tekst gebruiken om vast te leggen op welke wijze de tekst in een element moet worden weergegeven. Bijvoorbeeld met of zonder decoratie, met extra ruimte tussen letters, verschillende kleuren, uitlijning, transformatie enz.De veelgebruikte tekst eigenschappen zijn: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing en meer. Deze eigenschappen geven je nauwkeurige controle over de visuele weergave van de tekens, woorden, spaties, enzovoort.
CSS Tekstkleur
De color eigenschap wordt gebruikt om de kleur van de tekst in te stellen. De kleur wordt bepaald door:
| Kleurnamen - zoals "red", "green", "blue", "transparent", enz. | |
| HEX-waarde - zoals "#ff0000", "#00ff00", enz. | |
| RGB-waarde - zoals "rgb(255, 0, 0)" |
De standaard tekstkleur voor een pagina wordt gedefinieerd in de body selector.
CSS Achtergrondkleur
De background-color eigenschap bepaalt de achtergrondkleur van een element. In het volgende voorbeeld maken we gebruik van zowel de eigenschap background-color als de eigenschap color.
Voorbeeld:
body {
background-color: purple;
color: white;
}
h1 {
background-color: green;
color: white;
}
div {
background-color: yellow;
color: black;
}
CSS Tekstuitlijning
De eigenschap text-align wordt gebruikt om de horizontale uitlijning van de tekst in te stellen. Tekst kan op vier manieren worden uitgelijnd: links, rechts, gecentreerd of uitgevuld dit betekent dat de inhoud van het element langs zowel de linker als de rechter marge wordt uitgelijnd.
Voorbeeld:
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
CSS text-align-last
De eigenschap text-align-last geeft aan hoe de laatste regel van een tekst moet worden uitgelijnd.
Voorbeeld:
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
CSS Tekstdecoratie
De text-decoration eigenschap bepaalt of de inhoud van het element op een speciale manier moet worden weergegeven. Deze eigenschap accepteert doorgaans een van de volgende waarden: overline, line-through, underline en overline underline.
Voorbeeld:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.voorbeeld {
text-decoration: overline underline;
}
 |
Vermijd onderstreepte tekst die geen link is, omdat dit de bezoeker in verwarring kan brengen. |
CSS Tekst transformatie
Met de text-transform eigenschap kun je bepalen of de tekst van een element in hoofd- of kleine letters moet worden weergegeven of dat de eerste letter van elk woord als hoofdletter gebruiken zonder de tekst te wijzigen.
Voorbeeld:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Inspringen van tekst
De eigenschap text-indent wordt gebruikt om de inspringing van de eerste regel tekst binnen een tekstblok in te stellen. Dit wordt meestal gedaan door de lege ruimte voor de eerste regel tekst in te voegen. Aan welke kant de tekst inspringt hangt af van de richting waarin de karakters worden weergegeven. De lengte van het inspringen kun je op verschillende manieren vastleggen bijvoorbeeld door percentages, pixels, ems, enz.
CSS letter-spacing
De letter-spacing eigenschap bepaalt of tussen de karakters in een tekst extra ruimte moet worden opgenomen boven de standaard tussenruimte. De extra ruimte kun je op verschillende manieren vastleggen bijvoorbeeld door pixels, ems en pt. Je kunt ook een negatieve waarde gebruiken voor de letter-spacing eigenschap. De ruimte tussen de letters wordt dan kleiner dan de standaard tussenruimte.
CSS word-spacing
De eigenschap word-spacing bepaalt of tussen woorden extra ruimte moet worden opgenomen boven de standaard tussenruimte. Aan deze eigenschap kan een waarde worden toegekend in pixels, ems, etc. een negatieve waarde kan worden gebruikt om de tussenruimte kleiner te maken dan de standaard tussenruimte. Laten we het volgende voorbeeld eens proberen zodat we begrijpen hoe deze eigenschap werkt.
CSS line-height
De eigenschap line-height wordt gebruikt om de ruimte tussen regels in te stellen. De waarde van deze eigenschap kan worden opgegeven in een getal, percentages, pixels, ems, enz.
|
Een getal geeft aan hoeveel maal de lettergrootte vermenigvuldigd moet worden om de afstand tussen de basislijnen te krijgen. |
