Freigeben über


Dialogfelder "Neuer Stil" und "Stil bearbeiten", Hintergrund

Mithilfe der Kategorie Hintergrund der Dialogfelder Neuer Stil und Stil bearbeiten können Sie für den Hintergrund einer Webseite oder von einzelnen Elementen Cascading Stylesheet-Stilregeln (CSS) definieren. Sie können diese Stilregeln entweder HTML-Elementen zuweisen oder sie der aktuellen Seite oder einem externen Stylesheet hinzufügen.

So definieren Sie eine CSS-Stilregel für Hintergründe für Benutzeroberflächenelemente auf der aktuellen Seite

  1. Öffnen Sie die Seite in der Entwurfsansicht oder der Quellansicht.

  2. Wählen Sie je nach Bedarf den Text oder die HTML-Elemente aus, auf den bzw. die der Stil angewendet werden soll.

  3. Klicken Sie im Menü Format auf Neuer Stil.

    Das Dialogfeld Neuer Stil wird angezeigt.

  4. Wählen Sie im Bereich Kategorie die Option Hintergrund.

    Die Stilauswahl für den Hintergrund wird im rechten Bereich angezeigt.

Wenn Sie Stile in der Entwurfsansicht auf markierten Text anwenden, werden Stilattribute inline in das HTML-Markup für die Seite eingefügt. Wechseln Sie zur Quellansicht, um die neuen Stilattribute zu überprüfen.

So fügen Sie einer in einem externen Stylesheet definierten CSS-Stilregel Hintergrundattribute hinzu

  1. Öffnen Sie ein vorhandenes externes Stylesheet.

  2. Positionieren Sie den Cursor innerhalb der Klammern der Stilregel, die Sie ändern möchten.

  3. Führen Sie einen der folgenden Schritte aus.

    • Klicken Sie im Editor mit der rechten Maustaste auf das Stylesheet, und wählen Sie dann aus dem Kontextmenü Stil erstellen aus.

    • Wählen Sie in der Stylesheet-Symbolleiste Stil erstellen aus.

    Das Dialogfeld Stil bearbeiten wird angezeigt.

  4. Klicken Sie im linken Bereich auf Hintergrund.

    Die Stilauswahl für den Hintergrund wird im rechten Bereich angezeigt.

Sie können eine CSS-Stilklasse auf ein Element auf der Webseite oder auf das body-Element selbst anwenden, indem Sie die class-Eigenschaft des Elements auf den Namen des Klassenselektors setzen.

In der folgenden Tabelle sind Optionen aufgeführt, die unter der Kategorie Hintergrund in den Dialogfeldern Neuer Stil und Stil bearbeiten verfügbar sind.

Hintergrundoptionen

  • background-color
    Die Hintergrundfarbe eines HTML-Elements. Um weitere Farben auszuwählen, verwenden Sie den Abwärtspfeil, oder klicken Sie auf das quadratische Symbol auf der rechten Seite. Weitere Informationen finden Sie unter Dialogfelder "Weitere Farben" und "Farbe".

  • background-image
    Das Bild, das als Hintergrund der Webseite verwendet wird. Die Bilddatei muss dem Projekt vorher hinzugefügt werden. Da das Hintergrundbild möglicherweise nicht immer gerendert wird, empfiehlt es sich, auch die Hintergrundfarbe festzulegen.

  • background-repeat
    Die Wiederholungseinstellung für das Hintergrundbild. Gültige Werte sind:

    • no-repeat: Das Bild wird nicht wiederholt.

    • repeat: Das Bild wird vertikal und horizontal wiederholt.

    • repeat-x: Das Bild wird horizontal wiederholt.

    • repeat-y: Das Bild wird vertikal wiederholt.

    • inherit: Der background-repeat-Stil wird von einem übergeordneten Element geerbt.

  • background-attachment
    Legt fest, ob das Hintergrundbild fixiert ist oder in den Bildlauf der Webseite einbezogen wird. Gültige Werte sind:

    • fixed: Das Bild ist fixiert und wird nicht in den Bildlauf einbezogen.

    • scroll: Das Bild wird in den Bildlauf der Webseite einbezogen.

    • inherit: Der background-attachment-Stil wird von einem übergeordneten Element geerbt.

  • (x) background-position
    Die horizontale Positionierung des Hintergrundbilds. Wenn Sie einen Wert angeben, können Sie Einheiten in der Liste auswählen.

  • (y) background-position
    Die vertikale Positionierung des Hintergrundbilds. Wenn Sie einen Wert angeben, können Sie Einheiten in der Liste auswählen.

Andere Elemente der Benutzeroberfläche

  • Auswahl
    (nur Dialogfeld Neuer Stil) Sie können einen Klassennamen eingeben oder auf ein HTML-Element klicken, um den Stil darauf anzuwenden. Klassennamen müssen mit einem Punkt (.) beginnen. Sie können auch (Inlinestile) wählen. Dabei wird der Stil auf den markierten Text bzw. die HTML-Elemente inline angewendet.

  • Definieren in
    (nur Dialogfeld Neuer Stil) Sie können angeben, wo die Definition der Stilregel geschrieben werden soll. Gültige Werte sind:

    • Aktuelle Seite: Die Stilregel wird in ein style-Element der aktuellen Seite geschrieben.

    • Neues Stylesheet: Dem Projekt wird ein neues CSS-Stylesheet hinzugefügt, und die Regel wird in das Stylesheet geschrieben.

    • Vorhandenes Stylesheet: Die Stilregel wird dem CSS-Stylesheet hinzugefügt, das Sie mithilfe der Liste URL angegeben haben.

  • URL
    (nur Dialogfeld Neuer Stil) Sie können ein vorhandenes CSS-Stylesheet auswählen. Diese Option ist nur aktiviert, wenn Definieren in auf Vorhandenes Stylesheet festgelegt ist.

  • Neuen Stil auf Dokumentauswahl anwenden
    (nur Dialogfeld Neuer Stil) Legt fest, dass der Stil auf den ausgewählten Text, die Klasse oder das HTML-Element angewendet wird.

  • Vorschau
    Zeigt ein Beispiel dafür an, was die Stilregel bewirkt, wenn sie angewendet wird.

  • Beschreibung
    Zeigt die CSS-Definition der Stilregel an.

Siehe auch

Konzepte

Übersicht über das Arbeiten mit CSS