Freigeben über

'Neue Formatvorlage' und 'Formatvorlage ändern' (Dialogfelder, Layout)

  • Artikel

 

Veröffentlicht: März 2016

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

So definieren Sie eine CSS-Stilregel für Layouts 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 und/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 Layout.

    Die Stilauswahl für Layouts 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 Layoutattribute 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 Layout.

    Die Stilauswahl für Layouts 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.

UIElement-Liste

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

Layoutoptionen

  • Sichtbarkeit
    Legt fest, ob ein Element sichtbar oder ausgeblendet ist. Gültige Werte sind:

    • collapse: Bei Verwendung mit Tabellenelementen blendet dieser Wert eine Zeile oder Spalte aus. Für alle anderen Elemente bedeutet dieser Wert das Gleiche wie ausgeblendet (hidden).

    • hidden: Blendet das Element aus.

    • visible: Blendet das Element ein.

    • inherit: Das Element erbt seine visibility-Eigenschaft von einem übergeordneten Element.

  • display
    Legt fest, wie ein Element angezeigt wird. Gültige Werte sind:

    • block: Das Element wird auf Blockebene mit Zeilenumbrüchen davor und danach angezeigt.

    • inline: Das Element wird inline ohne Zeilenumbrüche davor und danach angezeigt.

    • inline-box: Das Element wird inline als Feld ohne Zeilenumbrüche davor und danach angezeigt.

    • inline-table: Das Element wird inline als Tabelle ohne Zeilenumbrüche davor und danach angezeigt.

    • list-item: Das Element wird als Eintrag in einer Liste angezeigt.

    • none: Das Element wird ausgeblendet.

    • run-in: Das Element wird je nach Kontext entweder auf Blockebene oder inline angezeigt.

    • table: Das Element wird als Blocktabelle mit Zeilenumbrüchen davor und danach angezeigt.

    • table-caption: Das Element wird als Tabellenbeschriftung angezeigt.

    • table-cell: Das Element wird als Tabellenzelle angezeigt.

    • table-column: Das Element wird als Tabellenspalte angezeigt.

    • table-column-group: Das Element wird als Gruppe von Tabellenspalten angezeigt. Diese Gruppe kann eine oder mehrere Spalten enthalten.

    • table-footer-group: Das Element wird als Gruppe von Tabellenfußzeilen angezeigt. Diese Gruppe kann eine oder mehrere Fußzeilen enthalten.

    • table-header-group: Das Element wird als Gruppe von Tabellenheadern angezeigt. Diese Gruppe kann eine oder mehrere Header enthalten.

    • table-row: Das Element wird als Tabellenzeile angezeigt.

    • table-row-group: Das Element wird als Gruppe von Tabellenzeilen angezeigt. Diese Gruppe kann eine oder mehrere Zeilen enthalten.

    • inherit: Das Element erbt seine display-Eigenschaft von einem übergeordneten Element.

  • float
    Legt fest, ob ein Element nach links oder rechts verschoben wird, so dass Text um das Element herumfließen kann, oder ob es inline angezeigt wird. Diese Eigenschaft wird am häufigsten mit Bildern verwendet, gilt aber auch für Textblöcke. Gültige Werte sind:

    • left: Das Element wird innerhalb des übergeordneten Elements nach links verschoben.

    • none: Das Element wird im Text inline angezeigt.

    • right: Das Element wird innerhalb des übergeordneten Elements nach rechts verschoben.

    • inherit: Das Element erbt seinen float-Eigenschaftswert von einem übergeordneten Element.

  • clear
    Legt fest, auf welcher Seite eines Elements unverankerte Elemente nicht zulässig sind. Gültige Werte sind:

    • both: Das Element lässt unverankerte Elemente weder auf der linken noch auf der rechten Seite zu.

    • left: Das Element wird unter ein unverankertes Element verschoben, das sich links davon befindet.

    • none: Das Element lässt auf allen Seiten unverankerte Elemente zu.

    • right: Das Element wird unter ein unverankertes Element verschoben, das sich rechts davon befindet.

    • inherit: Das Element erbt seine clear-Eigenschaft von einem übergeordneten Element.

  • Cursor
    Legt fest, welcher Cursortyp angezeigt wird. Gültige Werte sind:

    • auto: (Standardeinstellung) Der Browser legt den Cursor fest.

    • crosshair: Der Cursor wird als Fadenkreuz gerendert.

    • default: Der Standardcursor (meist ein Pfeil).

    • e-resize: Der Cursor, mit dem die Größe eines Elements nach rechts (Richtung Osten) geändert wird.

    • help: Der Cursor, der anzeigt, dass Hilfe verfügbar ist (meist ein Fragezeichen).

    • move: Der Cursor, der anzeigt, dass ein Objekt verschoben werden kann.

    • n-resize: Der Cursor, mit dem die Größe eines Elements nach oben (Richtung Norden) geändert wird.

    • ne-resize: Der Cursor, mit dem die Größe eines Elements nach oben und rechts (Richtung Nordosten) geändert wird.

    • nw-resize: Der Cursor, mit dem die Größe eines Elements nach oben und links (Richtung Nordwesten) geändert wird.

    • pointer: Der Cursor wird als Zeiger gerendert (meist als Hand).

    • progress: Der Cursor, der den Fortschritt des Programms anzeigt.

    • s-resize: Der Cursor, mit dem die Größe eines Elements nach unten (Richtung Süden) geändert wird.

    • se-resize: Der Cursor, mit dem die Größe eines Elements nach unten und rechts (Richtung Südosten) geändert wird.

    • sw-resize: Der Cursor, mit dem die Größe eines Elements nach unten und links (Richtung Südwesten) geändert wird.

    • text: Der für Text verwendete Cursor.

    • w-resize: Der Cursor, mit dem die Größe eines Elements nach links (Richtung Westen) geändert wird.

    • wait: Der Cursor, der anzeigt, dass das Programm ausgelastet ist (meist eine Sanduhr).

    • inherit: Das Element erbt seine cursor-Eigenschaften von einem übergeordneten Element.

  • Überlauf
    Legt fest, was geschieht, wenn der Inhalt eines Elements größer als der Bereich ist. Gültige Werte sind:

    • auto: Schiebeleisten werden nur angezeigt, wenn der Inhalt abgeschnitten wird.

    • hidden: Der Inhalt wird abgeschnitten, damit er in das Element passt, und es werden keine Schiebeleisten angezeigt.

    • scroll: Der Inhalt wird abgeschnitten, damit er in das Element passt, und es wird eine Schiebeleiste angezeigt.

    • visible: (Standardeinstellung) Der Inhalt wird auch angezeigt, wenn er sich außerhalb des Elements befindet.

    • inherit: Das Element erbt seine overflow-Eigenschaft von einem übergeordneten Element.

  • Clip
    Die rechteckigen Dimensionen eines Elements. Wenn das Element größer als der definierte Bereich ist, wird es abgeschnitten, damit es in den Bereich passt. Um die Dimensionen anzugeben, verwenden Sie die Felder top, right, bottom und left.

  • top
    Der obere Rand des Cliprechtecks. Wenn Sie einen Wert angeben, können Sie Einheiten in der Liste auswählen.

  • right
    Der rechte Rand des Cliprechtecks. Wenn Sie einen Wert angeben, können Sie Einheiten in der Liste auswählen.

  • bottom
    Der untere Rand des Cliprechtecks. Wenn Sie einen Wert angeben, können Sie Einheiten in der Liste auswählen.

  • left
    Der linke Rand des Cliprechtecks. 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

Working with CSS Overview