Textfärgen kan ställas in med färg. En färgvärde förväntas.
p {
color: red;
}Ni kan ange färgord eller en hexadecimal färgkod som värde.
Ställa in skrivriktningen
Genom egenskapen direction kan skrivriktningen i element tvingas. Den motsatta skrivriktningen är intressant i samband med språk där skrivs från höger till vänster.
Det är också möjligt att definiera var på sidan stora innehåll beskärs med overflow.
• ltr – från vänster till höger
• rtl – från höger till vänster
Följande exempel visar hur egenskapen kan användas.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Här definierades två klasser.
<p class="normal">Text skriven från vänster till höger. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Text skriven från höger till vänster. 1 2 3 4 5 6 7 8 9 0</p>
Resultatet ser ut så här i webbläsaren:
Texters horisontella alignment
Med egenskapen text-align bestäms den horisontella justeringen av stycken text och andra flytande texter eller inline-element som finns i blockelement. Standardinställningen är förresten vänsterjustering.
• left – vänsterjustering
• right – högerjustering
• center – centrerad
• justify – justera som block
Ett exempel:
<p style="text-align:right;">
Välkommen
</p>
Resultatet ser ut så här:
Vertikal justering
Med egenskapen vertical-align bestäms den vertikala textjusteringen inom en rad med avseende på radhöjden. Angivelsen hänför sig alltid till det föräldraelementet som måste vara ett inline-element. Dessutom kan text justeras i tabeller.
Följande värden finns tillgängliga:
• sub – nedsänkt
• super – upphöjd
• baseline – justerad längs baslinjen
• top – justering längst upp på föräldraelementet
• bottom – justerad längst ner på föräldraelementet
• middle – justerad mitt emellan toppen och botten på föräldraelementet
• text-top – vid övre textkanten
• text-bottom – vid nedre textkanten
• Längdangivelse – ett positivt eller negativt värde flyttar elementet över eller under baslinjen.
• Procentangivelse – ett positivt eller negativt värde flyttar elementet över eller under baslinjen.
Ett exempel:
.baseline {
vertical-align: baseline;
}
Tänk på att värdena av vertical-align tyvärr tolkas väldigt ojämnt av olika webbläsare. Ni bör definitivt testa resultaten innan ni publicerar sidorna online.
Bestäm textdekoration
text-decoration används för att tilldela texter eller hyperlänkar extra egenskaper.
• none – ingen textdekoration
• underline – understruken
• overline – överstruken
• line-through – genomstruken
• blink – blinkande
Ett exempel:
a:link {
text-decoration: none;
}
På så sätt kommer inte sidans hyperlänkar längre att vara understrukna.
Avståndet mellan enskilda ord kan också bestämmas explicit.
<span style="word-spacing:0.5em">Välkommen till PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Välkommen till PSD-Tutorials.de!</span>
Ett numeriskt värde förväntas. Procentuella angivelser är inte möjliga.
Liknande egenskap som word-spacing är förresten letter-spacing. Dock bestämmer man med letter-spacing avståndet mellan de enskilda bokstäverna i en text. Här tillåts numeriska värden, men inte procentangivelser.
<span style="letter-spacing:0.1em">Exempeltext med teckenavstånd 0.1em</span><br> <span style="letter-spacing:0.3em">Exempeltext med teckenavstånd 0.3em</span><br>
Med egenskapen text-transform kan ni ange om texten ska vara versaler eller gemener. Det går även att tvinga fram kapitäler.
• lowercase – gemener
• uppercase – versaler
• capitalize – initialiserad
• none – ingen texttransformation
Exempel:
.liten {
text-transform: lowercase;
}I webbläsaren ser resultatet ut såhär:
Mellanslag och radbrytningar
Med egenskapen white-space kan du ange hur mellanslag och radbrytningar som finns i källkoden ska visas i webbläsaren.
• normal – en automatisk radbrytning infogas. Dessutom slås flera mellanslag ihop till ett.
• pre – radbrytningar visas så som de finns i källkoden.
• nowrap – ingen automatis radyteckning sker.
• pre-line – flera mellanslag slås ihop till ett. Dessutom sker en radbrytning om visningsrutan inte är tillräckligt stor.
• pre-wrap – en radbrytning sker om visningsrutan inte är tillräckligt stor.
Här följer ett exempel:
<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 webbläsaren ser det ut såhär:
Implementera skugga
Med egenskapen text-shadow kan du tvinga fram en skugga för text. Observera att denna egenskap endast stöds av relativt moderna webbläsare. Webbläsare som inte kan tolka text-shadow kommer att visa texten utan skugga.text-shadow används på följande sätt:
text-shadow: hV vV blur #xxxxxx;
Och detta betyder värdena:
• hV – Horisontell förflyttning
• vV – Vertikal förflyttning
• blur – Ospegling
• #xxxxxx – Skuggans färg
Följande exempel visar en typisk tillämpning av text-shadow.
.skugga {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Klassen appliceras sedan på en första ordningens rubrik.
<h1 class="skugga">PSD-Tutorials.de</h1>
Och även här är en titt på resultatet:
Som redan beskrivet kan du använda text-shadow utan problem, eftersom att webbläsare som inte tolkar det inte har några negativa effekter. Texten visas då helt enkelt utan skugga.
