Exemplarische Vorgehensweise: Erstellen und Ändern einer CSS-Datei
Aktualisiert: November 2007
In dieser exemplarischen Vorgehensweise werden die CSS (Cascading Stylesheet)-Features in Visual Studio 2008 vorgestellt. Sie erhalten eine Anleitung zum Erstellen eines dreispaltigen Seitenlayouts. Dabei werden die grundlegenden Techniken zum Erstellen einer neuen Webseite und eines neuen Stylesheets veranschaulicht.
In dieser exemplarischen Vorgehensweise werden die folgenden Aufgaben veranschaulicht:
Erstellen einer Dateisystem-Website
Anpassen der Website durch Verwenden der CSS-orientierten Features
Erstellen eines dreispaltigen Seitenlayouts mit CSS
Vorbereitungsmaßnahmen
Zum Durchführen der exemplarischen Vorgehensweise benötigen Sie Folgendes:
Visual Studio 2008 oder Visual Web Developer 2008 Express Edition. Informationen zum Herunterladen finden Sie auf der Website .NET Framework Developer Center.
.NET Framework, Version 3.5
Erstellen einer Website
In diesem Teil der exemplarischen Vorgehensweise können Sie eine Website erstellen und dieser eine Seite hinzufügen. Im nächsten Abschnitt können Sie eine CSS-Datei hinzufügen und die Seite anschließend in einem Webbrowser aufrufen.
Wenn Sie bereits eine Website erstellt haben (z. B., indem Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer ausgeführt haben), können Sie diese Website verwenden und mit "Hinzufügen und Formatieren von Seitenelementen" weiter unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website, indem Sie folgende Schritte ausführen.
So erstellen Sie eine neue Dateisystem-Website
Klicken Sie in Visual Web Developer im Menü Datei auf Neue Website.
Klicken Sie im Feld Neue Website unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.
Klicken Sie im Feld Speicherort auf Dateisystem, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten Ihrer Website speichern möchten.
Geben Sie beispielsweise den folgenden Ordnernamen ein: C:\CSSWebsite.
Klicken Sie im Listenfeld Sprache auf Visual Basic oder Visual C#, und klicken Sie dann auf OK.
.gif "Hinweis")
Hinweis:Die gewählte Programmiersprache wird zur Standardsprache für die Website. Sie können jedoch die Programmiersprache für jede Seite einzeln festlegen.
Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.
Hinzufügen und Formatieren von Seitenelementen
Damit Sie sich auf die Formatier- und Stiltools konzentrieren können und sich nicht mit dem Erstellen der zu formatierenden Elemente beschäftigen müssen, wird in diesem Abschnitt ein Satz von Seitenelementen bereitgestellt. 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.
Hinzufügen von Seitenelementen
In der folgenden Prozedur kopieren Sie Seitenelemente, mit denen Sie arbeiten können, indem Sie die CSS-Tools verwenden. 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
Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu ihr.
Hinweis:Sie können jede Seite verwenden, die auf der Website verfügbar ist.
Wechseln Sie zur Quellansicht.
Fügen Sie nach dem <form>-Tag 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>Speichern Sie die Seite.
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 nicht zuerst das CSS schreiben und dann auf die Seite wechseln, um zu erkennen, ob der Stil Ihren Wünschen entspricht.
In der Ansicht Entwurf haben Sie mehrere Möglichkeiten, die Stile auf einzelne Elemente einer Seite anzuwenden. Sie können Inlinestile verwenden, die als style-Attribut der einzelnen Elemente angegeben werden. Diese Stilregeln können nur auf das entsprechende Element angewendet werden.
Sie können Stilregeln in einem style-Element im HTML-head-Element der Seite angeben. Diese Stilregeln können auf die Elemente der aktuellen Seite angewendet werden. Schließlich können Sie Stilregeln in einer externen CSS-Datei angeben. In diesem Fall können die Stilregeln auf allen Seiten der Website angewendet werden.
In dieser exemplarischen Vorgehensweise geben Sie die Formatier- und Stilinformationen im style-Elementabschnitt der Seite und als Inlinestil an. Später können Sie die CSS-Informationen in ein externes Stylesheet verschieben, um andere Features in Visual Studio 2008 zu verwenden.
Formatieren 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 die Symbolleiste Stilanwendung, 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
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.
Klicken Sie auf der Symbolleiste Stilanwendung in der Liste Zielregel auf Neue Formatvorlage zuweisen.
Das Dialogfeld Neue Formatvorlage wird angezeigt.
Die Option Stilanwendung ist standardmäßig auf Manuell festgelegt, deshalb wenden Sie den Stil manuell an.
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. Dadurch wird die Stilregel in einem style-Element auf der aktuellen Seite erstellt.
Wählen Sie in der Liste font-family eine dicke Schriftart wie Impact aus.
Geben Sie im Feld für font-size die Option xx-large ein, oder wählen Sie diese aus.
Geben Sie im Feld font-variant die Option small-caps ein, oder wählen Sie diese aus.
Klicken Sie auf OK.
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.
Gehen Sie folgendermaßen vor, um das h2-Element für das Banner auf ähnliche Weise zu formatieren:
Öffnen Sie, wie in Schritt 2, das Dialogfeld Neue Formatvorlage.
Wählen Sie das h2-Element aus.
Legen Sie im Dialogfeld Neue Formatvorlage für Auswahl den Wert h2 fest.
Wählen Sie für font-family die Option Comic Sans MS und für font size die Option small aus.
Auswählen von Seitenelementen
In Visual Studio 2008 gibt es mehrere Möglichkeiten, Elemente auf der Seite auszuwählen. Sie können die Direktauswahl von Tags verwenden, die sich im unteren Abschnitt 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 beispielsweise in einer Tabellenzelle befindet, wird in der Leiste Direktauswahl von Tags das td-Tag angezeigt, vor dem ein tr-Tag für die Tabellenzeile sowie ein table-Tag für die Tabelle angezeigt werden.
Wenn Sie den Mauszeiger auf ein Tag in der Direktauswahl von Tags verschieben, wird der Inhalt des Tags in der Ansicht Entwurf hervorgehoben, und auf dem Tag wird ein Pfeil angezeigt. Sie können auf diesen Pfeil klicken, um ein Tag und seinen Inhalt auszuwählen, nur den Inhalt des Tags auszuwählen, das Tag zu bearbeiten oder zu entfernen, das Dialogfeld Direkt-Editor für Tags zu öffnen oder für ein Element das Dialogfeld Eigenschaften zu öffnen.
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. Beachten Sie, dass beim ersten Drücken der ESC-Taste das h1-Element hervorgehoben wird und der Abstand und die Ränder des Elements angezeigt werden. (Da Sie diese nicht festgelegt wurden, werden die Standardeinstellungen verwendet.) 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 Ansicht Entwurf mithilfe der Symbolleiste Stilanwendung 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 die Breite des Banners mit der Maus beispielsweise auf 785 Pixel einstellen, können Sie sie mit der Tastenkombination STRG + NACH-LINKS-TASTE auf 780 Pixel verringern. |
So passen Sie die Größe des Banners an
Wechseln Sie zur Ansicht Entwurf.
Klicken Sie auf den Text des h1-Tags ("AdventureWorks Styling Page"), um ihn auszuwählen, und drücken Sie dann zweimal die ESC-Taste, um das umschließende Element (das div-Element des Banners) auszuwählen.
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. Außerdem werden diese Werte in der Statusleiste im unteren Abschnitt des Ansichtsfensters Entwurf angezeigt.
Ändern Sie die Größe des Elements, bis es ungefähr 780 Pixel breit und 100 Pixel hoch ist.
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.
Stellen Sie in der Ansicht Entwurf sicher, dass das div-Element des Banners ausgewählt ist (im Tag-Navigator sollte weiterhin div#banner ausgewählt sein).
Klicken Sie im Menü Format auf Hintergrundfarbe.
Die Farbauswahl wird angezeigt.
Wählen Sie eine Farbe für das Banner aus, und klicken Sie dann auf OK.
Sie können auch Stilregeln anwenden, die den Text der Überschriften zentrieren. Legen Sie hierfür die Abstandswerte fest.
So positionieren Sie die Überschriftelemente im Banner
Wählen Sie in der Ansicht Entwurf das div-Element des Banners aus.
Klicken Sie im Menü Format auf Absatz.
Das Dialogfeld Absatz wird angezeigt.
Da das h1-Element genauso breit wie das div-Element des Banners ist, können Sie den Text innerhalb des h1-Elements positionieren, um ihn im Bannerbereich zu zentrieren.
Wählen Sie im Dialogfeld Absatz in der Dropdownliste Ausrichtung die Option Zentriert aus, und klicken Sie dann auf OK.
Wählen Sie das h2-Element aus, und wiederholen Sie dann die Schritte 2 und 3.
Wählen Sie das div-Element des Banners aus.
Zeigen Sie bei gedrückter Umschalttaste mit dem Mauszeiger auf den Rand des div-Elements, bis der aktuelle Abstandswert in einer QuickInfo angezeigt wird.
Ziehen Sie den Abstandsrand, bis er den oberen Rahmen des div-Elements berührt.
Ziehen Sie, bis die beiden Textelemente zentriert sind (ungefähr 30 Pixel).
Um das Banner zu vervollständigen, müssen Sie das div-Element des Suchfelds und die zugehörigen Elemente im Banner positionieren. Hierfür können Sie ein weiteres Feature von Visual Studio 2008 verwenden: das Positionierungsraster.
So positionieren Sie das div-Element des Suchfelds im Banner
Wählen Sie in der Ansicht Entwurf das div-Element des Suchfelds (div#search) aus.
Klicken Sie im Menü Format auf Position festlegen, und wählen Sie dann Absolut aus.
Ziehen Sie das div-Element des Suchfelds an seinem Registerkarte (beschriftet mit div#search) 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.
Lassen Sie das div-Element des Suchfelds los, wenn Sie es an der gewünschten Stelle positioniert haben.
Erstellen eines flexiblen dreispaltigen Layouts
Mit Visual Web Developer können Sie Stilregeln erstellen, indem Sie in der Ansicht Entwurf 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 Randleisten fest, anschließend können Sie den Abstand des Abschnitts für den Hauptinhalt anpassen, um ein flexibles dreispaltiges Layout zu erstellen.
| Hinweis: |
|---|
Um die Elemente in der Ansicht Entwurf ordnungsgemäß positioniert anzuzeigen, müssen Sie möglicherweise die Symbolleiste ausblenden. Dadurch steht mehr Platz zur Verfügung, um die Position der Seitenelemente anzuzeigen. |
Erstellen 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. Beim Ändern der Größe der Seitenrandspalten sollten Sie nicht den Wert für die Höhe, sondern nur den für die Breite festlegen, sodass die Länge der Spalte bei Bedarf durch den Text vergrößert werden kann. Um nur die Breite des div-Elements festzulegen, können Sie die rechte Seite des div-Elements verschieben, anstatt dafür wie im vorherigen Beispiel auf die Ecke des div-Elements zu klicken.
So ändern Sie die Größe und die Position der div-Elemente der linken und rechten Randleisten
Wählen Sie in der Ansicht Entwurf das div-Element der linken Randleiste aus. (Sie können hierfür im Tag-Navigator div.column#leftsidebar auswählen.)
Ziehen Sie den rechten Rand des div-Elements der linken Randleiste, um die Breite des Elements 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.
Klicken Sie im Menü Format auf Position.
Das Dialogfeld Position wird angezeigt.
Wählen Sie unter Umbruchart die Option Links aus, und klicken Sie dann auf OK.
Wählen Sie das div-Element der rechten Randleiste aus, und ziehen Sie dessen rechten Rand, bis die Breite ungefähr 250 Pixel beträgt.
Klicken Sie im Menü Format auf Position.
Klicken Sie unter Umbruchart auf Rechts, und klicken Sie dann auf OK.
Erstellen 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, und anschließend verwenden Sie den Abstand, um den Inhalt vom Rahmen weg zu verschieben.
So formatieren Sie die mittlere Spalte
Wählen Sie in der Ansicht Entwurf das div-Element des Hauptinhalts aus.
Ziehen Sie bei gedrückter STRG-Taste den rechten Rand des div-Elements des Hauptinhalts, und legen Sie ihn auf 260 Pixel fest. Ziehen Sie den linken Rand auf einen Wert von 210 Pixeln.
Wählen Sie bei ausgewähltem div-Element des Hauptinhalts im Menü Format die Option Rahmen und Schattierung aus.
Das Dialogfeld Rahmen und Schattierung wird angezeigt.
Wählen Sie unter Einstellungen die Option Benutzerdefiniert aus.
Wählen Sie in der Liste Formatvorlage die Option Durchgezogen aus, und klicken Sie unter Vorschau auf die Schaltfläche für den linken Rahmen.
Geben Sie im Textfeld Breite den Wert 1px ein.
Geben Sie unter Textabstand im Feld Links den Wert 10px ein.
Klicken Sie auf OK.
Anpassen der Fußzeile
Wenn ein Benutzer die Größe der Seite ändert, oder wenn die Seite auf einem großformatigen Monitor angezeigt wird, kann die Fußzeile möglicherweise umgebrochen und am Rand einer der Spalten angezeigt werden. Um dies zu verhindern, können Sie die Clear-Stilregel festlegen.
So passen Sie das div-Element der Fußzeile an
Wählen Sie in der Ansicht Entwurf das div-Element der Fußzeile aus.
Klicken Sie im Menü Format auf Neuer Stil.
Das Dialogfeld Neue Formatvorlage wird angezeigt.
Geben Sie im Feld Auswahl die Zeichenfolge #footer ein, oder wählen Sie diese aus.
Klicken Sie in der Liste Kategorie auf Layout.
Wählen Sie in der Liste clear die Option both aus.
Klicken Sie auf OK.
Erstellen und Verwenden eines Stylesheets
Eine effiziente Möglichkeit der Arbeit mit CSS besteht darin, Stilregeln in einem Stylesheet zu speichern. Anschließend kann von allen Seiten auf die Stile verwiesen werden, sodass die Seiten konsistent dargestellt werden.
Sie können Cascading Stylesheets auch in den ASP.NET-Designs verwenden. Um ein Stylesheet in einem Design zu verwenden, müssen Sie es im richtigen Ordner speichern. Weitere Informationen zu Designs und CSS finden Sie unter Übersicht über ASP.NET-Designs und ASP.NET-Skins.
Ein Stylesheet erstellen Sie mit denselben Techniken, die Sie zum Erstellen einer neuen Seite verwenden.
So erstellen Sie ein Stylesheet und weisen es einer Seite zu
Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Website, und klicken Sie dann auf Neues Element hinzufügen.
Wählen Sie unter Von Visual Studio installierte Vorlagen die Option Stylesheet aus.
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.
Öffnen Sie die Seite Default.aspx, oder wechseln Sie zu dieser, und wechseln Sie in die Ansicht Entwurf.
Klicken Sie im Menü Format auf CSS-Stile und dann auf Stile verwalten.
Das Fenster Stile verwalten wird geöffnet. (Standardmäßig ist dieses Fenster angedockt.)
Klicken Sie auf Stylesheet anfügen.
Das Dialogfeld Stylesheet auswählen wird angezeigt.
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.
Sie können einer Seite ein Stylesheet auf mehrere Weisen zuweisen. Die einfachste Methode besteht darin, die Datei aus dem Projektmappen-Explorer in der Ansicht Quelle auf das head-Element der Seite zu ziehen.
Verschieben 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.
Bisher wurden die von Ihnen erstellten Stilregeln in dieser exemplarischen Vorgehensweise im style-Element der Seite Default.aspx gespeichert. Sie können diese Stilregeln in das von Ihnen neu erstellte Stylesheet verschieben.
So verschieben Sie Stilregeln mithilfe des Bereichs "Stile verwalten"
Wählen Sie im Fenster Stile verwalten auf der Registerkarte Aktuelle Seite alle Stile aus. (Sie können sie auswählen, indem Sie beim Klicken die Umschalttaste gedrückt halten.)
Ziehen Sie die ausgewählten Stile auf die Registerkarte Layout.css des Fensters Stile verwalten.
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. Sie können beispielsweise die Stilregel für das Suchfeld mit der Maus direkt unter die Stilregel für das Banner ziehen.
Nächste Schritte
Diese exemplarische Vorgehensweise hat die grundlegenden Techniken bei der Arbeit mit CSS-Stilen mithilfe der Benutzeroberfläche in Visual Studio 2008 veranschaulicht. Sie können auch die folgenden Methoden zur Steuerung der Darstellung von Webseiten verwenden:
Arbeiten mit einem vorhandenen Stylesheet. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Arbeiten mit einer vorhandenen CSS-Datei.
Programmgesteuertes Festlegen von Formatinformationen für HTML-Elemente. Weitere Informationen finden Sie unter Gewusst wie: Programmgesteuertes Festlegen der Eigenschaften von HTML-Serversteuerelementen.
Erstellen von Designs, mit denen nicht nur CSS-Stile, sondern fast alle Eigenschaften von ASP.NET-Steuerelementen festgelegt werden können. Ausführliche Informationen finden Sie unter Übersicht über ASP.NET-Designs und ASP.NET-Skins.
Siehe auch
Aufgaben
Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer