Main menu

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}
verwendet werden. Nun haben alle Tags im body 15px Innenabstand. Das klingt verständlich?

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.

Wenn Sie Fragen zu CSS haben, kontaktieren Sie uns doch einfach. Wir helfen immer, wo wir können. Sie haben ein interessantes Webdesign Projekt, bei dessen Umsetzung Sie Hilfe benötigen? Auch dafür sind wir immer zu sprechen.

Jetzt unverbindlich anfragen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kontakt

mm|creative - Mediengestaltung
Weingartener Str. 9a
67361 Freisbach

Tel: 06344 - 969065

Sie erreichen uns täglich von Uhr bis Uhr am besten telefonisch oder per Mail.

61 queries in 0.000 seconds, using 20.66MB memory