Skriftfargen kan settes med color. Forventer en fargeverdi.
p {
color: red;
}Som verdi kan du angi fargenavn eller en heksadesimal fargeverdi.
Sette skriveretningen
Med egenskapen direction kan skriveretningen for elementer tvinges. Den motsatte skriveretningen er interessant i forbindelse med språk der det skrives fra høyre mot venstre.
I tillegg kan det bestemmes herfra hvor på en side store innhold skal avkortes med overflow.
• ltr – fra venstre mot høyre
• rtl – fra høyre mot venstre
Følgende eksempel viser hvordan egenskapen kan brukes.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Her er to klasser definert.
<p class="normal">Tekst som skrives fra venstre mot høyre. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Tekst som skrives fra høyre mot venstre. 1 2 3 4 5 6 7 8 9 0</p>
Resultatet i nettleseren ser slik ut:
Horisontal tekstjustering
Med egenskapen text-align justeres den horisontale utligningen av tekstavsnitt og annen flytende tekst eller inline-elementer som er inneholdt i blokkelementer. Standardinnstillingen er forresten venstrejustering.
• left – venstrejustering
• right – høyrejustering
• center – sentrert
• justify – høyre- og venstreutlignet
Et eksempel:
<p style="text-align:right;">
Velkommen
</p>
Resultatet ser slik ut:
Vertikal utligning
Med egenskapen vertical-align bestemmes den vertikale tekstutligningen innenfor en linje med hensyn til linjehøyden. Angivelsen refererer alltid til foreldreelementet, som må være et inline-element. Tekst kan også utjevnes innenfor tabeller.
Følgende verdier er tilgjengelige:
• sub – senket
• super – hevet
• baseline – justert med bunnen av linjen
• top – utjevnet med toppen av foreldreelementet
• bottom – utjevnet med bunnen av foreldreelementet
• middle – justert midt mellom toppen og bunnen av foreldreelementet
• text-top – ved øvre tekstkant
• text-bottom – ved nedre tekstkant
• Lengdeangivelse – en positiv eller negativ verdi flytter elementet over eller under baselinjen.
• Prosentangivelse – en positiv eller negativ verdi flytter elementet over eller under baselinjen.
Et eksempel:
.baseline {
vertical-align: baseline;
}
Merk at verdiene for vertical-align dessverre tolkes forskjellig av ulike nettlesere. Dere bør definitivt teste resultatene før siden publiseres.
Bestemme tekstdekorasjonen
text-decoration brukes til å tildele ekstra egenskaper til tekst eller lenker.
• none – ingen tekstdekorasjon
• underline – understreket
• overline – overstreket
• line-through – gjennomstrekning
• blink – blinkende
Her er et eksempel:
a:link {
text-decoration: none;
}
Dette gjør at sidens lenker ikke lenger har en understrek.
Avstanden mellom enkeltord kan også bestemmes eksplisitt.
<span style="word-spacing:0.5em">Velkommen til PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Velkommen til PSD-Tutorials.de!</span>
Forventer et numerisk verdi. Prosentangivelser er imidlertid ikke tillatt.
Lignende til word-spacing er letter-spacing. Gjennom letter-spacing bestemmer man avstanden mellom enkelte bokstaver i en tekst. Også her tillates numeriske verdier, men ikke prosentandeler.
<span style="letter-spacing:0.1em">Eksempeltekst med bokstavavstand 0.1em</span><br> <span style="letter-spacing:0.3em">Eksempeltekst med bokstavavstand 0.3em</span><br>
Med egenskapen text-transform kan du bestemme om teksten skal skrives med store eller små bokstaver. Dette kan gjøres uavhengig av den faktiske notasjonen i kildekoden. I tillegg kan kapitéler tvinges frem.
• lowercase – små bokstaver
• uppercase – store bokstaver
• capitalize – store bokstaver i ordene
• none – ingen teksttransformasjon
Eksempel:
.liten {
text-transform: lowercase;
}I nettleseren ser resultatet slik ut:
Mellomrom og linjeskift
Med egenskapen white-space bestemmes det hvordan mellomrom og linjeskift som finnes i kildekoden skal vises i nettleseren.
• normal – det settes inn automatisk linjeskift. I tillegg slås flere mellomrom sammen til ett.
• pre – linjeskift vises slik de står i kildekoden.
• nowrap – det settes ikke inn automatisk linjeskift.
• pre-line – flere mellomrom slås sammen til ett. I tillegg skjer det et linjeskift dersom boksen for visning ikke er stor nok.
• pre-wrap – det skjer et linjeskift dersom boksen for 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 nettleseren ser dette slik ut:
Gjennomføre skyggeeffekter
Ved hjelp av egenskapen text-shadow kan man tvinge frem en skyggeeffekt for tekster. Vær oppmerksom på at denne egenskapen bare støttes av relativt nye nettlesere. Nettlesere som ikke kan tolke text-shadow vil vise teksten uten skygge.text-shadow brukes på følgende måte:
text-shadow: hV vV blur #xxxxxx;
Og dette betyr verdiene:
• hV – Horisontal forskyvning
• vV – Vertikal forskyvning
• blur – Uskarphet
• #xxxxxx – Skyggefargen
Følgende eksempel viser en typisk anvendelse av text-shadow.
.skygge {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Den definerte klassen brukes deretter på en overskrift av første orden.
<h1 class="skygge">PSD-Tutorials.de</h1>
Og her er et blikk på resultatet:
Som allerede beskrevet, kan du bruke text-shadow problemfritt, da mangel på tolkning i nettleserne ikke har negative konsekvenser. Teksten vil da bare vises uten skygge.
