Erstellen und Zuweisen einer Formatvorlage

Wichtig :  Dieser Artikel wurde maschinell übersetzt. Bitte beachten Sie den Haftungsausschluss. Die englische Version des Artikels ist als Referenz hier verfügbar: hier.

Bei einer Formatvorlage handelt es sich um eine Gruppe von Formatierungseigenschaften, die in einem Cascading Stylesheet (CSS) definiert sind. Sie können Formatvorlagen dem Inhalt einer Webseite zuweisen, darunter Text (einzelnen Zeichen oder ganzen Absätzen), Grafiken, Ebenen, Tabellen und sogar dem Textkörper der gesamten Webseite. Formatvorlagen ermöglichen es Ihnen, eine Gruppe von Eigenschaften und Werten auf effiziente Weise erneut zu verwenden, ohne die Eigenschaften bei jeder erneuten Verwendung festlegen zu müssen.

Die Formatvorlagen eines CSS werden insofern weitergegeben, als dass globale Formatvorlagenregeln für HTML-Elemente gelten, außer wenn sie durch lokale Formatvorlagenregeln außer Kraft gesetzt werden. Im Allgemeinen haben lokale Formatvorlagenregeln Vorrang vor allgemeinen Formatvorlagenregeln. So setzt beispielsweise die in einem internen CSS definierte Formatvorlage für eine Webseite die in einem externen CSS definierte Formatvorlage außer Kraft. Entsprechend setzt das in einem einzelnen HTML-Element auf der Webseite definierte Inline-CSS alle Formatvorlagen außer Kraft, die für dasselbe Element im internen oder externen CSS der Webseite definiert sind. Die Teile von globalen Formatvorlagenregeln, die nicht im Widerspruch zu lokalen CSS-Formatvorlagenregeln stehen, gelten für HTML-Elemente selbst dann, wenn lokale Formatvorlagen zugewiesen werden.

Inhalt dieses Artikels

Formatvorlagentypen

Erstellen einer Formatvorlage

Anwenden einer Formatvorlage

Formatvorlagentypen

Eine Formatvorlage, die sich in einem externen oder internen CSS befindet, kann auf einer Klasse, einem Element oder einer ID basieren. Eine Formatvorlage wird durch den zugehörigen Regelsatz definiert, der aus einer Auswahl besteht, auf die ein Block von Eigenschaftendeklarationen folgt. Dieser Block wird von einer öffnenden ({) und einer schließenden (}) geschweiften Klammer eingeschlossen. Jeder Formatvorlagentyp unterscheidet sich von den anderen Formatvorlagentypen durch die Auswahl: Vor der Auswahl für eine klassenbasierte Formatvorlage steht ein Punkt (.), vor der Auswahl für eine ID-basierte Formatvorlage steht ein Nummernzeichen (#), und die Auswahl für eine elementbasierte Formatvorlage besteht aus einem HTML-Element, wie z. B. dem "H1"-Element.

Klassenbasierte Formatvorlagen

Verwenden Sie klassenbasierte Formatvorlagen zum Definieren einer Gruppe von Eigenschaften, die in einem oder mehreren Elementen einer Webseite verwendet werden sollen. Wenn Sie die Formatvorlage ändern möchten, können Sie deren Regelsatz bearbeiten. Dann werden die vorgenommenen Änderungen für jedes Element, dem die Formatvorlage zugewiesen wurde, automatisch übernommen.

Im folgenden Beispiel ist "introduction" die Auswahl der Formatvorlage, und "font-size: small" ist eine Eigenschaftendeklaration, auf die eine zweite Deklaration folgt.

Beispiel für einen Regelsatz bei einer klassenbasierten Formatvorlage

.introduction {font-size: small; color: white}

Beispiel für eine klassenbasierte Formatvorlage, die einem <p>-Tag zugewiesen wurde

<p class="introduction">

Elementbasierte Formatvorlagen

Verwenden Sie elementbasierte Formatvorlagen zum Definieren einer Gruppe von Eigenschaften, die von jeder Instanz eines bestimmten HTML-Elements auf einer Webseite verwendet werden sollen. Wenn beispielsweise um alle Absätze (Inhalt in <p>-Tags) einer Webseite ein Rand von 25 Pixel erstellt werden soll, erstellen Sie eine elementbasierte Formatvorlage, in der das "p"-Element als Auswahl verwendet wird und in der Deklarationen für Randeigenschaften enthalten sind, wie im folgenden Code gezeigt wird.

Beispiel für einen Regelsatz bei einer elementbasierten Formatvorlage

p { margin-left: 25px; margin-right: 25px }

ID-basierte Formatvorlagen

Verwenden Sie eine ID-basierte Formatvorlage, wenn Sie eine Gruppe von Eigenschaften für ein einzelnes Element oder einen Block von Elementen verwenden möchten, das bzw. der sich vom gesamten anderen Inhalt auf einer oder mehrerer Webseiten unterscheiden soll. Verwenden Sie eine ID-basierte Formatvorlage außerdem, um ein einzelnes HTML-Element einer Webseite zu formatieren.

Beispiel für einen Regelsatz bei einer ID-basierten Formatvorlage

#footer {background-color: #CCCCCC; margin: 15px}

Beispiel für eine ID-basierte Formatvorlage, die einem <p>-Tag zugewiesen wurde

<p id="footer">

Inlineformatvorlagen

Verwenden Sie eine Inlineformatvorlage, wenn Sie eine Gruppe von Eigenschaften für ein einzelnes Element oder einen Block von Elementen auf einer Webseite definieren und diese Formatvorlage nur einmal verwenden möchten. Im Gegensatz zu ID-, element- und klassenbasierten Formatvorlagen, deren Eigenschaften entweder im "head"-Bereich einer Webseite (internes CSS) oder in einer externen CSS-Datei definiert werden, werden die Eigenschaften einer Inlineformatvorlage (oder eines Inline-CSS) direkt in dem HTML-Element definiert, für das die Formatvorlage verwendet werden soll.

Beispiel für einen Regelsatz bei einer Inlineformatvorlage

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Seitenanfang

Erstellen einer Formatvorlage

Sie können neue Formatvorlagen entweder völlig neu oder durch Kopieren einer vorhandenen Formatvorlage erstellen. Unabhängig von der gewählten Vorgehensweise können Sie über das Dialogfeld Neue Formatvorlage alle gewünschten Elemente für die neue Formatvorlage definieren, darunter den Auswahltyp, die Eigenschaften und das Stylesheet, in dem die Vorlage enthalten sein soll. Wenn Sie eine neue Inlineformatvorlage erstellen möchten, können Sie zu diesem Zweck auch den Aufgabenbereich CSS-Eigenschaften verwenden. Wenn Sie eine neue Formatvorlage schnell erstellen und einer Seite zuweisen möchten, ohne Eigenschaften für die Vorlage festlegen zu müssen, können Sie dies über die Symbolleiste Formatvorlage erledigen.

Erstellen einer Formatvorlage über das Dialogfeld "Neue Formatvorlage"

  1. Führen Sie eine der folgenden Aktionen aus:

    • Um eine Formatvorlage einem externen CSS hinzuzufügen, öffnen Sie die CSS-Datei.

    • Um eine Formatvorlage einem internen CSS hinzuzufügen, öffnen Sie die Webseite.

    • Um eine Inlineformatvorlage hinzuzufügen, öffnen Sie die Webseite, und wählen Sie den zu formatierenden Inhalt aus.

  2. Führen Sie eine der folgenden Aktionen aus:

    • Zum Erstellen einer neuen Formatvorlage    Klicken Sie an einer der folgenden Stellen auf Neue Formatvorlage: im Aufgabenbereich Formatvorlagen zuweisen oder im Aufgabenbereich Formatvorlagen verwalten, auf der Symbolleiste Formatvorlage oder im Menü Format.

    • Zum Kopieren einer vorhandenen Formatvorlage    Führen Sie eine der folgenden Aktionen aus:

      • Zeigen Sie im Aufgabenbereich Formatvorlagen zuweisen auf die zu kopierende Formatvorlage, klicken Sie auf den Pfeil, und wählen Sie Neue Formatvorlagenkopie aus.

      • Klicken Sie im Aufgabenbereich Formatvorlagen verwalten oder im Aufgabenbereich CSS-Eigenschaften mit der rechten Maustaste auf die zu kopierende Formatvorlage, und wählen Sie Neue Formatvorlagenkopie aus.

  3. Führen Sie im Dialogfeld Neue Formatvorlage eine der folgenden Aktionen aus:

Option

Zweck

Auswahl

  • Um eine Klassenauswahl zu verwenden, geben Sie einen Punkt (.) und dahinter einen eindeutigen Namen ein.

  • Um eine ID-Auswahl zu verwenden, geben Sie ein Nummernzeichen (#) und dahinter einen eindeutigen Namen ein.

    Hinweis : Die Namen einer Klassen- und ID-Auswahl dürfen keine Leerzeichen enthalten, außer wenn eine komplexe Auswahl erstellt wird.

  • Um eine Elementauswahl zu verwenden, geben Sie den Namen eines HTML-Elements ein, oder klicken Sie auf das Dropdownfeld Auswahl, und wählen Sie einen Elementnamen aus.

  • Um eine Inlineauswahl zu verwenden, wählen Sie Inlineformatvorlage aus.

  • Um eine komplexe Auswahl zu erstellen, geben Sie diese ein.

Definieren in

Wählen Sie eine der folgenden Optionen aus:

  • Aktuelle Seite fügt die neue Formatvorlage dem internen CSS auf der aktuellen Webseite hinzu.

  • Neues Stylesheet fügt die neue Formatvorlage einem neuen leeren externen CSS hinzu.

  • Vorhandenes Stylesheet fügt die neue Formatvorlage einem vorhandenen externen CSS hinzu, das Sie angeben.

Neue Formatvorlage für Dokumentauswahl übernehmen

Weist die Formatvorlage der aktuellen Auswahl auf der aktuellen Webseite hinzu.

URL

Wenn Sie unter Definieren in den Eintrag Vorhandenes Stylesheet ausgewählt haben, geben Sie die URL zur CSS-Datei ein.

Kategorie

Wählen Sie eine der folgenden Kategorien aus, und legen Sie dann die Eigenschaften fest, die rechts im Dialogfeld angezeigt werden sollen:

Tipp : Die in der Liste Kategorie fett dargestellten Kategorien enthalten festgelegte Eigenschaften.

  • Schriftart legt Schriftarteigenschaften fest, darunter Schriftgrad, Stärke, Verzierung und Farbe.

  • Block legt Zeilenhöhe, Textausrichtung, Texteinzug und Textabstand fest.

  • Hintergrund legt Hintergrundfarbe und Eigenschaften des Hintergrundbilds fest.

  • Randbereich legt einen Rahmen und dessen Eigenschaften fest.

  • Kasten legt den Textabstand und die Randeigenschaften von Elementen auf Kasten- und Blockebene fest.

  • Position legt die Abmessungen und Position von Elementen auf Kasten- und Blockebene fest.

  • Layout legt die Sichtbarkeit, das Beweglichkeits- und Umbruchverhalten, Ausschnitt- und andere Layouteigenschaften von Elementen auf Kasten- und Blockebene fest.

  • Liste legt die Eigenschaften von Listenelementen fest, darunter Typ, Position und Bild.

  • Tabelle legt die Eigenschaften von tabellenbezogenen Elementen fest, darunter Abstand, Layout und Rahmeneigenschaften.

Hinweis : Sie können auch eine Formatvorlage aus einem CSS in ein anderes kopieren. Ziehen Sie die Formatvorlage im Aufgabenbereich Formatvorlage verwalten aus dem Quell-CSS auf den Namen des Ziel-CSS oder an eine bestimmte Stelle in der Liste der Formatvorlagen im Ziel-CSS.

Erstellen einer Inlineformatvorlage über den Aufgabenbereich "CSS-Eigenschaften"

  1. Wählen Sie in der Entwurfsansicht oder der Codeansicht auf der Webseite den Inhalt aus, dem eine Inlineformatvorlage hinzugefügt werden soll.

  2. Klicken Sie im Aufgabenbereich CSS-Eigenschaften unter Zugewiesene Regeln mit der rechten Maustaste auf die Auswahl, der die Inlineformatvorlage zugewiesen werden soll. Wenn aber "(Keine Regeln zugewiesen)" angezeigt wird, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle unter Zugewiesene Regeln, und klicken Sie dann im Kontextmenü auf Neue Inlineformatvorlage.

  3. Legen Sie unter CSS-Eigenschaften die gewünschten Eigenschaften fest.

Erstellen und Zuweisen einer neuen nicht definierten Formatvorlage

Sie können Formatvorlagen erstellen, sie Elementen zuweisen und erst nachträglich definieren. Wenn Sie beispielsweise mit einem Designer zusammenarbeiten möchten, um das Erscheinungsbild einer Seite zu erstellen, können Sie den Elementen der Seite nicht definierte Formatvorlagen zuweisen. Zur gegebenen Zeit definieren Sie die Formatvorlagen dann gemeinsam mit dem Designer.

  1. Wählen Sie in der Entwurfsansicht oder der Codeansicht auf der Webseite das Element aus, dem eine Formatvorlage zugewiesen werden soll.

  2. Wenn Sie eine neue Formatvorlage erstellen und diese zuweisen möchten, ohne irgendwelche Eigenschaften zu definieren, geben Sie auf der Symbolleiste Formatvorlage in einem der Felder Klasse oder ID einen eindeutigen Namen für die neue Formatvorlage ein.

Seitenanfang

Anwenden einer Formatvorlage

Sie können über den Aufgabenbereich Formatvorlagen zuweisen, den Aufgabenbereich Formatvorlagen verwalten oder die Symbolleiste Formatvorlage klassenbasierte oder ID-basierte Formatvorlagen aus den internen und externen Cascading Stylesheets (CSS) zuweisen. Der Aufgabenbereich Formatvorlagen zuweisen ermöglicht es Ihnen, einer Auswahl mehrere Formatvorlagen zuzuweisen, während über den Aufgabenbereich Formatvorlagen verwalten und die Symbolleiste Formatvorlage nur eine einzige Formatvorlage zugewiesen werden kann. Auf der Symbolleiste Formatvorlage können Sie neue nicht definierte Formatvorlagen schnell benennen und der Seite zuweisen.

Formatvorlagen, in denen ein Element für eine Auswahl verwendet wird (elementbasierte Formatvorlagen) müssen nicht zugewiesen werden, weil diese Formatvorlagentypen dem zugeordneten Element auf der gesamten Webseite automatisch zugewiesen werden. Im Aufgabenbereich Formatvorlagen zuweisen werden elementbasierte Formatvorlagen unter Kontextbezogene Auswahlzeiger aufgelistet. Sowohl in diesem Aufgabenbereich als auch im Aufgabenbereich Formatvorlagen verwalten wird neben dem Namen der Formatvorlage ein blauer Punkt angezeigt. Auf der Symbolleiste Formatvorlage werden keine elementbasierten Formatvorlagen aufgelistet.

  1. Wählen Sie in der Entwurfsansicht oder der Codeansicht der Webseite das Element aus, dem eine Formatvorlage zugewiesen werden soll.

  2. Führen Sie eine der folgenden Aktionen aus:

    • Zum Zuweisen mehrerer vorhandener Formatvorlagen    Drücken Sie im Aufgabenbereich Formatvorlagen zuweisen STRG, während Sie auf jede gewünschte Formatvorlage klicken.

    • Zum Zuweisen einer einzelnen vorhandenen Formatvorlage    Führen Sie eine der folgenden Aktionen aus:

      • Klicken Sie im Aufgabenbereich Formatvorlagen zuweisen auf die gewünschte klassen- oder ID-basierte Formatvorlage.

      • Klicken Sie auf der Symbolleiste Formatvorlage in einem der Dropdownfelder Klasse oder ID auf die gewünschte Formatvorlage.

      • Klicken Sie im Aufgabenbereich Formatvorlagen verwalten mit der rechten Maustaste auf die gewünschte klassen- oder ID-basierte Formatvorlage, und klicken Sie dann im Kontextmenü auf Formatvorlage zuweisen.

    • Zum Erstellen und Zuweisen einer neuen Formatvorlage, ohne Eigenschaften zu definieren    Geben Sie auf der Symbolleiste Formatvorlage in einem der Felder Klasse oder ID einen eindeutigen Namen für die neue Formatvorlage ein.

Seitenanfang

Hinweis : Haftungsausschluss für maschinelle Übersetzungen: Dieser Artikel wurde mithilfe eines Computersystems und ohne jegliche Bearbeitung durch Personen übersetzt. Microsoft bietet solche maschinellen Übersetzungen als Hilfestellung für Benutzer ohne Englischkenntnisse an, damit Sie von den Informationen zu Produkten, Diensten und Technologien von Microsoft profitieren können. Da es sich bei diesem Artikel um eine maschinelle Übersetzung handelt, enthält er möglicherweise Fehler in Bezug auf (Fach-)Terminologie, Syntax und/oder Grammatik.

Teilen Facebook Facebook Twitter Twitter E-Mail E-Mail

War diese Information hilfreich?

Sehr gut. Noch anderes Feedback?

Was können wir verbessern?

Vielen Dank für Ihr Feedback!

×