Übersicht über das Arbeiten mit CSS

  • Artikel

Aktualisiert: November 2007

Ein Cascading Style Sheet (CSS) enthält Stilregeln, die auf die Elemente einer Webseite angewendet werden. Diese Stile definieren, wie und an welcher Position die Seitenelemente dargestellt werden. Visual Studio 2008 stellt Tools zum Arbeiten mit CSS bereit.

Dieses Thema enthält folgende Abschnitte:

  • Szenarien

  • Features der CSS-Tools

  • Hintergrund

  • Codebeispiele

  • Klassenreferenz

  • Neues

Szenarien

In Visual Studio 2008 können Sie beim Erstellen und Bearbeiten von Webseiten mit dem Designer Stilregeln schreiben, die inline vorliegen oder in einer Webseite oder einem externen Stylesheet enthalten sind. 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

Features der CSS-Tools

Visual Studio 2008 verfügt über eine Reihe von Tools zum Erstellen, Anwenden und Verwalten von Stilen und CSS. Dazu gehören folgende Tools:

  • 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. Weitere Informationen finden Sie unter Gewusst wie: Verwenden der Fenster "Stile übernehmen" und "Stile verwalten".

  • 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 internen Stylesheet (ein style-Element in einer Seite) in ein externes Stylesheet und umgekehrt verwenden. Sie können es auch zum Verschieben von Stilen innerhalb eines Stylesheets verwenden. Weitere Informationen finden Sie unter Gewusst wie: Verwenden der Fenster "Stile übernehmen" und "Stile verwalten".

  • Im Fenster CSS-Eigenschaften werden die Stile angezeigt, die von der aktuellen Auswahl in einer Webseite verwendet werden. Gleichzeitig wird die Rangfolge der Stile angezeigt. Außerdem wird im Fenster eine umfassende Liste aller CSS-Eigenschaften dargestellt. Dies ermöglicht das Hinzufügen von Eigenschaften zu einem vorhandenen Stil, das Bearbeiten von bereits festgelegten Eigenschaften und das Erstellen von neuen Inlinestilen. Weitere Informationen finden Sie unter Gewusst wie: Verwenden des Fensters "CSS-Eigenschaften".

  • Die Symbolleiste Stilanwendung ermöglicht das Übernehmen oder Entfernen von klassen- oder ID-basierten Stilen und das Erstellen und Übernehmen von neuen Stilen. Sie ermöglicht eine bessere Kontrolle über die von Visual Studio erstellten Stile. Weitere Informationen finden Sie unter Gewusst wie: Verwenden der Symbolleiste "Stilanwendung".

  • Mithilfe der Tagauswahl können Sie HTML-Tags auswählen, während Sie in 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. Weitere Informationen finden Sie unter Tag-Navigation im HTML-Editor von Visual Web Developer.

Zurück nach oben

Hintergrund

Statt jedem Element in einer Seite einzelne Formatierungsattribute zuzuweisen, können Stilregeln erstellt werden. Diese Regeln wenden Eigenschaftenwerte an (üblicherweise Formatierungsregeln), wenn ein Webbrowser auf eine Instanz eines Elements oder eines Elements mit einer bestimmten ID oder Stilklasse trifft.

Zum Arbeiten mit CSS-Stilen sind Kenntnisse über das Erstellen und das Übernehmen eines Stils notwendig. Dieser Abschnitt enthält Informationen aus der W3C-CSS-Spezifikation zu CSS-Stilen und über die Tools in Visual Studio 2008, die das Arbeiten mit CSS-Stilen erleichtern.

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

Sie können eine Stilregel definieren, die für ein Element, ein Element mit einer zugeordneten Klasse oder ein Element mit einer ID übernommen wird. Ein Stil wird durch seinen Regelsatz definiert, der aus einem Selektor gefolgt von einem Block von Eigenschaftendeklarationen zwischen einer linken ( { ) und einer rechten ( } ) geschweiften Klammer besteht. Jeder Stiltyp unterscheidet sich von anderen Stiltypen durch seinen Selektor. Ein klassenbasierter Selektor wird von einem voranstehenden Punkt (.) eingeleitet. Ein ID-basierter Selektor wird von einem voranstehenden Nummernzeichen (#) eingeleitet. Der Selektor für einen elementbasierten Stil besteht lediglich aus dem Namen des HTML-Elements, beispielsweise h1.

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 (Inhalt innerhalb von p-Elementen) einrichten. Zu diesem Zweck erstellen Sie einen elementbasierten Stil, der das p-Element als Selektor verwendet und Deklarationen für Randeigenschaften enthält. 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 bestimmte Elemente, die durch ihr ID-Attribut identifiziert werden, übernommen werden sollen. Ein ID-basierter Stil wird oft verwendet, wenn ein einzelnes HTML-Element in 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 in 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 Inlinestilen

Eine Inlinestilregel wird im Starttag eines Elements unter Verwendung des Stilattributs definiert. Ein Inlinestil sollte verwendet werden, wenn Eigenschaften für ein einzelnes Element in 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 PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>HTML 4.0 CSS Element Style Example</title>
      <style type="text/css">        h1{text-align:center; color:blue;}      </style>
  </head>
  <body>
    <h1>This text is centered and blue</h1>
  </body>
</html>

Sämtlicher Text in 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" type="text/css" 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 definiert werden, werden auf die gleiche Weise wie innerhalb des style-Elements geschrieben. Sie werden jedoch 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. Dies 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 in 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.

Auch wenn Elementen lokal definierte CSS-Stilregeln zugeordnet werden, bleiben einzelne global definierte Stilregeln weiterhin gültig, wenn sie nicht durch lokale Stilregeln überschrieben werden. In dem Beispiel im vorherigen Abschnitt ersetzen die lokalen CSS-Stile für den Text im h1-Element einige der globalen Stilregeln des Webbrowsers für h1-Text (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"

Gewusst wie: Verwenden der Fenster "Stile übernehmen" und "Stile verwalten"

Gewusst wie: Verwenden der Symbolleiste "Stilanwendung"

Zurück nach oben

Klassenreferenz

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

Zurück nach oben

Neues

Visual Studio 2008 verfügt jetzt über eine umfangreiche Unterstützung für die Bearbeitung von CSS durch mehrere neue Tools, mit denen das Arbeiten mit CSS (Cascading Stylesheets) 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 und des Tools Stilanwendung erledigt werden. In der Entwurfsansicht können Sie auch Positionierung, Textabstand und Ränder ändern, indem Sie visuelle WYSIWYG-Layouttools verwenden.

Zurück nach oben

Siehe auch

Konzepte

Tag-Navigation im HTML-Editor von Visual Web Developer

Formatieren von Elementen im HTML-Editor von Visual Web Developer