Dialogfeld "Stil-Generator"
Aktualisiert: November 2007
Mit den Optionen des Dialogfelds Stil-Generator können Sie Stilattribute für Cascading Stylesheets (CSS) definieren. Ein CSS-Stil führt einzelne Formatierungs- und Positionierungsattribute in einer Attributgruppe zusammen, sodass sie alle gleichzeitig zugewiesen werden können.
Das Dialogfeld Stil-Generator ist in zwei Bereiche unterteilt. Im linken Bereich sind acht allgemeine Kategorien aufgeführt (Schriftart, Hintergrund, Text, Position, Layout, Konturen, Listen und Andere). Wenn Sie eine Kategorie auswählen, werden im rechten Bereich die zugehörigen Optionen für die Kategorie angezeigt. Durch die Auswahl von Stiloptionen werden vom Stil-Generator CSS-Stildefinitionen erstellt.
Sie können die CSS-Formatvorlagenattribute auf die einzelnen HTML-Elemente einer Webseite anwenden oder die Formatvorlagenattribute zu den in externen Stylesheets gespeicherten CSS-Formatierungsregeln hinzufügen. Mit externen Stylesheets kann in einem Arbeitsgang eine einheitliche Darstellungsart mehrerer Webseiten festgelegt werden.
So zeigen Sie das Dialogfeld "Stil-Generator" an
Klicken Sie im Hauptmenü auf Format, und klicken Sie dann auf Stil.
Das Dialogfeld Stil-Generator wird angezeigt.
Wählen Sie im linken Bereich eine Option aus, um CSS-Stilattribute zu definieren.
Erstellen von CSS-Inlineformatvorlagen in der Entwurfsansicht
Wenn Sie ein in der Entwurfsansicht ausgewähltes HTML-Element formatieren, werden Formatattribute inline in das Markup für das Element eingefügt. Wechseln Sie zur HTML-Ansicht, um die neu eingefügten Formatattribute anzuzeigen und anzupassen.
So wenden Sie CSS-Stilattribute direkt auf HTML-Elemente auf der Webseite an
Öffnen Sie das HTML-Dokument in der Entwurfsansicht des HTML-Designers.
Öffnen Sie das Fenster Dokumentgliederung, wählen Sie ein zu formatierendes Element, und klicken Sie dann im Menü Format auf Stil, um das Dialogfeld Stil-Generator zu öffnen.
Wählen Sie im linken Bereich eine Option aus, um CSS-Stilattribute zu definieren.
Der Titel des Dialogfelds Stil-Generator enthält den Namen des ausgewählten Elements. CSS-Stile können Elementen im <BODY>-Element des HTML-Dokuments zugewiesen werden.
Markup für CSS-Formatvorlagen in der HTML-Ansicht
Wenn Sie einem HTML-Element in der Entwurfsansicht einen Inlinestil hinzufügen, wird dem entsprechenden öffnenden Tag HTML-Markup hinzugefügt, das Sie anschließend in der HTML-Ansicht anzeigen und bearbeiten können. Dies wird im folgenden Codebeispiel gezeigt.
<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>
Alternativ können Sie einen STYLE-Block im <HEAD>-Element des HTML-Dokuments erstellen. Beispiel:
<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>
CSS-Formatvorlagen in externen Stylesheets
Sie können Stile auch in einem separaten Stylesheetdokument mit der Erweiterung .css erstellen.
So erstellen Sie Stile in einem separaten Stylesheetdokument mit der Erweiterung .css
Öffnen Sie ein externes Stylesheet (CSS-Dokument), um es zu bearbeiten, oder erstellen Sie eines, falls in Ihrer Webanwendung noch keines vorhanden ist. Die Erstellung erfordert folgende Schritte:
Klicken Sie mit der rechten Maustaste auf die Website, und klicken Sie dann auf Neues Element hinzufügen.
Wählen Sie im Dialogfeld Neues Element hinzufügen aus der Liste Von Visual Studio installierte Vorlagen den Punkt Stylesheet, und klicken Sie dann auf Hinzufügen, um der Website ein neues Stylesheet hinzuzufügen.
Doppelklicken Sie auf das Stylesheet, um es zur Bearbeitung zu öffnen.
Klicken Sie im Menü Stile auf Stilregel hinzufügen, um eine neue, leere Stildefinition einzufügen.
Platzieren Sie die Einfügemarke zwischen die geschweiften Klammern hinter der Auswahl für die Stilregel, klicken Sie auf Stile, und klicken Sie dann im Menü Stile auf Stil erstellen, um das Dialogfeld Stil-Generator zu öffnen und der Stildefinition Attribute hinzuzufügen.
.gif "Hinweis") Hinweis: |
|---|
Das Menü Stile mit den Optionen Stilregel hinzufügen und Stil erstellen wird angezeigt, wenn Sie ein externes CSS-Stylesheet zur Bearbeitung öffnen. Wenn Sie die Einfügemarke zwischen die geschweiften Klammern hinter der Auswahl für die Stilregel platzieren, wird im Menü Stile die Option Stil erstellen angezeigt. |
Um die in einem externen Stylesheet definierten Stile für die HTML-Elemente einer Webseite verfügbar zu machen, erstellen Sie im <HEAD>-Element der Seite einen Link zu einem externen Stylesheet, wie im folgenden Codebeispiel gezeigt.
<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">
Zuweisen von Formatvorlagendefinitionen für Elemente anhand von CLASS und ID
Setzen Sie beim Definieren der CLASS-Eigenschaft eines Stils einen Punkt an den Anfang der Stildefinition, wie im folgenden Codebeispiel gezeigt.
.term { font-size:9pt; font-weight:bold; color:darkblue;}
Sie können einer Webseite die definierte CLASS-Eigenschaft eines Stils entweder in der Entwurfsansicht oder in der HTML-Ansicht des HTML-Designers zuweisen. In der Entwurfsansicht können Sie Text oder Elemente im WYSIWYG-Editor markieren. Wahlweise können Sie die Elemente auch im Fenster Dokumentgliederung auswählen. Wählen Sie über die Symbolleiste Format im Dropdownmenü Stil einen Stil aus. Dieser wird dem ausgewählten Element zugewiesen.
In der HTML-Ansicht können Sie im Fenster Dokumentgliederung das Element auswählen, anschließend das Eigenschaftenfenster öffnen, einen Bildlauf nach unten bis zur CLASS-Eigenschaft des ausgewählten Elements durchführen und die Auswahl für den gewünschten CSS-Stil eingeben (ohne den Punkt). Dadurch wird eine CLASS-Eigenschaft in das HTML-Markup des Elements eingefügt. Beispiel:
<DIV CLASS="term">World Wide Web</DIV>
Wie zuvor für den Stil "term" definiert, werden die Wörter "World Wide Web" mit einem Schriftgrad von 9 Punkten sowie fett und dunkelblau formatiert angezeigt.
Es können außerdem eindeutige, einer einzelnen Position auf einer Seite zugewiesene Formate definiert werden. Der Name eines eindeutigen Stils beginnt mit einem Nummernzeichen (#), wie im folgenden Codebeispiel gezeigt.
#bigdeal {font-decoration:underline; font-size:24pt; color:red;}
So weisen Sie einem Element auf der Webseite einen eindeutigen Stil zu
Öffnen Sie die Seite in der HTML-Ansicht des HTML-Designers.
Wählen Sie das Element im Fenster Dokumentgliederung aus, und öffnen Sie anschließend das Eigenschaftenfenster
Geben Sie für die ID-Eigenschaft dieses Elements die Auswahl für den gewünschten Stil ein.
Dadurch wird ein ID-Attribut in das Markup des Elements eingefügt. Beispiel:
<P ID="bigdeal">Happy Birthday</P>
- Wie zuvor für den Stil "term" definiert, werden die Wörter "Happy Birthday" mit einem Schriftgrad von 24 Punkten sowie unterstrichen und rot formatiert angezeigt.
Aufgaben
Exemplarische Vorgehensweise: Grundlegende HTML-Bearbeitung in Visual Web Developer
Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei
UI-Elemente
Informationen über Optionen für |
Weitere Informationen finden Sie unter |
|---|---|
Schriftarten |
|
Hintergrund |
|
Text |
|
Position von Elementen auf einer Seite |
|
Flusssteuerung, Überlauf, Ausschneiden und Drucken von Seitenumbrüchen |
|
Rahmen, Seitenränder und Abstände |
|
Listen |
|
Benutzeroberfläche, Tabellen und visuelle Effekte |
Siehe auch
Konzepte
Übersicht über das Arbeiten mit CSS