Ganze Absätze einrücken
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Sie wollen einen ganzen Absatz einrücken und so den Absatz in der folgenden Abbildung in denjenigen aus der übernächsten Abbildung umwandeln.
Abbildung: Die Absätze in der Standarddarstellung des Browsers.
Abbildung: Eingerückte Absätze.
Lösung
Verwenden Sie Klassenselektoren, um den gewünschten Effekt zu erzielen:
p.normal {
padding: 0;
margin-left: 0;
margin-right: 0;
}
p.large {
margin-left: 33%;
margin-right: 5%;
}
p.medium {
margin-left: 15%;
margin-right: 33%;
}Danach versehen Sie den Markup-Code mit den nötigen Attributen:
<p class="normal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna al iquam erat volutpat.</p>
<p class="large">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>
<p class="medium">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium</p>Diskussion
Anhand von Klassenselektoren können Sie HTML-Elemente auswählen, die das passende class-Attribut haben. Der Unterschied zwischen Klassen- und Typselektoren besteht darin, dass Typselektoren jede Instanz eines HTML-Elements auswählen. In den folgenden zwei CSS-Regeln wird im ersten Fall ein Typselektor verwendet, der sämtliche als h2 markierte Elemente findet und rot darstellt, während im zweiten Fall ein Klassenselektor dafür sorgt, dass alle entsprechend markierten Elemente mit einem linken Innenabstand von 33% versehen werden:
h2 {
color: red;
}
.largeIndent {
padding-left: 33%;
}Durch die Kombination von Typ- und Klassenselektoren für ein Element erhält dieses eine höhere Spezifität gegenüber anderen Elementen. Im folgenden Markup-Code wird das dritte Element rot und mit einem linken Innenabstand von 33% dargestellt:
<h2>Dieses Element ist rot.</h2>
<h3 class="largeIndent">Dieses Element wurde recht weit eingerückt.</h3>
<h2 class="largeIndent">Dieses Element ist rot und eingerückt.</h2>Statt durch Klassenselektoren hätten Sie die Einrückung auch durch Außenabstände und die Definition von Selektoren für benachbarte Geschwisterelemente erreichen können:
p, p+p+p+p {
padding: 0;
margin-left: 0;
margin-right: 0;
}
p+p, p+p+p+p+p {
margin-left: 33%;
margin-right: 5%;
}
p+p+p, p+p+p+p+p+p {
margin-left: 15%;
margin-right: 33%;
}Diese Methode verwendet Selektoren für benachbarte Geschwisterelemente, die durch zwei oder mehr reguläre Selektoren dargestellt werden, die durch Pluszeichen voneinander getrennt werden. So kann mit dem Selektor h2+p ein Absatz ausgewählt werden, der unmittelbar auf ein h2-Element folgt.
In diesem Rezept sollen Absätze in der Reihenfolge mit Stildefinitionen versehen werden, in der sie auf dem Bildschirm erscheinen. So wählt die Formulierung p+p einen Absatz aus, der direkt auf einen anderen Absatz folgt. Sobald es allerdings mehr als zwei Absätze gibt, wird auch der dritte Absatz (und alle folgenden Absätze) mit den gleichen Stilen versehen wie der zweite. Das liegt daran, dass der dritte Absatz ebenfalls direkt auf einen Absatz folgt und so weiter.
Um die Stildefinitionen für den zweiten und dritten Absatz zu unterscheiden, können Sie eine weitere Regel schreiben, die drei aufeinanderfolgende Absätze auswählt:
p+p+p {
margin-left: 15%;
margin-right: 33%;
}Diese CSS-Regeln können Sie nun gruppieren. Anstatt für den dritten und den sechsten Absatz eigene Regeln zu definieren, brauchen Sie die Selektoren nur durch ein Komma und ein Leerzeichen voneinander zu trennen:
p+p+p, p+p+p+p+p+p {
margin-left: 15%;
margin-right: 33%;
}Das Hauptproblem bei der Verwendung von Selektoren für benachbarte Geschwisterelemente besteht in der mangelhaften Unterstützung durch Internet Explorer für Windows (alle Versionen). Bei diesen Browsern werden die Absätze daher nicht eingerückt dargestellt. Die folgenden Browser unterstützen die Verwendung von Selektoren für benachbarte Geschwisterelemente: Safari, Firefox, Netscape Navigator 6+ und Opera 5+.
Siehe auch
Die CSS 2.1-Spezifikation zum Thema Klassenselektoren sowie die CSS 2.1-Spezifikation zum Thema Selektoren für benachbarte Geschwisterelemente.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln