Skip to main content

CSS-Gliederungsstile

Die CSS-Gliederungseigenschaft ist eine verwirrende Eigenschaft. Wenn Sie zum ersten Mal etwas darüber erfahren, ist es schwer zu verstehen, wie es sich sogar von der Grenzeigenschaft entfernt unterscheidet. Das W3C erklärt die folgenden Unterschiede:

  • Umrisse brauchen keinen Platz.
  • Umrisse können nicht rechteckig sein.

Umrisse nehmen keinen Platz ein

Diese Aussage an und für sich ist verwirrend. Wie kann ein Objekt auf Ihrer Webseite keinen Platz auf der Webseite beanspruchen? Wenn Sie sich Ihre Webseite jedoch wie eine Zwiebel vorstellen, kann jedes Element auf der Seite über einem anderen Element angeordnet werden. Die Gliederungseigenschaft beansprucht keinen Platz, da sie immer auf der Box des Elements platziert wird.

Wenn eine Gliederung um ein Element platziert wird, hat dies keinen Einfluss darauf, wie dieses Element auf der Seite angeordnet ist. Die Größe oder Position des Elements wird nicht geändert. Wenn Sie einem Element eine Gliederung hinzufügen, nimmt es genauso viel Platz in Anspruch, als hätten Sie keine Gliederung für dieses Element. Dies trifft nicht auf eine Grenze zu. Ein Rand an einem Element wird zur äußeren Breite und Höhe des Elements hinzugefügt. Wenn Sie also ein Bild mit einer Breite von 50 Pixeln und einem Rand von 2 Pixeln hätten, würde dies 54 Pixel (2 Pixel pro Seitenrand) beanspruchen. Dasselbe Bild mit einer 2-Pixel-Kontur würde auf Ihrer Seite nur 50 Pixel Breite beanspruchen. Die Kontur würde über dem äußeren Rand des Bildes angezeigt.

Umrisse können nicht rechteckig sein

Bevor Sie anfangen zu denken "cool, jetzt kann ich Kreise zeichnen", denken Sie noch einmal. Diese Aussage hat eine andere Bedeutung als Sie vielleicht denken. Wenn Sie ein Element mit einem Rahmen versehen, interpretiert der Browser das Element als eine riesige rechteckige Box. Wenn die Box über mehrere Zeilen aufgeteilt wird, lässt der Browser die Kanten offen, da die Box nicht geschlossen ist. Es ist, als würde der Browser die Grenze mit einem unendlich breiten Bildschirm sehen - breit genug, dass diese Grenze ein zusammenhängendes Rechteck ist.

Die Gliederungseigenschaft berücksichtigt dagegen Kanten. Wenn ein umrissenes Element mehrere Zeilen umfasst, wird die Umrisse am Ende der Zeile geschlossen und in der nächsten Zeile erneut geöffnet. Wenn möglich, bleibt der Umriss auch vollständig verbunden und erzeugt eine nicht rechteckige Form.

Verwendung der Gliederungseigenschaft

Eine der besten Anwendungen der Gliederungseigenschaft ist das Hervorheben von Suchbegriffen. Viele Websites verwenden dazu eine Hintergrundfarbe. Sie können jedoch auch die Gliederungseigenschaft verwenden und sich nicht darum kümmern, zusätzlichen Abstand auf Ihren Seiten hinzuzufügen.

Die Eigenschaft für die Umrissfarbe akzeptiert den Begriff "invertieren", wodurch die Umrissfarbe zum aktuellen Hintergrund umgekehrt wird. Auf diese Weise können Sie Elemente auf dynamischen Webseiten hervorheben, ohne zu wissen, welche Farben verwendet werden.

Sie können die Gliederungseigenschaft auch verwenden, um die gepunktete Linie um aktive Links zu entfernen. Dieser Artikel von CSS-Tricks zeigt, wie man die gepunktete Kontur entfernt.