Erstellen Sie das CSS-Stylesheet
Auf die gleiche Weise haben wir eine separate Textdatei für die HTML, erstellen Sie eine Textdatei für das CSS. Wenn Sie Visuals für diesen Prozess benötigen, lesen Sie bitte das erste Tutorial. Hier sind die Schritte zum Erstellen Ihres CSS-Stylesheets in Notepad:
- Wählen Datei > Neu in Notepad, um ein leeres Fenster zu erhalten
- Speichern Sie die Datei als CSS, indem Sie auf klicken Datei < Speichern unter...
- Navigieren Sie zum Ordner my_website auf Ihrer Festplatte
- Ändere das "Speichern unter:" bis "Alle Dateien"
- Benennen Sie Ihre Datei "stile.css" (lassen Sie die Anführungszeichen weg) und klicken Sie auf speichern
Verknüpfen Sie das CSS-Stylesheet mit Ihrem HTML
Sobald Sie eine Stylesheet für Ihre Website müssen Sie sie der Webseite selbst zuordnen. Dazu verwenden Sie das Link-Tag. Platzieren Sie das folgende Link-Tag an einer beliebigen Stelle innerhalb der.
Korrigieren Sie die Seitenränder
Wenn du schreibst XHTML Bei verschiedenen Browsern werden Sie lernen, dass sie alle unterschiedliche Ränder und Regeln für die Anzeige von Dingen zu haben scheinen. Der beste Weg, um sicherzustellen, dass Ihre Website in den meisten Browsern gleich aussieht, besteht darin, nicht zuzulassen, dass Dinge wie Ränder standardmäßig der Browserauswahl zugewiesen werden.
Wir bevorzugen es, Seiten in der oberen linken Ecke zu beginnen, ohne zusätzlichen Abstand oder Rand um den Text herum. Selbst wenn wir den Inhalt auffüllen, setzen wir die Ränder auf Null, sodass wir mit derselben leeren Tafel beginnen. Fügen Sie dazu Ihrem Styles.css-Dokument Folgendes hinzu:
html, Körper {
Rand: 0px;
Füllung: 0px;
Rahmen: 0px;
links: 0px;
oben: 0px;
}
Ändern der Schriftart auf der Seite
Die Schriftart ist oft das Erste, was Sie auf einer Webseite ändern möchten. Der Standard Schriftart auf einer Webseite kann hässlich sein und liegt tatsächlich am Webbrowser selbst. Wenn Sie also die Schriftart nicht definieren, wissen Sie wirklich nicht, wie Ihre Seite aussehen wird.
Normalerweise ändern Sie die Schriftart in Absätzen oder manchmal im gesamten Dokument selbst. Für diese Site definieren wir die Schriftart auf Kopf- und Absatzebene. Fügen Sie Ihrem style.css-Dokument Folgendes hinzu:
p, li {
Schriftart: 1em Arial, Helvetica, serifenlos;
}
h1 {
Schriftart: 2em Arial, Helvetica, serifenlos;
}
h2 {
Schriftart: 1.5em Arial, Helvetica, serifenlos;
}
h3 {
Schriftart: 1.25em Arial, Helvetica, serifenlos;
}
Wir haben mit 1em als Basisgröße für Absätze und Listenelemente begonnen und dann die Größe für meine Überschriften festgelegt. Wir erwarten nicht, dass eine Überschrift tiefer als h4 verwendet wird, aber wenn Sie dies planen, möchten Sie sie auch stylen.
Machen Sie Ihre Links interessanter
Die Standardfarben für Links sind Blau und Violett für nicht besuchte bzw. besuchte Links. Dies ist zwar Standard, passt aber möglicherweise nicht zum Farbschema Ihrer Seiten, also ändern wir es. Fügen Sie in Ihrer Datei style.css Folgendes hinzu:
eine Verbindung {
Schriftfamilie: Arial, Helvetica, serifenlos;
Farbe: #FF9900;
Textdekoration: unterstreichen;
}
a: besucht {
Farbe: #FFCC66;
}
a: schweben {
Hintergrund: #FFFFCC;
Schriftdicke: fett;
}
Wir haben drei Linkstile eingerichtet, a: Link als Standard, a: besucht wenn er besucht wurde, wir ändern die Farbe und a: Hover. Mit einem: Hover erhalten wir eine Hintergrundfarbe für den Link und werden fett gedruckt, um hervorzuheben, dass es sich um einen Link handelt, der angeklickt werden muss.
Den Navigationsbereich gestalten
Da wir den Navigationsabschnitt (id="nav") an erster Stelle im HTML-Code platzieren, lassen Sie uns ihn zuerst stylen. Wir müssen angeben, wie breit es sein soll, und auf der rechten Seite einen breiteren Rand setzen, damit der Haupttext nicht daran stößt. wir setzen auch einen Rand darum.
Fügen Sie Ihrem style.css-Dokument das folgende CSS hinzu:
#nav {
Breite: 225px;
Rand rechts: 15px;
Rand: mittelfest #000000;
}
#navli {
Listenstil: keine;
}
.Fusszeile {
Schriftgröße: .75em;
Lösche beide;
Breite: 100 %;
Textausrichtung: Mitte;
}
Die Eigenschaft list-style richtet die Liste im Navigationsbereich so ein, dass sie keine Aufzählungszeichen oder Zahlen enthält, und die .footer formatiert den Copyright-Bereich so, dass er kleiner und innerhalb des Bereichs zentriert ist.
Positionierung des Hauptbereichs
Indem Sie Ihren Hauptbereich mit absoluter Positionierung positionieren, können Sie sicher sein, dass er genau dort bleibt, wo Sie ihn auf Ihrer Webseite haben möchten. Wir haben es 800px breit gemacht, um es unterzubringen größere Monitore, aber wenn Sie einen kleineren Monitor haben, möchten Sie diesen vielleicht schmaler machen.
Fügen Sie Folgendes in Ihr style.css-Dokument ein:
#haupt {
Breite: 800px;
oben: 0px;
Position: absolut;
links: 250px;
}
Gestalten Sie Ihre Absätze
Da ich oben bereits die Absatzschrift eingestellt habe, wollte ich jedem Absatz einen kleinen Extra-Kick verpassen, um ihn besser hervorzuheben. Ich habe dies getan, indem ich oben einen Rahmen gesetzt habe, der den Absatz mehr hervorhebt als nur das Bild allein.
Fügen Sie Folgendes in Ihr style.css-Dokument ein:
.obersten Zeile {
Rand-Oberseite: dicker solider #FFCC00;
}
Wir haben uns entschieden, dies als eine Klasse namens "topline" zu tun, anstatt nur alle Absätze auf diese Weise zu definieren. Wenn wir also entscheiden, dass wir einen Absatz ohne obere gelbe Linie haben möchten, können wir das class="topline" im Paragraph-Tag einfach weglassen und es hat keinen oberen Rand.
Die Bilder gestalten
Bilder haben normalerweise einen Rahmen. Dies ist nicht immer sichtbar, es sei denn, das Bild ist ein Link, aber wir möchten eine Klasse innerhalb der CSS-Stylesheet, das den Rahmen automatisch ausschaltet. Für dieses Stylesheet haben wir die Klasse "noborder" erstellt, und die meisten Bilder im Dokument sind Teil dieser Klasse.
Der andere besondere Teil dieser Bilder ist ihre Position auf der Seite. Wir wollten, dass sie Teil des Absatzes sind, in dem sie sich befinden, ohne Tabellen zu verwenden, um sie auszurichten. Der einfachste Weg, dies zu tun, besteht darin, die CSS-Eigenschaft float zu verwenden.
Fügen Sie Folgendes in Ihr style.css-Dokument ein:
#hauptbild {
Schwimmer: links;
Rand rechts: 5px;
Rand-unten: 15px;
}
.keine Grenze {
Rahmen: 0px keine;
}
Wie Sie sehen können, gibt es auch Randeigenschaften für die Bilder, um sicherzustellen, dass sie nicht mit dem schwebenden Text neben ihnen in den Absätzen zusammenstoßen.
Sehen Sie sich jetzt Ihre fertige Seite an
Nachdem Sie Ihr CSS gespeichert haben, können Sie die Seite pets.htm in Ihrem Webbrowser neu laden. Ihre Seite sollte der in diesem Bild gezeigten ähnlich aussehen, mit ausgerichteten Bildern und korrekter Navigation auf der linken Seite der Seite.
Befolgen Sie dieselben Schritte für alle Ihre internen Seiten dieser Site. Sie möchten für jede Seite in Ihrer Navigation eine Seite haben.