De tekstkleur kan worden ingesteld met color. Hier wordt een kleurwaarde verwacht.
p {
color: red;
}Als waarde kun je kleurwoorden of een hexadecimale kleurwaarde opgeven.
De schrijfrichting instellen
Met de eigenschap direction kan de schrijfrichting van elementen worden afgedwongen. De omgekeerde schrijfrichting is interessant in verband met talen waarin van rechts naar links wordt geschreven.
Daarnaast kan hiermee worden bepaald aan welke kant grote inhoud wordt afgekapt bij overflow.
• ltr – van links naar rechts
• rtl – van rechts naar links
Het volgende voorbeeld laat zien hoe deze eigenschap kan worden gebruikt.
.normaal {direction:ltr;}
.omgekeerd {direction:rtl;}
Hier zijn twee klassen gedefinieerd.
<p class="normaal">Tekst die van links naar rechts wordt geschreven. 1 2 3 4 5 6 7 8 9 0</p> <p class="omgekeerd">Tekst die van rechts naar links wordt geschreven. 1 2 3 4 5 6 7 8 9 0</p>
Het resultaat in de browser ziet er als volgt uit:
De horizontale uitlijning van teksten
Met de eigenschap text-align wordt de horizontale uitlijning van tekst alinea's en andere tekststroom in blokelementen of inline-elementen ingesteld. De standaardinstelling is overigens een links uitlijning.
• left – links uitgelijnd
• right – rechts uitgelijnd
• center – gecentreerd
• justify – uitlijning als blokontwerp
Een voorbeeld:
<p style="text-align:right;"> Hartelijk welkom </p>
Het resultaat ziet er dan als volgt uit:
De verticale uitlijning
Met de eigenschap vertical-align wordt de verticale tekstuitlijning binnen een regel bepaald ten opzichte van de regelhoogte. De specificatie heeft altijd betrekking op het ouderlijk element, dat een inline-element moet zijn. Tekst in tabellen kan ook worden uitgelijnd.
De volgende waarden zijn beschikbaar:
• sub – lager gesteld
• super – hoger gesteld
• baseline – uitgelijnd op de basislijn
• top – uitlijning aan de bovenkant van het ouderlijk element
• bottom – uitgelijnd aan de onderkant van het ouderlijk element
• middle – uitgelijnd in het midden tussen de boven- en onderkant van het ouderlijk element
• text-top – op de bovenste tekstlijn
• text-bottom – op de onderste tekstlijn
• Lengteopgave – een positieve of negatieve waarde verplaatst het element boven of onder de basislijn.
• Percentageopgave – een positieve of negatieve waarde verplaatst het element boven of onder de basislijn.
Een voorbeeld:
.basislijn {
vertical-align: baseline;
}
Houd er rekening mee dat de waarden van vertical-align helaas zeer inconsistent worden geïnterpreteerd door verschillende browsers. Test de resultaten dus zeker voordat je de pagina's online plaatst.
De tekstdecoratie bepalen
text-decoration wordt gebruikt om tekst of hyperlinks aanvullende eigenschappen toe te kennen.
• none – geen tekstdecoratie
• underline – onderstreept
• overline – bovenstreept
• line-through – doorgehaald
• blink – knipperend
Ook hier een voorbeeld:
a:link {
text-decoration: none;
}
Dit zorgt ervoor dat de hyperlinks op de pagina niet langer onderstreept zijn.
De afstand tussen afzonderlijke woorden kan ook expliciet worden bepaald.
<span style="word-spacing:0.5em">Welkom bij PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Welkom bij PSD-Tutorials.de!</span>
Een numerieke waarde wordt verwacht. Procentuele waarden zijn echter niet mogelijk.
Vergelijkbaar met word-spacing is overigens letter-spacing. Met letter-spacing wordt echter de afstand tussen afzonderlijke letters van een tekst bepaald. Net als hier zijn numerieke waarden toegestaan, maar geen percentages.
<span style="letter-spacing:0.1em">Voorbeeldtekst met tekenafstand 0.1em</span><br> <span style="letter-spacing:0.3em">Voorbeeldtekst met tekenafstand 0.3em</span><br>
Met de eigenschap text-transform kun je bepalen of de tekst in hoofdletters of kleine letters wordt weergegeven. En dat onafhankelijk van de daadwerkelijke notatie in de brontekst. Bovendien kunnen kapitalen worden afgedwongen.
• lowercase – kleine letters
• uppercase – hoofdletters
• capitalize – woordinitialen als hoofdletters
• none – geen teksttransformatie
Voorbeeld:
.klein {
text-transform: lowercase;
}In de browser ziet het resultaat er zo uit:
Spaties en regelovergangen
Met de eigenschap white-space wordt bepaald hoe spaties en regelovergangen in de brontekst in de browser moeten worden weergegeven.
• normal – er wordt automatisch een regelovergang ingevoegd. Bovendien worden meerdere spaties samengevoegd.
• pre – Regelovergangen worden weergegeven zoals ze in de brontekst staan.
• nowrap – er vindt geen automatische regelovergang plaats.
• pre-line – meerdere spaties worden samengevoegd. Bovendien wordt er een overgang gemaakt als de doos voor de weergave niet groot genoeg is.
• pre-wrap – er wordt een overgang gemaakt als de doos voor de weergave niet groot genoeg is.
Ook hier een voorbeeld:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>In de browser ziet dit er als volgt uit:
Schaduw toepassen
Met de eigenschap text-shadow kun je een schaduw werpen op tekst. Let op dat deze eigenschap alleen wordt ondersteund in relatief recente browsers. Browsers die text-shadow niet kunnen interpreteren, tonen de tekst zonder schaduw.text-shadow wordt als volgt gebruikt:
text-shadow: hV vV blur #xxxxxx;
En de waarden betekenen het volgende:
• hV – Horizontaal verschoven
• vV – Verticaal verschoven
• blur – Vaagheid
• #xxxxxx – De schaduwkleur
Het volgende voorbeeld toont een typische toepassing voor text-shadow.
.schatten {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
De gedefinieerde klasse wordt hieronder toegepast op een kop van de eerste orde.
<h1 class="schatten">PSD-Tutorials.de</h1>
En hier ook een kijkje naar het resultaat:
Zoals reeds beschreven, kun je text-shadow probleemloos gebruiken, aangezien het ontbreken van interpretatie door de browsers geen negatieve gevolgen heeft. De tekst wordt dan gewoon zonder schaduw weergegeven.
