von Alexander Dilthey
Textpassagen optisch aufpeppen, für bessere Lesbarkeit sorgen, Aufmerksamkeit erzeugen – nichts, was man mit geschickt angewandten Absatz-Effekten nicht erreichen könnte.
Das Block-Modell
Für Absätze sollten Sie grundsätzlich p-Tags verwenden: damit geben Sie Ihrem Code einerseits eine semantische Bedeutung, andererseits erzeugen Sie dadurch aber auch ein Block-Verhalten.
Das Blockmodell
Ein Absatz ist also, CSS-technisch gesehen, eine Art dreischichtiger Kasten. Alle in der Abbildung benannten Bereiche können Sie mit CSS verändern oder deaktivieren, indem Sie die entsprechenden Attribute auf 0px setzen.
Padding
In unserem Beispiel wollen wir den Innenabstand auf 15px setzen. Das erzeugt eine recht ausgewogene Darstellung von Inhalt und Rahmen.
Margin
Den Außenabstand verändern wir zunächst einmal nicht. Nur wäre es schön, wenn unser Absatz etwas eingerückt erscheinen würde. Folglich weisen wir dem Attribut margin-left den Wert 30px zu.
Border
Welche Möglichkeiten der Rahmen-Gestaltung es gibt, können Sie im Artikel Rahmen-Effekte nachlesen. Hier entscheiden wir uns für einen dunkelblauen, durchgezogenen Rahmen – das wirkt seriös und beruhigend. Außerdem harmoniert es gut mit der Hintergrundfarbe, die wir unserem Absatz später noch zuweisen werden.
Schriftgröße
Um die optische Abgrenzung zu umgebenden Elementen noch zu erhöhen, wollen wir, dass die Schriftgröße etwas kleiner ist als die der anderen Seiten-Teile. Eine relative Größenangabe, smaller, ist hier praktisch, weil so auch bei einer Änderung der äußeren Elemente das Verhältnis erhalten bleibt.
Hintergrundfarbe
Passend zum dunkelblauen Rahmen wählen wir einen helleren Blauton als Hintergrundfarbe: #b7b4f5.
Inital erzeugen
Und um unserem Beispiel noch den letzten Schliff zu verleihen, wollen wir den ersten Buchstaben des Absatzes einrücken und in großer, weißer Schrift darstellen.
Interessant ist hierbei lediglich die Methode, mit der wir den ersten Buchstaben zur Formatierung auswählen. Wir verwenden dazu einen speziellen Identifier: p.quote:first-child:first-letter.
Das Endergebnis
Der Quellcode für das Beispiel:
<html>
<head>
<style>
p {font-family: Verdana;}
p.quote {
width: 300px;
border-style: solid;
border-color: #333399;
border-width: 3px;
padding: 15px;
margin-left: 30px;
font-size: smaller;
background: #b7b4f5;
}
p.quote:first-child:first-letter {
color: white;
font-size: 30pt;
margin-left: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero et accumsan et iusto</p>
<p class="quote">odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
</p>
<p>quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.</p>
</body>
</html>
