Übersicht über das Arbeiten mit CSS

Ein Cascading Stylesheet (CSS) enthält Stilregeln, die auf die Elemente einer Webseite angewendet werden. Mit diesen Formaten können Sie die Darstellung der Elemente und ihre Position auf der Seite definieren. Visual Studio stellt Tools bereit, mit denen Sie mit CSS arbeiten können.

Dieses Thema enthält folgende Abschnitte:

• Szenarien

• Funktionen der CSS-Tools

• Hintergrund

• Codebeispiele

• Klassenreferenz

• Tipps

Szenarien

Wenn Sie Webseiten bearbeiten, können Sie Stilregeln an drei Orten erstellen: inline, innerhalb eines <style>-Abschnitts auf einer Webseite oder in einem externen Stylesheet. Durch visuelle Hilfsmittel können Sie Leerräume und Ränder der Seitenelemente erkennen. Sie können Elemente auch mithilfe der Positionierungstools positionieren.

Zurück nach oben

Funktionen der CSS-Tools

Visual Studio verfügt über die folgenden Tools zum Erstellen, Anwenden und Verwalten von Stilen und Cascading Stylesheets (CSS):

• Im Fenster Stile übernehmen können Stile erstellt, geändert und übernommen werden. Das Verknüpfen oder Entfernen eines externen CSS ist ebenfalls möglich. Im Fenster werden Stiltypen erkannt und angezeigt, ob der Stil in der aktuellen Webseite und von der aktuellen Auswahl verwendet wird.

• Das Fenster Stile verwalten stellt viele der Features des Fensters Stile übernehmen zur Verfügung. Sie können das Fenster Stile verwalten jedoch zum Verschieben von Stilen von einem <style>-Abschnitt in einer Seite in ein externes Stylesheet und umgekehrt verwenden. Sie können es auch zum Verschieben von Stilen innerhalb eines Stylesheets verwenden.

• Im Fenster CSS-Eigenschaften werden die Stile angezeigt, die von der aktuellen Auswahl auf einer Webseite verwendet werden. Gleichzeitig wird die Rangfolge der Stile angezeigt. Außerdem wird im Fenster eine umfassende Liste aller CSS-Eigenschaften dargestellt. Sie können einem vorhandenen Stil Eigenschaften hinzufügen, bereits festgelegte Eigenschaften bearbeiten und neue Inlinestile erstellen. Weitere Informationen finden Sie unter Gewusst wie: Verwenden des Fensters "CSS-Eigenschaften".

• Wenn Sie mit ASP.NET Web Forms-Seiten (ASPX-Dateien) arbeiten, können Sie mit der Tagauswahl HTML-Tags auswählen, während Sie auf einer Webseite arbeiten. Die Tagauswahlleiste befindet sich am unteren Rand des Bearbeitungsfensters. Befindet sich der Cursor an einer beliebigen Stelle in einer Seite, werden in der Leiste Direktauswahl von Tags die Tags angezeigt, die das zugrunde liegende HTML-Tag für diesen Bereich anzeigen. Mit der ESC-TASTE kann durch die HTML-Hierarchie nach oben navigiert werden, um Tags auszuwählen, die innerhalb anderer Tags geschachtelt sind.

Zurück nach oben

Hintergrund

Sie müssen Formatierungsattribute nicht für jedes Element eines bestimmten Typs in einer Seite zuweisen. Stattdessen können Sie auch eine Stilregel erstellen, die auf alle Elemente dieses Typs angewendet wird. Diese Regeln wenden Eigenschaftswerte, wie Formatierungsregeln, auf jede Instanz eines Elements oder auf jedes Element mit einer bestimmten ID oder Stilklasse an.

In diesem Abschnitt werden CSS-Stile und wie sie in Visual Studio erstellt und übernommen werden, behandelt.

Definieren von CSS-Stilregeln

Jede CSS-Stilregel (auch als Stil bezeichnet) besteht aus zwei Hauptteilen: einem Selektor (z. B. h1) und einer Deklaration (z. B. color:blue). Die Deklaration enthält eine Eigenschaft (color) und den dazugehörigen Wert (blue). Die Syntax für eine Stilregel lautet wie folgt:

Selector { property : value ; property2 : value2}

Die folgende CSS-Stilregel legt beispielsweise fest, dass jeglicher Text innerhalb von h1-Elementen zentriert und mit der Schriftfarbe Blau dargestellt wird.

h1 {text-align:center; color:blue;}

Verwenden von unterschiedlichen Stiltypen

Eine Stilregel bezieht sich auf ein Element oder auf ein Element, das ein class-Attribut enthält, oder auf ein Element, das über eine ID verfügt. In einem Stylesheet wird jedes dieser Elemente durch einen Selektor dargestellt. Ein klassenbasierter Selektor wird von einem voranstehenden Punkt (.) eingeleitet. Ein ID-basierter Selektor wird von einem voranstehenden Nummernzeichen (#) eingeleitet. Ein elementbasierter Selektor ist einfach der Name des HTML-Elements, wie h1. Ein gesamter Stil ist ein Selektor plus eine Reihe von Eigenschaftendeklarationen in einer öffnenden geschweiften Klammer ( { ) und einer schließenden geschweiften Klammer ( } ).

Elementbasierte Stile

Elementbasierte Stile definieren Eigenschaften, die für jede Instanz eines bestimmten HTML-Elements übernommen werden sollen. (Elementbasierte Stile können von klassenbasierten oder ID-basierten Stilen für einzelne Instanzen eines Elements überschrieben werden.) Sie möchten beispielsweise einen Rand von 25 Pixel um alle Absätze (p-Elemente) einrichten. Hierzu erstellen Sie einen Stil, der den p-Selektor gefolgt von geschweiften Klammern, die die Randeigenschaften enthalten, verwendet. Im folgenden Beispiel wird diese elementbasierte Stilregel dargestellt.

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

Klassenbasierte Stile

Klassenbasierte Stile definieren Eigenschaften, die für eine Teilmenge eines bestimmten Elementtyps (beispielsweise für einige, jedoch nicht alle p-Elemente) übernommen werden sollen. Sie können auch für unterschiedliche Elementtypen übernommen werden, z. B. einige p-Elemente und einige span-Elemente. Im folgenden Beispiel wird eine klassenbasierte Stilregel dargestellt. Der Name introduction bezeichnet den Selektor des Stils (der Name der Klasse).

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

Das folgende Beispiel zeigt, wie eine Klasse für ein <p>-Tag angegeben wird:

<p class="introduction">

ID-basierte Stile

ID-basierte Stile definieren Eigenschaften, die für Elemente, die über ein bestimmtes ID-Attribut verfügen, übernommen werden sollen. Ein ID-basierter Stil wird oft verwendet, wenn ein einzelnes HTML-Element auf einer Webseite formatiert werden soll. Im folgenden Beispiel wird ein ID-basierter Stil dargestellt. Der Name footer gibt die ID an, für die dieser Stil gilt.

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

Das folgende Beispiel zeigt, wie eine ID für ein <p>-Tag angegeben wird:

<p id="footer">

Schreiben von CSS-Stilen

CSS-Stilregeln können an mehreren Stellen geschrieben werden, unter anderem:

• Inline mit dem HTML-Markup.

• In einem style-Element auf einer Webseite.

• In einem externen Stylesheet (CSS-Datei), das mit der Webseite verknüpft oder in diese importiert wird.

Im Allgemeinen schreiben Sie Regeln, die in einem externen Stylesheet für die ganze Website gelten. Stilregeln, die lediglich für eine Seite gelten sollen, werden im style-Element der Seite geschrieben. Stilregeln, die für ein einzelnes Seitenelement gelten sollen, schreiben Sie als Inlinestil. Viele Designer und Entwickler sind der Meinung, dass das Warten von Stilen einfacher ist, wenn sämtliche Stilregeln in eine oder mehrere externe Stylesheetdateien geschrieben werden.

Erstellen von Inlineformatvorlagen

Eine Inlinestilregel wird im Starttag eines Elements unter Verwendung des Stilattributs definiert. Ein Inlinestil sollte verwendet werden, wenn Eigenschaften für ein einzelnes Element auf einer Webseite definiert werden sollen und dieser Stil nicht wiederverwendet werden soll. Im folgenden Beispiel wird ein Inlinestil dargestellt.

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

Erstellen von internen (seitenspezifischen) CSS-Stilen

CSS-Stilregeln können in einem style-Element innerhalb des head-Elements einer Webseite definiert werden. In diesem Fall gelten die Stilregeln lediglich für Elemente dieser Seite.

Im folgenden Beispiel wird das Definieren und Anwenden einer CSS-Stilregel auf alle h1-Elemente einer Webseite veranschaulicht.

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Element Style Example</title>
      <style>
        h1{text-align:center; color:blue;}
      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

Sämtlicher Text auf dieser Webseite, der sich innerhalb der Tags <h1> und </h1> befindet, wird zentriert und in blauer Schriftfarbe dargestellt. Sie müssen diese Stilattribute nicht erneut jedem im Dokument enthaltenen h1-Tag zuweisen. Wenn Sie die Farbe (oder eine beliebige andere Eigenschaft) des Texts innerhalb der h1-Elemente ändern möchten, müssen Sie nur eine einzige Stilregel bearbeiten.

Erstellen von externen Cascading Stylesheets

Ein externes Stylesheet ist eine Textdatei mit der Dateinamenerweiterung CSS, die ausschließlich Stilregeln enthält. Sie können ein Stylesheet mithilfe eines link-Elements mit einer Webseite verknüpfen, wie im folgenden Beispiel gezeigt wird.

<link rel="stylesheet" href="myStyles.css" />

Dieses link-Element wendet die im externen Stylesheet myStyles.css enthaltenen Stilregeln auf die aktuelle Seite an.

Stilregeln, die in einem externen Stylesheet aufgeführt sind, werden auf die gleiche Art und Weise erstellt (geschrieben) wie in einem style-Element.Allerdings sind sie nicht in <style>- und </style>-Tags eingeschlossen. Im folgenden Beispiel wird der vollständige Inhalt einer einfachen CSS-Datei dargestellt.

h1 { text-align:center; color:blue; } 
.head2 { font-size:14pt; text-align:center; color:blue; font-weight:bold; font-style:italic; }

Ein externes Stylesheet kann mit mehreren HTML-Seiten verknüpft werden. Auf diese Weise wird ein konsistenter Stil für die gesamte Website angewendet. Durch Stylesheets werden Formatierungsregeln und Inhalte getrennt. Dieses Vorgehen macht das Verwalten von Stilregeln einfacher.

Rangfolge von CSS-Stilregeln

CSS-Stilregeln "überlappen" in dem Sinne, dass sie eine bestimmte Rangfolge aufweisen. Zunächst gelten globale Stilregeln für HTML-Elemente, lokale Stilregeln überschreiben diese. So überschreibt beispielsweise ein in einem style-Element auf einer Webseite festgelegter Stil einen Stil, der in einem externen Stylesheet festgelegt wurde. Dies gilt ebenfalls für einen Inlinestil, der in einem einzelnen HTML-Element in der Seite festgelegt wurde. Dieser Stil überschreibt alle für das gleiche Element an anderer Stelle definierten Stile.

Einzelne globale Stilregeln werden übernommen, es sei denn, sie werden durch lokale CSS-Stilregeln überschrieben. In dem Beispiel im vorherigen Abschnitt ersetzen die lokalen CSS-Stile für den Text im h1-Element einige der globalen h1-Stilregeln (h1-Text zentrieren und blau formatieren). Sie ändern jedoch nicht alle verfügbaren Stile, beispielsweise nicht die Schriftarteigenschaften. Sowohl globale als auch lokale Stilregeln werden übernommen, genau in dieser Reihenfolge. Als Ergebnis wird sämtlicher h1-Text auf dieser Seite in einem größeren Schriftgrad dargestellt, fett formatiert, zentriert und blau eingefärbt.

Codebeispiele

Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei

Exemplarische Vorgehensweise: Arbeiten mit einer vorhandenen CSS-Datei

Gewusst wie: Verwenden des Fensters "CSS-Eigenschaften"

Zurück nach oben

Klassenreferenz

Es gibt keine Klassen für die CSS-Tools.

Zurück nach oben

Tipps

Visual Studio verfügt über eine umfangreiche Unterstützung für die Bearbeitung von CSS (Cascading Stylesheets) durch mehrere Tools, mit denen das Arbeiten mit CSS einfacher als je zuvor wird. Ein Großteil der Arbeit zum Gestalten des Layouts und zum Formatieren des Inhalts kann in der Entwurfsansicht mithilfe der Fenster CSS-Eigenschaften, Stile übernehmen und Stile verwalten erledigt werden. In der Designansicht können Sie auch Positionierung, Textabstand und Ränder ändern, indem Sie visuelle WYSIWYG-Layouttools verwenden.

Zurück nach oben