Du kan justera avsnitt eller innehållet i tabellceller efter dina önskemål med följande egenskaper. Dessa egenskaper kan också appliceras på alla andra element där höjd eller bredd är definierad eller beräknad.
Inryckning av första raden
Det börjar med egenskapen text-indent. Ange hur den första raden i ett avsnitt ska indragas. Det är också möjligt med en "utdragning" åt vänster genom att använda ett negativt värde för text-indent. (Mer utförlig information om när en extrem utdragning kan vara meningsfull följer nedan). Ett numeriskt värde förväntas.
Ett exempel:
.avsnitt { text-indent: 2em; }
I webbläsaren ser det ut på följande sätt:
Om du använder ett negativt värde skapar det en textutdragnining i den första raden med löpande text.
.avsnitt {
text-indent: -2em;
}
Och här är själva resultatet i webbläsaren:
Sådana saker är också möjliga. Men var noga med att innehållet fortfarande är läsbart när det önskas. Faktum är att text-indent också kan vara intressant i samband med sökmotoroptimering. Ibland vill man hellre visa grafik istället för text.
Men om texten ändå ska vara tillgänglig för sökmotorer står man inför ett dilemma. Det dilemmat kan lösas genom att använda text-indent. Denna egenskap gör det möjligt för er att flytta texter, och kan således göra texter osynliga för besökarens synfält.
Fördelen med text-indent-alternativet är att texten som ska ersättas med en bild finns oförändrad i källkoden.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Genom denna syntax tilldelas elementet h1 en bakgrundsbild. (Egenskapen background har redan introducerats i denna serie). Med text-indent: -99999px flyttas rubrikens text 99999 pixlar åt vänster. Således är texten inte synlig. Endast bilden visas nu faktiskt.
Om du inaktiverar stylesheetet visas texten som vanligt igen.
Ställa in radhöjden
Jag har redan nämnt radhöjden i samband med den allmänna egenskapen font. Här behandlas ämnet något mer ingående. Att definiera radhöjden i samband med teckenstorlek (font-size) är intressant.
Radhöjden kan anges med egenskapen line-height. Numeriska värden är tillåtna. Procentuella värden är också möjliga. Dessa refererar då till elementets teckenstorlek för vilket radhöjden angetts. Observera följande innan definiering av radhöjden: Det kan hända att en webbläsare/enhet prioriterar radhöjdsangivelsen framför andra egenskaper och därmed beskär element om de är högre. Det kan vara irriterande särskilt med grafik. Testa resultaten innan du publicerar sidan.
Följande exempel visar hur line-height kan användas.
<p style="line-height:1.4em; font-size:1em;">Ibland har du skapat en fantastisk layout, men bilderna saknas fortfarande, och om du bara använder tomma ramar ser layouten ganska naken ut. Det finns bättre alternativ:<br /> I den här videoträningen visar jag er de bästa webbadresserna för att snabbt få tag i passande bildplatshållare gratis. En genial lista hittar ni t.ex. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">här</a>.</p> <p style="line-height:2em;font-size:1em;">Ibland har du skapat en fantastisk layout, men bilderna saknas fortfarande, och om du bara använder tomma ramar ser layouten ganska naken ut. Det finns bättre alternativ:<br /> I den här videoträningen visar jag er de bästa webbadresserna för att snabbt få tag i passande bildplatshållare gratis. En genial lista hittar ni t.ex. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">här</a>.</p> <p style="line-height:1em; font-size:1em;">Ibland har du skapat en fantastisk layout, men bilderna saknas fortfarande, och om du bara använder tomma ramar ser layouten ganska naken ut. Det finns bättre alternativ:<br /> I den här videoträningen visar jag er de bästa webbadresserna för att snabbt få tag i passande bildplatshållare gratis. En genial lista hittar ni t.ex. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">här</a>.</p>
Här har tre stycken textavsnitt definierats, som vardera tilldelats olika radhöjder.
Som ni ser kan läsbarheten av löptexter påverkas mycket starkt genom radhöjden. Var därför försiktig med line-height.
Så frågan uppstår naturligtvis vilken radhöjd man faktiskt bör välja. Vanligtvis använder man sig av radhöjder mellan 130 och 150 procent.
p {
line-height: 150%;
}
Slutligen beror god läsbarhet framför allt på bredden av texten. Här gäller: Radhöjden bör vara större ju längre texten löper. Testa därför absolut att säkerställa att läsbarheten verkligen bevaras.
Horisontell textjustering
Genom egenskapen text-align ställs den horisontella justeringen för textavsnitt och andra löptexter eller inlinjelement som finns i blockelement. Följande värden kan anges för text-align:
• left – vänsterjustering
• right – högerjustering
• center – centrerad
• justify – justera som utflytning
Också här återigen ett exempel:
<!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>Och så här ser resultatet ut i webbläsaren:
Obs! Att text-align inte bara påverkar textinnehållet. Egenskapen gäller faktiskt för alla inlinjelement. Så om en bild inkluderas, gäller text-align-definitionen också för detta element.
En notering till: text-align ska enligt den officiella CSS-specifikationen inte påverka blockelement. (Även om det definitivt finns webbläsare som även tillämpar det på blockelement). Om ni vill justera blockelement, använd i dessa fall de redan presenterade margin-egenskaperna.
