Freigeben über

Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei

  • Artikel

In dieser exemplarischen Vorgehensweise werden die Funktionen von Visual Studio vorgestellt, die Sie bei der Arbeit mit CSS (Cascading Stylesheets) unterstützen. Sie erhalten eine Anleitung zum Erstellen eines dreispaltigen Seitenlayouts. Außerdem werden die grundlegenden Techniken zum Erstellen einer Webseite und eines neuen Stylesheets veranschaulicht.

Hinweis

Die Beispiele in diesem Thema sind für ASP.NET-Web Forms-Seiten spezifisch.Sie können die Ansicht Quelle zum Bearbeiten von Seiten in ASP.NET MVC (Model View Controller) oder ASP.NET Webpages-Anwendungen (CSHTML-Dateien) verwenden, die Ansicht Entwurf und die Ansicht Teilen werden jedoch nur für Web Forms-Seiten vollständig unterstützt.

In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:

  • Erstellen einer Dateisystem-Website

  • Anpassen der Website durch Verwenden der CSS-orientierten Funktionen

  • Erstellen eines dreispaltigen Seitenlayouts unter Verwendung von CSS

Vorbereitungsmaßnahmen

Zum Durchführen der exemplarischen Vorgehensweise benötigen Sie Folgendes:

Erstellen einer Website

In diesem Teil der exemplarischen Vorgehensweise können Sie eine Website erstellen und ihr eine Web Forms-Seite hinzufügen. Im nächsten Abschnitt können Sie eine CSS-Datei hinzufügen und die Seite anschließend in einem Browser aufrufen.

Wenn Sie bereits eine Website mit Visual Studio erstellt haben (z. B. mit den Schritten in Exemplarische Vorgehensweise: Erstellen einer einfachen Web Forms-Seite in Visual Studio), können Sie diese Website verwenden und mit „Hinzufügen und Formatieren von Seitenelementen“ unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website, indem Sie folgende Schritte ausführen.

Hinweis

Die Standardprojektvorlage für ASP.NET-Websites und ASP.NET-Webanwendungen enthält eine vordefinierte Datei "Site.css".Diese Datei enthält CSS-Regeln, die das Aussehen der Gestaltungsvorlage ("Site.master") und der Inhaltsseiten ("Default.aspx" und "About.aspx") definieren.In dieser exemplarischen Vorgehensweise wird erläutert, wie Sie CSS in ASP.NET-Webseiten erstellen und damit arbeiten.Sie beginnen mit einem leeren Websiteprojekt und fügen dann der Website CSS-Funktionen hinzu.

So erstellen Sie eine Dateisystem-Website

  1. Öffnen Sie Visual Studio oder Visual Studio Express for Web.

  2. Klicken Sie im Menü Datei auf Neue Website.

    Das Dialogfeld Neue Website wird angezeigt.

  3. Klicken Sie unter Installierte Vorlagen auf Visual Basic oder Visual C#, und wählen Sie dann Leere ASP.NET-Website aus.

  4. Wählen Sie im Feld Webspeicherort die Option Dateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie zum Beispiel den Ordnernamen C:\WebSites ein.

  5. Klicken Sie auf OK.

    Visual Studio erstellt ein Websiteprojekt, das eine Web.config-Datei, aber keine weiteren Seiten oder Dateien enthält.

  6. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und wählen Sie dann Hinzufügen und anschließend Neues Element hinzufügen.

  7. Wählen Sie Web Form aus, geben Sie der Seite den Namen "Default.aspx", und klicken Sie dann auf Hinzufügen.

    Visual Studio erstellt die Seite Default.aspx und öffnet sie in der Quellansicht.

Hinzufügen und Formatieren von Seitenelementen

In diesem Abschnitt wird ein Satz Seitenelemente bereitgestellt, die Sie mit dem Formatierungs- und Stiltools von Visual Studio ändern. Sie können diese Elemente kopieren und in eine Seite einfügen. Der Code enthält Abschnitte, die mit div-Elementen definiert werden. Hierzu gehören ein Banner, eine linke und eine rechte Randleiste, ein Abschnitt für den Hauptinhalt und eine Fußzeile. Diese einfachen Elemente enthalten Text, mit dem Sie arbeiten können, und Element-IDs. In einigen Fällen enthalten die Elemente CSS-Klassen, mit denen Sie bestimmte Elemente auf einer Seite formatieren können.

Bb398932.collapse_all(de-de,VS.110).gifHinzufügen von Seitenelementen

In der folgenden Prozedur kopieren Sie Seitenelemente, mit denen Sie arbeiten, mithilfe der CSS-Tools. Die Seitenelemente bestehen aus einem Banner, das Text und ein Suchfeld enthält, einer Fußzeile und drei Textabschnitten. Der Hauptinhalt der Seite befindet sich im letzten Textabschnitt.

So fügen Sie der Standardseite Seitenelemente hinzu

  1. Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu ihr.

  2. Wechseln Sie zur Quellansicht.

  3. Entfernen Sie im Abschnitt <form> das leere <div></div>-Tag-Paar, das standardmäßig erstellt wird.

  4. Fügen Sie nach dem <form>-Starttag folgenden Code ein:

    <div id="pagecontainer">
  <div id="banner">
    <h1>AdventureWorks Styling Page</h1>
    <h2>Making CSS Styling Easier in Design View</h2>
    <div id="search">Find:<input id="searchbox" type="text" />
      <input id="searchbutton" type="button" value="Go" />
   </div>
</div>
<div id="leftsidebar" class="column">
  <h3>Matters of the Web</h3>
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
  <h3>Matters of the Web</h3>
   <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
  <h2>Matters of the Web</h2>
  <p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
  <p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
  <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

    Hinweis

    Um die Lesbarkeit der Seite zu verbessern, klicken Sie im Menü Bearbeiten auf Dokument formatieren.

  5. Speichern Sie die Seite.

  6. Wechseln Sie in die Ansicht Entwurf, um die Standardformatierung anzuzeigen.

Anwenden von Stilen in der Entwurfsansicht

In der Ansicht Entwurf können Sie Stile auf Seitenelemente anwenden und die Ergebnisse sofort sehen. Sie müssen keine CSS-Datei erstellen und ändern und dann zu dieser Seite wechseln, um zu erkennen, ob der Stil Ihren Wünschen entspricht.

In der Designansicht haben Sie folgende Möglichkeiten, die Stile auf einzelne Elemente einer Seite anzuwenden:

  • Sie können Inlineformatvorlagen verwenden, die als style-Attribut der einzelnen Elemente angegeben werden. Diese Stilregeln können nur auf das entsprechende Element angewendet werden.

  • Sie können in einem <style>-Abschnitt im HTML-head-Element der Seite Stilregeln angeben. Diese Stilregeln können auf die Elemente der aktuellen Seite angewendet werden.

  • Schreiben Sie die Stilregeln in eine externe CSS-Datei. In diesem Fall können die Stilregeln auf alle Seiten der Website angewendet werden.

Für diesen Teil der exemplarischen Vorgehensweise definieren Sie die Formatierungs- und Stilregeln, die in den style-Abschnitt der Seite geschrieben werden. Später verschieben Sie die erstellten CSS-Informationen in ein externes Stylesheet.

Bb398932.collapse_all(de-de,VS.110).gifFormatieren eines Seitenbanners

Als erstes Element formatieren Sie den Bannerabschnitt, zu dem die Elemente zählen, die im <div ID="banner">-Tag eingeschlossen sind. In diesem Beispiel verwenden Sie das Dialogfeld Neuer Stil, um den Stil und die Position der Überschrift zu ändern. Außerdem legen Sie die Größe des Bannerbereichs fest und fügen eine Hintergrundfarbe hinzu.

So formatieren Sie den Bannertext

  1. Klicken Sie in der Ansicht Entwurf im Bannerabschnitt auf den Überschrifttext "AdventureWorks Styling Page".

    Beachten Sie, dass die Markierung über einen umschließenden blauen Rand und eine Registerkarte verfügt, die anzeigen, dass das h1-Element ausgewählt wurde.

  2. Klicken Sie auf der Symbolleiste Formatierung in der Liste Zielregel auf Neue Formatvorlage zuweisen. Wählen Sie alternativ im Menü Format die Option Neue Formatvorlage aus.

    Tipp

    Die Symbolleiste "Formatierung" ist standardmäßig aktiviert.Um sie zu aktivieren, wählen Sie im Menü Ansicht die Option Symbolleisten und dann Formatierung aus.

    Das Dialogfeld Neue Formatvorlage wird angezeigt.

  3. Klicken Sie in der Liste Auswahl auf h1, damit Sie einen Stil erstellen können, der für alle h1-Elemente gilt.

    Beachten Sie, dass in der Liste Definieren in die Option Aktuelle Seite ausgewählt ist. Aktuelle Seite gibt an, dass die Stilregel in einem style-Element auf der Seite erstellt wird, die Sie gerade bearbeiten.

  4. Wählen Sie in der Liste Schriftfamilie den Eintrag Impact oder eine andere Schriftart aus, die in der Regel für Banner verwendet wird.

    Eine Vorschau der Schriftart wird im Bereich Vorschau angezeigt.

  5. Geben Sie im Feld für font-size die Option xx-large ein, oder wählen Sie diese aus.

  6. Geben Sie im Feld font-variant die Option small-caps ein, oder wählen Sie diese aus.

  7. Klicken Sie auf OK.

  8. Um die erstellte Stilregel anzuzeigen, wechseln Sie in die Ansicht Quelle, und führen Sie einen Bildlauf zum style-Element durch, das sich innerhalb des head-Elements befindet.

    Es wird die CSS-Stilregel angezeigt, die für das h1-Element erstellt wurde.

  9. Gehen Sie folgendermaßen vor, um das h2-Element für das Banner auf ähnliche Weise zu formatieren:

    1. Positionieren Sie in der Entwurfsansicht den Mauszeiger in der Überschrift "Making CSS Styling Easier in Design View", bei der es sich um ein h2-Element handelt.

    2. Öffnen Sie, wie in Schritt 2, das Dialogfeld Neue Formatvorlage.

    3. Legen Sie im Dialogfeld Neue Formatvorlage für Auswahl den Wert h2 fest.

    4. Wählen Sie für font-family die Option Comic Sans MS und für font size die Option small aus.

    5. Klicken Sie auf OK.

Bb398932.collapse_all(de-de,VS.110).gifAuswählen von Seitenelementen

In Visual Studio gibt es mehrere Möglichkeiten, Elemente auf der Seite auszuwählen. Sie können die Direktauswahl von Tags verwenden, die sich am unteren Rand des Ansichtsbereichs Entwurf befindet. Wenn Sie die Einfügemarke an einer beliebigen Stelle auf einer Seite positionieren, wird von der Direktauswahl von Tags das diesem Bereich zugrunde liegende HTML angezeigt. Tags, in denen das aktuelle Tag enthalten ist, werden in der Leiste für die Direktauswahl von Tags links vom Tag angezeigt. Wenn sich die Einfügemarke z. B. in einer Tabellenzelle befindet, werden ein table-Tag und ein tr-Tag vor dem td-Tag angezeigt.

Wenn Sie den Mauszeiger über ein Tag in der Direktauswahl von Tags verschieben, wird ein Pfeil auf dem Tag angezeigt. Sie können auf diesen Pfeil klicken, um ein Tag und samt Inhalt oder nur den Inhalt des Tags auszuwählen.

Außerdem können Sie die Hierarchie von Elementen mit der ESC-Taste nach oben durchlaufen. Beispielsweise befindet sich das h1-Element im div-Element des Banners. Sie können das gesamte div-Element folgendermaßen auswählen: Klicken Sie auf das h1-Element, um es auszuwählen, und wählen Sie dann mithilfe der ESC-Taste das div-Element des Banners aus. Beim ersten Drücken von ESC wird das h1-Element hervorgehoben, und der Abstand und die Ränder des Elements werden angezeigt. Wenn Sie die ESC-Taste erneut drücken, wird das gesamte div-Element ausgewählt. Wenn das Element ausgewählt ist, zeigt das Tag div#banner an.

Anpassen der Größe des Banners und Positionieren seines Inhalts

Sie können die Größe und Position des Banners und seines Inhalts in der Entwurfsansicht mithilfe der Symbolleiste Formatierung anpassen. Die Stilregeln werden, wie auch die bisherigen Stilregeln, in die aktuelle Seite geschrieben.

Hinweis

Sie können einen bereits festgelegten Wert für die Größe eines Elements mit der STRG-Taste und den Pfeiltasten ändern.Wenn Sie beispielsweise die Breite des Banners durch Ziehen mit der Maus auf 785 Pixel festlegen, können Sie sie durch Drücken von STRG+NACH-LINKS auf 780 Pixel verringern.

So passen Sie die Größe des Banners an

  1. Wechseln Sie zur Ansicht Entwurf.

  2. Klicken Sie auf den h1-Text ("AdventureWorks Styling Page"), um in auszuwählen, und drücken Sie dann zweimal die ESC-TASTE. Mit dieser Aktion wird das umschließende Element ausgewählt, in diesem Fall das div-Element namens banner.

  3. Ziehen Sie den Ziehpunkt in der rechten unteren Ecke, um die Größe des div-Elements des Banners zu ändern.

    Beachten Sie, dass beim Ziehen die Werte für die Breite und die Höhe in einer QuickInfo angezeigt werden. Diese Werte werden auch in der linken unteren Ecke der Statusleiste am unteren Rand des Ansichtsfensters Entwurf angezeigt.

  4. Ändern Sie die Größe des Elements, bis es ungefähr 780 Pixel breit und 125 Pixel hoch ist.

  5. Um die erstellte Stilregel anzuzeigen, wechseln Sie in die Ansicht Teilen und führen einen Bildlauf zum style-Element durch.

    Für das div-Element des Banners wurde (unter Verwendung des #banner-Selektors) eine Stilregel erstellt.

  6. Wechseln Sie in die Entwurfsansicht.

  7. Stellen Sie sicher, dass das div-Element des Banners ausgewählt ist (im Tag-Navigator sollte weiterhin div#banner ausgewählt sein).

  8. Klicken Sie im Menü Format auf Rahmen und Schattierung.

    Das Dialogfeld Rahmen und Schattierung wird angezeigt.

    Klicken Sie auf die Registerkarte Schattierung, wählen Sie Hintergrundfarbe aus, und klicken Sie dann auf Weitere Farben.

    Das Dialogfeld Weitere Farben wird angezeigt.

  9. Wählen Sie eine Hintergrundfarbe für das Banner aus, und klicken Sie dann auf OK.

    In der geteilten Ansicht können Sie sehen, dass die #banner-Stilregel aktualisiert wird, um eine Einstellung für background-color einzuschließen.

  10. Um die Breite des Formulars an das Banner anzupassen, wählen Sie das form-Element aus. Ziehen Sie anschließend den Ziehpunkt auf der rechten Seite, um die Breite des Formulars auf 780 Pixel zu verringern.

Sie können auch Stilregeln zum Zentrieren des Texts in den Überschriften anwenden, indem Sie Abstandswerte festlegen.

So positionieren Sie die Überschriftelemente im Banner

  1. Wählen Sie in der Ansicht Entwurf das h1-Element des Banners aus.

  2. Klicken Sie im Menü Format auf Absatz.

    Das Dialogfeld Absatz wird angezeigt.

  3. Wählen Sie im Dialogfeld Absatz in der Dropdownliste Ausrichtung die Option Zentriert aus, und klicken Sie dann auf OK.

  4. Wählen Sie das h2-Element aus, und wiederholen Sie dann die Schritte 2 und 3.

Um das Banner zu vervollständigen, positionieren Sie das div-Element des Suchfelds und die zugehörigen Elemente mithilfe des Positionierungsrasters im Banner.

So positionieren Sie das div-Element des Suchfelds im Banner

  1. Wählen Sie in der Ansicht Entwurf das div-Element des Suchfelds (div#search) aus. (Dieses Element am oberen Rand der Seite enthält das Suchfeld.)

  2. Klicken Sie im Menü Format auf Position festlegen, und wählen Sie dann Absolut aus.

  3. Ziehen Sie das div#search-Element an seiner Registerkarte an eine Position innerhalb des Banners rechts neben den Textelementen.

    Beachten Sie, dass die Auswahl durch zwei blaue Linien erweitert wird, die den oberen und den linken Positionswert anzeigen.

  4. Lassen Sie das div-Element des Suchfelds los, wenn Sie es an der gewünschten Stelle positioniert und seine Größe wie gewünscht geändert haben.

Erstellen eines flexiblen dreispaltigen Layouts

Mit Visual Studio können Sie Stilregeln erstellen, indem Sie in der Designansicht Seitenelemente formatieren. Außerdem können Sie mit diesen Tools das Seitenlayout erstellen.

In dieser exemplarischen Vorgehensweise erstellen Sie ein dreispaltiges Layout mit der float-Stilregel. Zunächst legen Sie die Größe und Position der linken und rechten Randleiste fest. Anschließend passen Sie den Abstand im Hauptinhaltsabschnitt an, um ein flexibles dreispaltiges Layout zu erstellen.

Hinweis

Um die Elemente in der Entwurfsansicht ordnungsgemäß positioniert anzuzeigen, müssen Sie möglicherweise die Symbolleisten ausblenden.Durch das Ausblenden der Symbolleiste steht mehr Platz für die Anzeige der Position der Seitenelemente zur Verfügung.

Bb398932.collapse_all(de-de,VS.110).gifErstellen der Randleistenspalten

Sie können die Größe der Seitenspalten im Seitenlayout auf dieselbe Weise ändern, wie Sie die Größe des Banners geändert haben. Wenn Sie die Größe der Randleistenspalten ändern, sollten Sie nicht den Wert für die Höhe, sondern nur den für die Breite festlegen. Wenn Sie keinen Wert für die Höhe angeben, kann die Länge der Spalte bei Bedarf durch den Text vergrößert werden. Um nur die Breite des div-Elements festzulegen, können Sie die rechte Seite des div-Elements ziehen, anstatt die Ecke zu ziehen.

So ändern Sie die Größe und die Position der div-Elemente der linken und rechten Randleisten

  1. Wählen Sie in der geteilten Ansicht dasdiv-Element der linken Randleiste im HTML-Quellcode aus.

  2. Ziehen Sie den rechten Rand des div-Elements der linken Randleiste nach links, um seine Breite auf ungefähr 200 Pixel zu ändern.

    Beachten Sie, dass beim Ziehen der Wert für die Höhe in Klammern angezeigt wird. Dies bedeutet, dass dieser Wert nicht festgelegt wird.

  3. Klicken Sie im Menü Format auf Position.

    Das Dialogfeld Position wird angezeigt.

  4. Wählen Sie unter Umbruchart die Option Links aus, und klicken Sie dann auf OK.

  5. Wählen Sie das div-Element der rechten Randleiste aus, und ziehen Sie dessen rechten Rand, bis die Breite ungefähr 290 Pixel beträgt.

  6. Klicken Sie im Menü Format auf Position.

  7. Klicken Sie unter Umbruchart auf Rechts, und klicken Sie dann auf OK.

Bb398932.collapse_all(de-de,VS.110).gifErstellen der mittleren Spalte

Beim Erstellen der mittleren Spalte können Sie die Ränder und den Abstand festlegen, um den Inhalt von der linken und der rechten Spalte weg zu verschieben. Zunächst erstellen Sie einen linken Rahmen, anschließend verwenden Sie einen Abstand, um den Inhalt vom Rahmen weg zu verschieben.

So formatieren Sie die mittlere Spalte

  1. Wählen Sie in der Entwurfsansicht oder in der geteilten Ansicht das div-Element für den Hauptinhalt aus.

  2. Halten Sie die STRG-TASTE gedrückt, und ziehen Sie den rechten Rand des div-Elements des Hauptinhalts, um den rechten Rand auf 290 Pixel festzulegen. Ziehen Sie den linken Rand auf einen Wert von 210 Pixel.

    Alternativ können Sie die Quellansicht oder die geteilte Ansicht verwenden, um die folgende Stilregel zu erstellen:

    #maincontent
{
    margin-right: 290px;
    margin-left: 210px;
}

  3. Wählen Sie das div-Element des Hauptinhalts aus, und klicken Sie dann im Menü Format auf Rahmen und Schattierung.

    Das Dialogfeld Rahmen und Schattierung wird angezeigt.

  4. Wählen Sie unter Einstellung die Option Benutzerdefiniert aus.

  5. Wählen Sie in der Liste mit den Stilen die Option Durchgezogen aus, und klicken Sie unter Vorschau auf die Schaltfläche für den linken Rahmen und rechten Rahmen.

  6. Wählen Sie im Textfeld Breite den Wert 1 aus.

  7. Wählen Sie unter Abstand in den Feldern Links und Rechts den Wert 10 aus.

  8. Klicken Sie auf OK.

    Beachten Sie in der Quellansicht oder in der geteilten Ansicht, dass die Stildefinition für das #maincontent-Element aktualisiert wurde.

Bb398932.collapse_all(de-de,VS.110).gifAnpassen der Fußzeile

Wenn ein Benutzer die Größe der Seite ändert oder wenn die Seite auf einem großformatigen Monitor angezeigt wird, wird die Fußzeile möglicherweise am Rand einer der Spalten angezeigt. Um dieses Umbruchverhalten zu verhindern, können Sie die clear-Stilregel festlegen.

So passen Sie das div-Element der Fußzeile an

  1. Wählen Sie in der Ansicht Entwurf das div-Element der Fußzeile aus.

  2. Klicken Sie im Menü Format auf Neuer Stil.

    Das Dialogfeld Neue Formatvorlage wird angezeigt.

  3. Geben Sie im Feld Auswahl die Zeichenfolge #footer ein, oder wählen Sie diese aus.

  4. Klicken Sie in der Liste Kategorie auf Layout.

  5. Wählen Sie in der Liste clear die Option both aus.

  6. Klicken Sie auf OK.

Erstellen und Verwenden eines Stylesheets

Bis jetzt haben Sie Stildefinitionen erstellt, indem Sie Elemente direkt auf der Seite bearbeitet haben. Sie haben die Stildefinitionen im style-Element innerhalb des head-Elements der Seite gespeichert. Diese Stileinstellungen gelten nur für die aktuelle Seite.

Eine effiziente Methode zum Arbeiten mit CSS besteht darin, Stilregeln in ein Stylesheet einzufügen, auf das sich alle Ihre Webseiten beziehen können. Ein Stylesheet erstellen Sie mit denselben Techniken, die Sie zum Erstellen einer Seite verwenden.

So erstellen Sie ein Stylesheet und weisen es einer Seite zu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, klicken Sie auf Hinzufügen und dann auf Neues Element hinzufügen.

  2. Wählen Sie in der Liste der Vorlagen Stylesheet aus.

  3. Geben Sie im Feld Name den Namen Layout.css ein, und klicken Sie dann auf Hinzufügen.

    Der Editor wird mit einem neuen Stylesheet geöffnet, das eine leere body-Stilregel enthält.

  4. Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu dieser, und wechseln Sie in die Ansicht Entwurf.

  5. Klicken Sie im Menü Ansicht auf Formatvorlagen verwalten.

    Das Fenster Stile verwalten wird geöffnet. (Standardmäßig ist dieses Fenster angedockt.)

  6. Klicken Sie auf der Symbolleiste des Fensters Stile verwalten auf die Schaltfläche Stylesheet anfügen.

    Das Dialogfeld Stylesheet auswählen wird angezeigt.

  7. Wählen Sie die Datei Layout.css aus, und klicken Sie dann auf OK.

    Im Fenster Stile verwalten wird die neue Registerkarte Layout.css erstellt. Die Datei "Layout.css" wird an das aktuelle Dokument angefügt. In der Quellansicht oder in der geteilten Ansicht können Sie sehen, dass dem head-Element der Seite ein link-Element hinzugefügt wird, wie im Folgenden gezeigt:

    <link href="Layout.css" rel="stylesheet" type="text/css" />

    Dies veranschaulicht, wie Sie das Fenster Stile verwalten verwenden können, um einer Seite ein Stylesheet zuzuweisen. Es gibt andere Möglichkeiten, um einer Seite ein Stylesheet zuzuweisen. Beispielsweise können Sie auch ein Stylesheet aus dem Projektmappen-Explorer zum head-Element der Seite in der Quellansicht ziehen. Sie können auch die Datei aus dem Projektmappen-Explorer ziehen und sie an einer beliebigen Stelle der Seite in der Entwurfsansicht ablegen.

Bb398932.collapse_all(de-de,VS.110).gifVerschieben von Stilregeln von einer Seite in ein Stylesheet

Mithilfe des Bereichs Stile verwalten können Sie Stile von einer Seite auf eine andere verschieben oder anzeigen, wie Stilregeln auf eine Seite angewendet werden. Sie können jetzt die definierten Stilregeln zum neuen Stylesheet verschieben, das Sie erstellt haben.

So verschieben Sie Stilregeln mithilfe des Bereichs "Stile verwalten"

  1. Wechseln Sie zur Seite Default.aspx.

  2. Wechseln Sie in die Entwurfsansicht.

  3. Wählen Sie im Fenster Stile verwalten im Abschnitt Aktuelle Seite alle Stile aus. (Wenn Sie den ersten Stil auswählen und dann UMSCHALT+KLICK verwenden, um den letzten Stil auswählen, werden alle Stile ausgewählt).

  4. Ziehen Sie im Fenster Stile verwalten die ausgewählten Stile auf das Symbol body im Abschnitt Layout.css.

    Die Stilregeln werden aus der Seite Default.aspx entfernt und in die Datei Layout.css verschoben. Sie können dies überprüfen, indem Sie die Seite Default.aspx in der Ansicht Quelle anzeigen und im Editor auf die Seite Layout.css wechseln.

Außerdem können Sie mithilfe des Fensters Stile verwalten die Reihenfolge der Stile im Stylesheet ändern.

Nächste Schritte

Diese exemplarische Vorgehensweise hat die grundlegenden Techniken bei der Arbeit mit CSS-Stilen unter Verwendung der Benutzeroberfläche in Visual Studio veranschaulicht. Sie können auch die folgenden Methoden verwenden, um die Darstellung von Webseiten zu steuern:

Siehe auch

Weitere Ressourcen

Exemplarische Vorgehensweise: Erstellen einer einfachen Web Forms-Seite in Visual Studio

Website-Projekttypen in Visual Studio