Erstellen Sie das CSS-Stylesheet
Auf dieselbe Weise, wie wir eine separate Textdatei für den HTML-Code erstellt haben, erstellen Sie eine Textdatei für das CSS. Wenn Sie Visuals für diesen Vorgang benötigen, lesen Sie das erste Tutorial. So erstellen Sie Ihr CSS-Stylesheet in Notepad:
- Wählen Sie Datei> Neu in Notepad, um ein leeres Fenster zu erhalten
- Speichern Sie die Datei als CSS, indem Sie auf Datei <Speichern unter … klicken.
- Navigieren Sie zum Ordner my_website auf Ihrer Festplatte
- Ändern Sie "Dateityp:" in "Alle Dateien".
- Benennen Sie Ihre Datei "styles.css" (ohne Anführungszeichen) und klicken Sie auf Speichern
Verknüpfen Sie das CSS-Stylesheet mit Ihrem HTML-Code
Sobald Sie ein Stylesheet für Ihre Website haben, müssen Sie es der Webseite selbst zuordnen. Dazu verwenden Sie das Link-Tag. Platzieren Sie das folgende Link-Tag an einer beliebigen Stelle im
Tags Ihres Pets.htm-Dokuments:
03 von 10 Wenn Sie XHTML für verschiedene Browser schreiben, werden Sie lernen, dass sie alle unterschiedliche Ränder und Regeln für die Anzeige von Objekten haben. Um sicher zu gehen, dass Ihre Website in den meisten Browsern gleich aussieht, sollten Sie nicht zulassen, dass Ränder die Browserauswahl standardmäßig verwenden. Ich ziehe es vor, meine Seiten in der oberen linken Ecke zu beginnen, ohne den Text um zusätzliche Auffüllungen oder Ränder zu erweitern. Selbst wenn ich den Inhalt auffüllen möchte, stelle ich die Ränder auf Null, sodass ich mit der gleichen leeren Tafel beginne. Fügen Sie dazu Ihrem styles.css-Dokument Folgendes hinzu: Die Schriftart ist oft das erste, was Sie auf einer Webseite ändern möchten. Die Standardschriftart auf einer Webseite kann hässlich sein und liegt tatsächlich im Webbrowser selbst. Wenn Sie die Schriftart nicht definieren, wissen Sie wirklich nicht, wie Ihre Seite aussehen wird. Normalerweise ändern Sie die Schriftart für Absätze oder manchmal für das gesamte Dokument. Für diese Site definieren wir die Schriftart auf Kopf- und Absatzebene. Fügen Sie Ihrem styles.css-Dokument Folgendes hinzu: Ich habe mit 1em als Basisgröße für Absätze und Listenelemente begonnen und dann die Größe für meine Überschriften festgelegt. Ich erwarte nicht, eine Überschrift tiefer als h4 zu verwenden, aber wenn Sie vorhaben, möchten Sie diese auch stylen. Die Standardfarben für Links sind blau und lila für nicht besuchte bzw. besuchte Links. Dies ist zwar Standard, passt aber möglicherweise nicht zum Farbschema Ihrer Seiten. Ändern wir es also. Fügen Sie in Ihrer Datei styles.css Folgendes hinzu: Ich habe drei Link-Stile eingerichtet, den a: -Link als Standard, a: besucht für den Besuch, ich ändere die Farbe und a: hover. Mit einem: hover habe ich den Link eine Hintergrundfarbe erhalten und fett hervorheben, um zu betonen, dass es ein Link ist, auf den geklickt werden soll. Da wir den Navigationsbereich (id = "nav") zuerst in den HTML-Code einfügen, stylen wir ihn zuerst. Wir müssen angeben, wie breit es sein soll, und einen größeren Rand auf der rechten Seite einfügen, damit der Haupttext nicht anstößt. Ich habe auch eine Grenze darum gelegt. Fügen Sie Ihrem styles.css-Dokument das folgende CSS hinzu: Mit der Eigenschaft "list-style" wird die Liste innerhalb des Navigationsabschnitts so festgelegt, dass sie keine Aufzählungszeichen oder Zahlen enthält. Mit .footer wird der Copyright-Abschnitt kleiner und innerhalb des Abschnitts zentriert. Wenn Sie Ihren Hauptbereich mit absoluter Positionierung positionieren, können Sie sicher sein, dass er genau dort bleibt, wo er auf Ihrer Webseite bleiben soll. Ich habe meinen 800px breit gemacht, um größere Monitore aufzunehmen, aber wenn Sie einen kleineren Monitor haben, möchten Sie diesen vielleicht schmaler machen. Fügen Sie Folgendes in Ihr styles.css-Dokument ein: Da ich oben bereits die Absatzschriftart festgelegt habe, wollte ich jedem Absatz einen zusätzlichen "Kick" geben, um ihn besser hervorzuheben. Ich tat dies, indem ich oben einen Rand setzte, der den Absatz mehr als nur das Bild hervorhob. Fügen Sie Folgendes in Ihr styles.css-Dokument ein: Ich beschloss, es als Klasse "topline" zu machen, anstatt alle Absätze auf diese Weise zu definieren. Wenn ich beschließe, dass ich einen Absatz ohne obere gelbe Linie haben möchte, kann ich einfach die Klasse = "topline" im Absatz-Tag weglassen, und der obere Rand wird nicht angezeigt. Bilder haben normalerweise einen Rand. Dies ist nicht immer sichtbar, es sei denn, das Bild ist ein Link. Ich möchte jedoch gerne eine Klasse in meinem CSS-Stylesheet, die den Rand automatisch deaktiviert.Für dieses Stylesheet habe ich die Klasse "noborder" erstellt, und die meisten Bilder im Dokument sind Teil dieser Klasse. Der andere spezielle Teil dieser Bilder ist der Ort auf der Seite. Ich wollte, dass sie Teil des Absatzes sind, in dem sie sich befinden, ohne Tabellen zu verwenden, um sie auszurichten. Die einfachste Möglichkeit ist, die CSS-Eigenschaft float zu verwenden. Fügen Sie Folgendes in Ihr styles.css-Dokument ein: Wie Sie sehen, gibt es auch Randeigenschaften für die Bilder, um sicherzustellen, dass sie nicht mit dem in den Absätzen nebenstehenden Text mit Float-Effekt zerschlagen werden. Nachdem Sie Ihr CSS gespeichert haben, können Sie die pets.htm-Seite in Ihrem Webbrowser neu laden. Ihre Seite sollte der in diesem Bild gezeigten ähneln. Die Bilder werden ausgerichtet und die Navigation befindet sich auf der linken Seite der Seite. Folgen Sie diesen Schritten für alle Ihre internen Seiten für diese Site. Sie möchten für jede Seite in Ihrer Navigation eine Seite haben. Korrigieren Sie die Seitenränder
Ändern der Schriftart auf der Seite
Machen Sie Ihre Links interessanter
Gestaltung des Navigationsbereichs
Positionierung des Hauptteils
Gestalten Sie Ihre Absätze
Bilder gestalten
Sehen Sie sich jetzt Ihre abgeschlossene Seite an
