 |
Textpassagen optisch aufpeppen, für bessere Lesbarkeit sorgen, Aufmerksamkeit erzeugen: nichts, was man mit geschickt angewandten Absatz-Effekten nicht erreichen könnte.
Wir zeigen daher im Folgenden exemplarisch die Erstellung eines Absatz-Stylesheets. Für eigene Variationen können Sie den Code direkt übernehmen.
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. Sehen Sie sich dazu einmal diese Abbildung an:
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. Mehr dazu finden Sie im Artikel XML-Tutorial IV: Style Sheets.
Der Beispiel-Code
Nebenstehendes Bild wurde von diesem Code erzeugt:
<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>
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
