Skriftfarven kan angives via farve. Forventet er en farveværdi.
p {
farve: rød;
}Der kan angives farveord eller en hexadecimal farveværdi som værdi.
Angiv skriveretningen
Med egenskaben retning kan skriveretningen tvinges for elementer. Interessant er den omvendte skriveretning i sammenhæng med sprog, der skrives fra højre mod venstre.
Derudover kan det bestemmes, hvilken side hvor store indhold afskæres med overflow.
• ltr – fra venstre mod højre
• rlt – fra højre mod venstre
Følgende eksempel viser, hvordan egenskaben kan anvendes.
.normal {retning: ltr;}
.rueckwaerts {retning: rtl;}
Her er to klasser defineret.
<p class="normal">Tekst, der skrives fra venstre mod højre. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Tekst, der skrives fra højre mod venstre. 1 2 3 4 5 6 7 8 9 0</p>
Resultatet ser i browseren sådan ud:
Horisontal tekstjustering
Med egenskaben tekst-justering bestemmes den horisontale justering af tekstafsnit og andet flydende tekst eller inline-elementer, der er indeholdt i blokelementer. Standardindstilling er venstrejustering.
• venstre – venstrejustering
• højre – højrejustering
• center – centreret
• justified – justeret til blokjustering
Et eksempel:
<p style="tekst-justering: højre;">
Velkommen
</p>
Resultatet ser således ud:
Vertikal justering
Med egenskaben vertikal-justering bestemmes den vertikale tekstjustering inden for en linje i forhold til linjehøjden. Angivelsen refererer altid til forælderlementet, der skal være et inline-element. Derudover kan tekst justeres indeni tabeller.
Følgende værdier er tilgængelige:
• sub – sænket
• super – hævet
• grundlinje – justeret ved baselinjen
• top – justering i toppen af forælderlementet
• bund – justeret i bunden af forælderetementet
• midt – justeret midt mellem top og bund af forælderlementet
• tekst-top – ved øverst på teksten
• tekst-bund – ved nederst på teksten
• Længdeangivelse – et positivt eller negativt tal flytter elementet over eller under baselinjen.
• Procentangivelse – et positivt eller negativt tal flytter elementet over eller under baselinjen.
Et eksempel:
.grundlinje {
vertikal-justering: grundlinje;
}
Bemærk, at værdierne for vertikal-justering desværre tolkes meget uensartet af de forskellige browsere. I bør derfor absolut teste resultaterne, inden I uploader siderne online.
Bestem tekstdekorationen
tekst-dekoration bruges til at tildele tekst eller hyperlinks yderligere egenskaber.
• ingen – ingen tekstdekoration
• understregning – understreget
• overstregning – overstregning
• gennemstrygning – gennemstreget
• blink – blinkende
Også her et eksempel:
a:link {
tekst-dekoration: ingen;
}
Derved får linksene på siden ikke længere et understregning.
Afstanden mellem de enkelte ord kan også bestemmes eksplicit.
<span style="ordspacing:0.5em">Velkommen til PSD-Tutorials.de!</span><br /> <span style="ordspacing:1em">Velkommen til PSD-Tutorials.de!</span>
Der forventes et numerisk værdi. Procentværdier er derimod ikke tilladt.
Lignende til ordspacing er tegnspacing. Dog bestemmes afstanden mellem de enkelte bogstaver i en tekst via tegnspacing. Også her tillades numeriske værdier, men ingen procentværdier.
<span style="tegnspacing:0.1em">Eksempeltekst med tegnafstand 0.1em</span><br> <span style="tegnspacing:0.3em">Eksempeltekst med tegnafstand 0.3em</span><br>
Med egenskaben tekst-transformation kan I afgøre, om teksten skal skrives med småt eller stort. Og det uafhængigt af den faktiske notation i kildekoden. Derudover kan kapitælder tvinges igennem.
• småt til stort – små bogstaver
• stort til småt – store bogstaver
• kapitalisere – begyndelsesbogstaver som store bogstaver
• ingen – ingen teksttransformation
Eksempel:
.lille {
text-transform: lowercase;
}I browseren ser resultatet således ud:
Mellemrum og linjeskift
Med egenskaben white-space fastlægges det, hvordan mellemrum og linjeskift i kildeteksten skal vises i browseren.
• normal – der indsættes en automatisk linjeskift. Desuden kombineres flere mellemrum til ét.
• pre – linjeskift vises som de står i kildeteksten.
• nowrap – der sker ingen automatisk linjeskift.
• pre-line – flere mellemrum kombineres til ét. Der sker desuden et linjeskift, hvis boksen til visning ikke er stor nok.
• pre-wrap – der sker et linjeskift, hvis boksen til visning ikke er stor nok.
Her er et eksempel:
<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>I browseren ser det således ud:
Skygge implementering
Med egenskaben text-shadow kan man tvinge skyggeskrift på tekst. Bemærk, at denne egenskab kun er understøttet i relativt nye browsere. De browsere, der ikke kan fortolke text-shadow viser skriften uden skygge.text-shadow bruges på følgende måde:
text-shadow: hV vV blur #xxxxxx;
Og disse værdier betyder:
• hV – Horisontal forskydning
• vV – Vertikal forskydning
• blur – Uskarphed
• #xxxxxx – Skyggefarve
Følgende eksempel viser en typisk anvendelse af text-shadow.
.skygge {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Den definerede klasse anvendes herefter på en overskrift af første orden.
<h1 class="skygge">PSD-Tutorials.de</h1>
Og her er et kig på resultatet:
Som allerede beskrevet, kan I problemfrit anvende text-shadow, da browsers ufortolkning ingen negative konsekvenser har. Teksten vil bare blive vist uden skygge.
