Ihr könnt Absätze oder Inhalte von Tabellenzellen durch die folgenden Eigenschaften euren Wünschen entsprechend ausrichten. Anwenden lassen sich diese Eigenschaften darüber hinaus aber auch auf alle sonstigen Elemente, denen eine definierte oder berechnete Höhe oder Breite zugewiesen werden kann.
Einrückung der ersten Zeile
Ein Beispiel:
.absatz { text-indent: 2em; }
Im Browser sieht das folgendermaßen aus:
Wenn ihr einen negativen Wert verwendet, gibt es eine Textausrückung in der ersten Fließtextzeile.
.absatz {
text-indent: -2em;
}
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Die Zeilenhöhe festlegen
<p style="line-height:1.4em; font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:2em;font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:1em; font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p>
p {
line-height: 150%;
}
Letztendlich hängt die gute Lesbarkeit aber vor allem von der Laufweite der Schrift ab. Hier gilt: Die Zeilenhöhe sollte umso größer sein, je länger die Textzeilen laufen. Testet daher unbedingt die Seite daraufhin, dass die Lesbarkeit tatsächlich gewahrt bleibt.
Horizontale Textausrichtung
<!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>
