Verschiedene Selektoren für die Zuweisung von Stilen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen Selektoren verwenden, um bestimmten Teilen einer Website ihre eigenen Stildefinitionen zuzuweisen.

Lösung

Mit Hilfe spezieller Selektoren können Sie Stildefinitionen auch nur auf ganz bestimmte Teile einer Webseite anwenden (siehe die folgende Abbildung):

<html>
  <head>
    <title>CSS Kochbuch</title>
    <style type="text/css">
    <!--
      * {
          font-family: verdana, arial, sans-serif;
      }
      h1 {
        font-size: 120%;
      }
      #navigation {
        border: 1px solid black;
        padding: 40px;
      }
      li a {
        text-decoration: none;
      }
      p {
        font-size: 90%;
      }
    -->
    </style>
  </head>
  <body>
    <h1>Seitenüberschrift</h1>
    <p>Dies ist ein Beispielabsatz mit einem <a href="http://csscookbook.com">Link</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna <em class="warning">aliquam erat volutpat</em>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    <ul id="navigation">
      <li><a href="http://csscookbook.com">Äpfel</a></li>
      <li><a href="http://csscookbook.com">Bananen</a></li>
      <li><a href="http://csscookbook.com">Kirschen</a></li>
    </ul>
  </body>
</html>

Webseite mit CSS-Stildefinitionen

Abbildung: Webseite mit CSS-Stildefinitionen.

Diskussion

CSS bietet viele – manchmal ziemlich raffinierte – Möglichkeiten, um festzulegen, auf welche Seitenelemente die Stile angewandt werden sollen.

Um besser zu verstehen, wie die einzelnen Teile einer Webseite ausgewählt werden, müssen Sie verstehen, dass durch die Markierung der Inhalte mit HTML-Code eine Struktur entsteht. Obwohl die in HTML verwendeten Elemente auf den ersten Blick keine bestimmte Ordnung zu haben scheinen (siehe folgende Abbildung), gibt es eine festgelegte Ordnung.

Die in der Lösung verwendeten HTML-Elemente

Abbildung: Die in der Lösung verwendeten HTML-Elemente.

Zwar bleibt diese Struktur dem Besucher einer Seite meistens verborgen. Dennoch ist sie ein wesentlicher Teil des Darstellungsprozesses, den der Browser durchläuft.

Wenn der Browser eine Seite vom Server anfordert und mit ihrer Darstellung beginnt, sorgt die Software dafür, dass die verschiedenen Elemente der Seite in einer bestimmten Struktur organisiert werden. Auch wenn dieses »Ordnen« eher etwas mit der Programmierung zu tun hat, hätte eine gute visuelle Darstellung der Elemente starke Ähnlichkeit mit den oft in Firmen eingesetzten Organigrammen.

In der nächsten Abbildung sehen Sie, wie der HTML-Code als Diagramm dargestellt werden kann.

Die in der Seite verwendeten HTML-Elemente in einer hierarchischen Struktur

Abbildung: Die in der Seite verwendeten HTML-Elemente in einer hierarchischen Struktur.

  

  

<< 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