Wie inzwischen bekannt ist, wird die Gestaltung von Webseiten in CSS erledigt. CSS (Cascading Style Sheets / gestufte Gestaltungsbögen) ist eine Gestaltungssprache um HTML-Dokumente ansprechend aussehen zu lassen und somit eine der Kernsprachen in den weiten des Internets (World Wide Web).
Im Beitrag Teil 3: Figuren gestalten mit CSS wurde in den Kommentaren die Frage gestellt, welche Bedeutung der Stern (*) bzw. die Kombination Größer Stern (>*) – auch Pfeil Stern genannt – in CSS hat. Das soll hier kurz erläutert werden.
Der einfache Stern (*) spricht alle Elemente und alle untergeordneten Ebenen an und dient somit als Universalselector. Als Beispiel soll dieser kurze Code dienen:
<body>
<section id="one">
<p>Teil 1: Das ist ein Fülltext</p>
</section>
<section id="two">
<h2>Teil 2: Das ist ein Fülltext</h2>
</section>
<section id="three">
<div>
<p>Teil 3: Das ist ein Fülltext</p>
</div>
</section>
</body>
Wenn nun also alle section angesprochen werden sollen, kann das über section {padding:15px}passieren. Wenn ich nun aber alle darin liegenden Tags, wie p, h2 oder div, angesprochen werden sollen, dann geht das über
section {padding:15px}
p {padding:15px}
h2 {padding:15px}
div {padding:15px}
div p {padding:15px}
Alternativ kann aber auch
body * {padding:15px}
Ein Haken hat diese Schreibweise nun aber. Denn es haben ALLE Tags 15px Innenabstand. Auch das p im div im section#three. Dieses p soll aber vielleicht gar keinen Innenabstand bekommen? Hier kommt der Größer Stern (>*) zum Einsatz.
section > * {padding:15px}
Mit dieser einfachen CSS-Anweisung wird nur den Tags in der nächsten Ebene unter der section ein Innenabstand von 15px gegeben. Das p in section#three ist davon ausgeschlossen, da es noch eine Ebene tiefer liegt.
Eine gute Übersicht über den Einsatz von CSS beinhaltet die dazugehörige Seite bei Wikipedia.
