externe Stylesheets
Kaufen Unsere Bücher
Die CSS Sie verwendet haben bisher wurde im HEAD-Abschnitt Ihrer HTML-Code platziert. Ein besserer Ort, um alle Ihre CSS zu setzen, ist jedoch in einer externen Datei. (Damit meinen wir eine separate Datei.)
In einer neuen Textdatei folgendes eingeben (klicken Sie auf Datei> Neu im Editor, wenn Sie mit dieser):
Das wird unser externes Stylesheet sein. Es hat nur eine Klasse eingerichtet, eine Pseudo-Klasse für den Hover-Stil. Unterstreichungen werden ausgeschaltet, wenn die Maus über den Link, und die Textfarbe färbt sich rot.
Die Hauptsache ist hier zu bemerken ist, dass wir keine Öffnen und Schließen STYLE-Tags benötigen: Sie gerade Ihre Selektoren und geschweiften Klammern geben.
Klicken Sie auf Datei> Speichern in Notepad Ihre Arbeit zu speichern. Wenn das Dialogfeld angezeigt wird, zu Ihrem HTML-Ordner navigieren und einen neuen Ordner erstellen CSS genannt. Bewegen Sie innerhalb dieses Ordners. Im Feld Dateiname geben Sie styles.css. Stellen Sie sicher, dass Dateityp Alle Dateien lesen. wenn Sie Windows verwenden. Nachdem Sie Ihr neues Dokument, Ihr Explorer-Fenster gespeichert haben sollte wie folgt aussehen:
Wenn Sie auf einen Ordner, um Ihre HTML-Ordner gehen sollten Sie dies haben:
So dass eine Web-Seite unseren neuen externen Stylesheet sehen kann, müssen Sie einen Code in dem HEAD-Abschnitt hinzuzufügen.
Öffnen Sie Ihre about.html Code. Fügen Sie den folgenden im HEAD-Bereich:
Der Code sollte wie folgt aussehen:
Um eine Verknüpfung zu einem externen Stylesheet, dann beginnen Sie mit dem Wort LINK, nach einer Link spitzer Klammer. Die anderen drei Attribute sind diese:
Die REL steht für Beziehung, die Beziehung zwischen dieser about.html Datei Bedeutung und das Dokument, das Sie gehen zu zeigen. REL können viele andere Werte annehmen, aber nur Sheet wird häufig verwendet.
Die TYPE bezieht sich auf etwas ein MIME-Typ bezeichnet. Für Stylesheets, müssen Sie den Wert „text / css“.
Das letzte Attribut ist HREF. Dies ist der Pfad zu Ihrer CSS-Datei. Es wird in genau der gleichen Weise wie für Hyperlinks verwendet. Notieren Sie den Pfad für uns:
Der Link ist in der about.html Seite. Die Lage des Sheet ist ein Ordner auf, damit die zwei Punkte und der Schrägstrich, durch den Ordnernamen css gefolgt. Wenn unser Stylesheet im selben Ordner wie die about.html Seite war, dass wir dies nur getan haben könnte:
Aber speichern Sie Ihre Arbeit und Ihre about.html Seite in Ihrem Browser laden. Bewegen Sie die Maus über den Hyperlink. Wenn alles gut gegangen ist, dann sollte es rot, und die unterstrichenen verschwinden. Wenn es nicht, stellen Sie sicher, dass Ihre Datei Referenzierung ist OK, und dass Sie Ihr Stylesheet in der richtigen Stelle.
Im nächsten Abschnitt erfahren Sie, wie Sie eine HTML-Liste in eine Navigationsleiste drehen.