Du kan justere afsnit eller indholdet af tabelceller i henhold til dine ønsker ved hjælp af følgende egenskaber. Disse egenskaber kan også anvendes på alle andre elementer, der har tildelt en defineret eller beregnet højde eller bredde.
Indrykning af første linje
Lad os starte med egenskaben text-indent. Her kan du definere, hvordan den første linje i et afsnit skal indrykkes. En "udrykning" til venstre er også mulig ved at bruge en negativ værdi for text-indent. (Udvidede oplysninger om, hvornår en ekstrem udrykning kan være hensigtsmæssig, følger senere). En numerisk værdi forventes.
Et eksempel:
.afsæt { text-indent: 2em; }
Sådan ser det ud i browsere:
Hvis du bruger en negativ værdi, vil teksten rykke ud i den første linje af flydende tekst.
.afsætte {
text-indent: -2em;
}
Og selvfølgelig her er resultatet i browseren:
Det er også muligt. Men vær opmærksom på, når du definerer udrykninger, at indholdet stadig skal være læsbart, når det er ønsket. Faktisk kan text-indent også blive interessant i forhold til emnet søgemaskineoptimering. Nogle gange vil man foretrække at vise billeder i stedet for tekst.
Men hvis teksten stadig skal være tilgængelig for søgemaskiner, står man først over for en dilemma. Dette dilemma kan løses ved brug af text-indent. Denne egenskab giver jer mulighed for at flytte tekster, så I kan fjerne tekster fra besøgendes synsfelt.
Fordele ved text-indent-varianten: Teksten, der skal erstattes af et billede, forbliver uændret i kildekoden.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Ved denne syntaks tildeles baggrundsbilledet til elementet h1. (Egenskaben background blev allerede introduceret i denne serie). Med text-indent: -99999px flyttes overskriftens tekst 99999 pixels mod venstre. Teksten er altså ikke synlig længere. Nu vises kun billedet.
Hvis du deaktiverer stylesheetet, vises teksten imidlertid normalt igen.
Indstil linjehøjden
Jeg nævnte allerede linjehøjden i forbindelse med den generelle font-egenskab. Nu vil jeg gå lidt mere i dybden med dette emne. Definering af linjehøjden i forbindelse med skriftstørrelsen (font-size) kan være interessant.
Linjehøjden kan defineres ved hjælp af egenskaben line-height. Numeriske værdier er tilladte. Procentværdier er også mulige. Disse refererer derefter til elementets skriftstørrelse, for hvilket linjehøjden er angivet. Inden du definerer linjehøjden, skal du også være opmærksom på følgende: Det kan ske, at en browser/enhed prioriterer angivelsen af linjehøjden frem for andre egenskaber og viser elementer afskåret, når de er højere. Dette kan være irriterende, især med billeder. Test derfor resultaterne, før du offentliggør siden.
Følgende eksempel viser, hvordan line-height kan bruges.
<p style="line-height:1.4em; font-size:1em;">Nogle gange har man oprettet et godt layout, men der mangler stadig fotos, og hvis man kun bruger tomme rammer, ser layoutet ret nøgent ud. Der er en bedre måde:<br/> I denne video-guide viser jeg jer de bedste webadresser for at få gratis passende billede pladsholdere hurtigt. I en genial liste kan du f.eks. finde det <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">her</a>.</p> <p style="line-height:2em; font-size:1em;">Nogle gange har man oprettet et godt layout, men der mangler stadig fotos, og hvis man kun bruger tomme rammer, ser layoutet ret nøgent ud. Der er en bedre måde:<br/> I denne video-guide viser jeg jer de bedste webadresser for at få gratis passende billede pladsholdere hurtigt. I en genial liste kan du f.eks. finde det <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">her</a>.</p> <p style="line-height:1em; font-size:1em;">Nogle gange har man oprettet et godt layout, men der mangler stadig fotos, og hvis man kun bruger tomme rammer, ser layoutet ret nøgent ud. Der er en bedre måde:<br/> I denne video-guide viser jeg jer de bedste webadresser for at få gratis passende billede pladsholdere hurtigt. I en genial liste kan du f.eks. finde det <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">her</a>.</p>
Her blev defineret tre tekstafsnit, hvor der blev tildelt forskellige linjehøjder til hver.
Som I kan se, kan læsbarheden af løbende tekst meget stærkt påvirkes af linjehøjden. Så vær forsigtig med line-height.
Det rejser naturligvis spørgsmålet, hvilken linjehøjde man egentlig bør vælge. Normalt anvendes linjehøjder mellem 130 og 150 procent.
p {
line-height: 150%;
}
Den gode læsbarhed afhænger dog især af skriftens bredde. Her gælder: Linjehøjden bør være desto større, jo længere tekstlinjer løber. Sørg derfor absolut for at teste siden for at sikre, at læsbarheden rent faktisk opretholdes.
Vandret tekstjustering
Ved egenskaben text-align bestemmes den vandret justering af tekstafsnit og andre flydende tekster eller inline-elementer indeholdt i blok-elementer. De følgende værdier kan anvendes til text-align:
• left – venstrejustering
• right – højrejustering
• center – centreret
• justify – justeres i blokformat
Her er endnu et eksempel:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>Og sådan ser resultatet ud i browseren:
Bemærk, at text-align ikke kun gælder for tekstindhold. Egenskaben gælder faktisk for alle inline-elementer. Så hvis et billede indlæses, gælder text-align-definitionen også for dette element.
En note: text-align bør – i det mindste ifølge den officielle CSS-specifikation – ikke påvirke blok-elementer. (Selvom der helt sikkert er browsere, der også anvender det på blok-elementer). Hvis I vil justere blok-elementer, så brug i disse tilfælde de allerede præsenterede margin-egenskaber.
