Konturen, Dialogfeld "Stil-Generator"

Artikel
09/03/2008

Aktualisiert: November 2007

Auf der Seite Konturen des Dialogfelds Stil-Generator können Sie Stilattribute für Cascading Stylesheets (CSS) definieren. Diese Stilattribute bestimmen den Rahmen und die Ränder des Bereichs, der ein HTML-Element umgibt. Sie können diese Attribute entweder direkt HTML-Elementen zuweisen oder den CSS-Formatierungsregeln hinzufügen.

So wenden Sie Konturenattribute direkt auf ein HTML-Element auf der Seite an

Öffnen Sie das HTML-Dokument in der Entwurfsansicht des HTML-Designers, und wählen Sie über das Fenster Dokumentgliederung ein zu formatierendes Element aus.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Format auf die Option Stil.
Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Konturen.

Das Dialogfeld Konturen, Stil-Generator wird im rechten Bereich angezeigt.

Wenn Sie in der Entwurfsansicht ausgewählte Elemente formatieren, werden CSS-Formatattribute inline in das HTML-Markup der Seite eingefügt. Wechseln Sie zur HTML-Ansicht, um die eingefügten neuen CSS-Formatattribute zu überprüfen.

So fügen Sie einem in einem externen Stylesheet definierten CSS-Stil Konturenattribute hinzu

Öffnen Sie ein vorhandenes externes Stylesheet, und platzieren Sie die Einfügemarke zwischen die geschweiften Klammern ({ }) hinter der Auswahl für den gewünschten Stil.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Stile auf die Option Stil erstellen.
Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Konturen.

Das Dialogfeld Konturen, Stil-Generator wird im rechten Bereich angezeigt.

Hinweis:
Das Menü Stile wird angezeigt, wenn Sie ein externes CSS-Stylesheet zum Bearbeiten öffnen. Wenn Sie die Einfügemarke zwischen die geschweiften Klammern hinter der Auswahl für eine Stilregel platzieren, wird im Menü Stile die Option Stil erstellen angezeigt.

Eine in einem externen Stylesheet definierte CSS-Stilklasse kann auf die meisten Elemente im <BODY>-Element einer Webseite angewendet werden, indem die CSS-Stilauswahl als CLASS-Eigenschaft für das Element zugewiesen wird.

Die folgenden Optionen sind auf der Seite Ränder im Dialogfeld Stil-Generator verfügbar.

Aufgaben

UI-Elemente

Ränder

Legt Attribute zur Steuerung des Abstandes zwischen dem rechteckigen Bereich, der ein Element umgibt, und anderen Elementen fest. Geben Sie in mindestens einem der Felder (Oben, Unten, Links oder Right) einen Wert ein, und wählen Sie eine Maßeinheit aus: px (Standard), pt, pc, mm, cm, in, em, ex oder %. Wenn Sie z. B. in den Feldern Oben und Unten den Wert 50 eingeben und anschließend die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

MARGIN-TOP: 50px; margin-bottom:50px

Hinweis:
Die Werte für Ränder können positiv oder negativ sein.

Abstand

Legt Attribute fest, die den Zwischenraum zwischen einem Element und dessen Seitenrand steuern, bzw. zwischen dem Element und dem Rahmen, wenn das Objekt einen solchen besitzt. Geben Sie in mindestens einem der Felder (Oben, Unten, Links oder Rechts) einen Wert ein, und wählen Sie eine Maßeinheit aus: px (Standard), pt, pc, mm, cm, in, em, ex oder %. Wenn Sie z. B. in den Feldern Oben und Unten den Wert 50 eingeben und die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

PADDING-TOP: 50px; PADDING-BOTTOM:50px

Hinweis:
Die Werte für Abstände müssen positiv sein.

Rahmen

Die folgenden Attribute steuern den Rahmen des rechteckigen Bereichs, der ein Element umgibt.

Wählen Sie die zu ändernde Kante aus
Legt den zu formatierenden Rand des Rahmens fest. Wählen Sie Alles, Oben, Unten, Links oder Rechts aus. Der Formatvorlage wird erst dann Code hinzugefügt, wenn Sie eine Rahmenformatvorlage auswählen.
Stil
Legt den Stil fest, der auf den angegebenen Rahmen angewendet werden soll. Wählen Sie <Nicht festgelegt>, Keine, Durchgehende Linie, Doppelte Linie, Vertiefte Linie, Erhöhte Linie, Abgesenkt oder Anfang aus. Wenn Sie z. B. Oben als Kontur und Durchgehende Linie als Stil auswählen, wird der folgende Code hinzugefügt:

BORDER-TOP-STYLE:solid
Breite
Legt die Breite des angegebenen Rahmens fest. Wählen Sie <Nicht festgelegt> (Keine Option ausgewählt), Dünn, Mittel, Fette Linie oder Benutzerdefiniert aus. Wenn Sie Benutzerdefiniert auswählen, sind die nebenstehenden Felder verfügbar, in denen Sie eine Zahl eingeben und eine Maßeinheit auswählen: px (Standard), pt, pc, mm, cm, in, em, ex oder %. Wenn Sie z. B. Oben als Kontur, Durchgehende Linie als Stil und Benutzerdefiniert als Breite auswählen und im Feld den Wert 50 eingeben sowie die standardmäßige Maßeinheit übernehmen, wird der folgende Code hinzugefügt:

BORDER-TOP:50px solid
Farbe
Legt die Farbe für den ausgewählten Rahmen in der Formatvorlage fest. Wählen Sie in der Dropdownliste eine Farbe aus, oder klicken Sie auf die Schaltfläche mit den Auslassungszeichen (...), um das Dialogfeld Farbauswahl zu öffnen und weitere Farben auszuwählen. Wenn Sie z. B. Oben als Kontur, Durchgehende Linie als Stil und Blau als Farbe auswählen, wird der folgende Code hinzugefügt:

BORDER-TOP:blue solid