Freigeben über

Cascading Stylesheet-Referenz

  • Artikel

Webautoren können mit Cascading Stylesheets das Aussehen von Dokumenten erheblich steuern.

Übersichten und Lernprogramme

Die folgenden Themen enthalten übersichtliche Informationen darüber, wie Sie Regeln für Cascading Stylesheets erstellen und sie auf einzelne Elemente in einer HTML-Seite anwenden können:

  • Grundlegendes zur Auswahl   Die grundlegenden Bausteine eines Cascading Stylesheets sind seine Stilregeln. Um den Stil von Elementen einer HTML-Seite zu ändern, werden diese mit Selektoren ausgewählt. Ohne Selektoren gäbe es keine Möglichkeit festzulegen, wie die Regeln angewendet werden sollten. Dieses Thema gibt eine Einführung in die Grundlage der Cascading Stylesheet-Deklarationssyntax und beschreibt, wie Selektoren verwendet werden.

  • Verweis auf Längeneinheiten   In diesem Abschnitt werden die unterstützten Längeneinheiten für Cascading Stylesheets festgelegt.

  • Positionieren von Elementen   Die meisten modernen Browser können HTML-Elemente an x- und y-Koordinaten positionieren und können Elemente in Ebenen auf der z-Achse überlappen lassen, die sich in einem Webdokument in Richtung des Viewers und von diesem weg erstrecken. Wenn Sie diese Möglichkeiten nutzen, können Sie Elemente, Bilder, Steuerelemente oder Text präzise positionieren. Durch die Verwendung von Skripts zur Manipulation der Positionskoordinaten und anderer dynamischer Stile können Sie Elemente auf einer Seite bewegen und Animationseffekte erzeugen. Durch die Kombination aus dynamischen Stilen, Positionierung und transparenten Bildern erhalten Sie eine große Palette an Animationsoptionen.

  • Farben   Es gibt zwei Möglichkeiten, um Farben auf HMTL-Seiten anzugeben: über den Namen oder mit einem RGB-Wert.

  • Maßsystem- und Speicherorteigenschaften im Quirks-Modus   Dynamic HTML (DHTML) macht Abmessungs- und Positionierungseigenschaften verfügbar, mit denen Sie auf Webseiten die Größe und Position von HTML-Elementen ändern können. Wenn Sie diese Eigenschaften kennen und wissen, wie sie sich auf Elemente einer Seite auswirken, können Sie das Aussehen Ihrer Webseiten besser steuern. Sie können mit diesen Eigenschaften z. B. Seiten gestalten, die Dokumenten in anderen Anwendungen wie Microsoft Office PowerPoint oder Microsoft Office Word ähnlich sind.

Eigenschaften

Dieser Abschnitt enthält Referenzthemen für unterstützte CSS-Eigenschaften. Eine Kategorienliste von CSS-Eigenschaften finden Sie unter Eigenschaften nach Kategorie.

  • background   Legt bis zu fünf separate Hintergrundeigenschaften des Objekts fest.

  • background-attachment   Legt fest, wie das Hintergrundbild innerhalb des Dokuments an das Objekt angefügt ist.

  • background-color   Legt die Farbe hinter dem Inhalt des Objekts fest.

  • background-image   Legt das Hintergrundbild des Objekts fest.

  • background-position   Legt die Position des Objekthintergrunds fest.

  • background-repeat   Legt fest, wie die Eigenschaft background-image des Objekts unterteilt ist.

  • border   Legt die Eigenschaften der Rahmenlinien für das Objekt fest.

  • border-collapse   Legt fest, ob die Rahmenlinien der Zeilen und Zellen in einer Tabelle zu einer einfachen Rahmenlinie zusammengefasst oder wie beim HTML-Standardcode getrennt dargestellt werden.

  • border-color   Legt die Rahmenfarbe des Objekts fest.

  • border-style   Legt die Art der oberen, rechten, unteren und linken Rahmenlinie des Objekts fest.

  • border-left   Legt die Eigenschaften der oberen Rahmenlinie des Objekts fest.

  • border-bottom-color   Legt die Farbe der unteren Rahmenlinie des Objekts fest.

  • border-left-color   Legt die Farbe der linken Rahmenlinie des Objekts fest.

  • border-right-color   Legt die Farbe der rechten Rahmenlinie des Objekts fest.

  • border-top-color   Legt die Farbe der oberen Rahmenlinie des Objekts fest.

  • border-bottom-style   Legt die Art der unteren Rahmenlinie des Objekts fest.

  • border-left-style   Legt die Art der linken Rahmenlinie des Objekts fest.

  • border-right-style   Legt die Art der rechten Rahmenlinie des Objekts fest.

  • border-top-style   Legt die Art der oberen Rahmenlinie des Objekts fest.

  • border-bottom-width   Legt die Breite der unteren Rahmenlinie des Objekts fest.

  • border-left-width   Legt die Breite der linken Rahmenlinie des Objekts fest.

  • border-right-width   Legt die Breite der rechten Rahmenlinie des Objekts fest.

  • border-top-width   Legt die Breite der oberen Rahmenlinie des Objekts fest.

  • border-width   Legt die Breite der oberen, rechten, unteren und linken Rahmenlinie des Objekts fest.

  • bottom   Legt die untere Position des Objekts relativ zum unteren Rand des nächsten positionierten Objekts in der Dokumentenhierarchie fest.

  • clear   Legt fest, ob für das Objekt unverankerte Objekte auf der linken und/oder rechten Seite zulässig sind, so dass das nächste Objekt nach den unverankerten Objekten angezeigt wird.

  • Clip   Legt fest, welcher Teil eines positionierten Objekts sichtbar ist.

  • Farbe   Legt die Farbe des Texts für das Objekt fest.

  • cursor   Legt fest, wie sich der Mauszeiger verändert, wenn er über ein Objekt bewegt wird.

  • direction   Legt die Leserichtung des Objekts fest.

  • display   Legt fest, ob das Objekt gerendert wird.

  • font   Legt eine Kombination separater Schriftarteigenschaften des Objekts fest. Legt alternativ eine oder mehrere von sechs Schriftarten der Benutzereinstellung fest oder ruft diese ab.

  • font-family   Legt den Namen der für den Text im Objekt verwendeten Schriftart fest.

  • font-size   Legt den für Text in dem Objekt verwendeten Schriftgrad fest.

  • font-style   Legt den Schriftschnitt des Objekts als "Kursiv", "Normal" oder "Schräg" fest.

  • font-variant   Legt fest, ob der Text des Objekts in Kapitälchen dargestellt wird.

  • font-weight   Legt die Schriftbreite des Texts für das Objekt fest.

  • Höhe   Legt die Höhe des Objekts fest.

  • left   Legt die Position des Objekts relativ zum linken Rand des nächsten positionierten Objekts in der Dokumentenhierarchie fest.

  • letter-spacing   Legt den zusätzlichen Abstand zwischen Buchstaben im Objekt fest.

  • line-height   Legt den Abstand zwischen Zeilen im Objekt fest.

  • list-style   Legt bis zu drei separate "list-style"-Eigenschaften des Objekts fest.

  • list-style-image   Legt einen Wert fest, der angibt, welches Bild als "list-item"-Marker für das Objekt verwendet werden soll.

  • list-style-position   Legt eine Variable fest, die angibt, wie der "list-item"-Marker relativ zum Inhalt des Objekts gezeichnet wird.

  • list-style-type   Legt den vordefinierten Typ des "list-item"-Markers für das Objekt fest.

  • margin   Legt die Breite des oberen, rechten, unteren und linken Rands des Objekts fest.

  • margin-bottom   Legt die Breite des unteren Rands des Objekts fest.

  • margin-left   Legt die Breite des linken Rands des Objekts fest.

  • margin-right   Legt die Breite des rechten Rands des Objekts fest.

  • margin-top   Legt die Breite des oberen Rands des Objekts fest.

  • max-height   Legt die maximale Höhe eines Elements fest.

  • max-width   Legt die maximale Breite eines Elements fest.

  • min-height   Legt die Mindesthöhe eines Elements fest.

  • min-width   Legt die Mindestbreite eines Elements fest.

  • overflow   Legt fest, wie der Inhalt des Objekts behandelt werden soll, wenn dieser die Höhe oder Breite des Objekts überschreitet.

  • Innenabstand   Legt den Abstand zwischen dem Objekt und seinem Rand oder, falls ein Rahmen vorhanden ist, zwischen dem Objekt und seinen Rahmenlinien fest.

  • padding-bottom   Legt den Abstand zwischen der unteren Rahmenlinie und dem Inhalt des Objekts fest.

  • padding-left   Legt den Abstand zwischen der linken Rahmenlinie und dem Inhalt des Objekts fest.

  • padding-right   Legt den Abstand zwischen der rechten Rahmenlinie und dem Inhalt des Objekts fest.

  • padding-top   Legt den Abstand zwischen der oberen Rahmenlinie und dem Inhalt des Objekts fest.

  • page-break-after   Legt fest, ob nach dem Objekt ein Seitenumbruch eingefügt wird.

  • page-break-before   Legt fest, ob vor dem Objekt ein Seitenumbruch eingefügt wird.

  • Position   Legt die Art der Positionierung des Objekts fest.

  • right   Legt die Position des Objekts relativ zum rechten Rand des nächsten positionierten Objekts in der Dokumentenhierarchie fest.

  • table-layout   Legt über eine Zeichenfolge fest, ob es sich um ein festes Tabellenlayout handelt.

  • text-align   Legt fest, ob der Text im Objekt links, rechts, zentriert oder im Blocksatz ausgerichtet wird.

  • text-decoration   Legt fest, ob der Text im Objekt blinkt oder durchgestrichen, überstrichen oder unterstrichen ist.

  • text-indent   Legt den Einzug der ersten Textzeile im Objekt fest.

  • text-transform   Legt das Rendering des Texts im Objekt fest.

  • Anfang   Legt die Position des Objekts relativ zum oberen Rand des nächsten positionierten Objekts in der Dokumentenhierarchie fest.

  • unicode-bidi   Legt die Einbettungsebene im Hinblick auf den bidirektionalen (rechts-nach-links) Algorithmus fest.

  • vertical-align   Legt die vertikale Ausrichtung des Objekts fest.

  • Sichtbarkeit   Legt fest, ob der Inhalt des Objekts angezeigt wird.

  • white-space   Legt fest, ob Zeilen im Objekt automatisch umbrochen werden.

  • Breite   Legt die Breite des Objekts fest.

  • word-spacing   Legt den zusätzlichen Abstand zwischen den Wörtern im Objekt fest.

  • z-index   Legt die Stapelreihenfolge positionierter Objekte fest.