CSS3 unterstützt externen Stylesheets.

Diese Technik ermöglicht es Ihnen, ein Stylesheet als separates Dokument zu definieren und importieren Sie es in Ihre Web-Seiten. Um zu sehen, warum dies attraktiv sein könnte, werfen Sie einen Blick auf das Beispiel.

Wenn man sich den Code für externalStyle.html, Sie werden überrascht sein, überhaupt keine offensichtliche Art Informationen zu sehen!

Style
Diese Seite hat Stile festlegen, für Absätze, Körper und Kopf 1.
Die Stile werden in einem externen Stylesheet definiert.

Wo man normalerweise Style-Tags sehen (im Header), gibt es keinen Stil. Stattdessen sehen Sie eine -Tag. Dieser spezielle Tag wird verwendet, um das aktuelle Dokument mit einem anderen Dokument zu verbinden.

Wie die externe Stil zu definieren

Wenn Sie einen externen Stil verwenden, werden die Stilelemente nicht in den Seitenkopf eingebettet, sondern in einem völlig separaten Dokument.

In diesem Fall wird die Seite in einer speziellen Datei verbunden aufgerufen myStyle.css. Diese Datei enthält alle CSS-Regeln:

/ * MyStyle.css * / body {background-color: # 333300-color: # FFFFFF-} h1 {color: # FFFF33-text-align: center-font: italic 200% Fantasy-} p {background-color: # FFFF33-color: # 333300-text-align: right; border: 3px Nut # FFFF33-}

Das Stylesheet sieht aus wie eine Seite-Level-Stil, mit Ausnahme von ein paar wichtige Unterschiede:

• Die Stylesheet-Regeln werden in einer separaten Datei enthalten. Der Stil ist nicht mehr Teil der HTML-Seite, sondern ist eine völlig separate Datei auf dem Server gespeichert. CSS-Dateien in der Regel mit dem Ende .css Erweiterung.

• Es gibt keine Tags. Diese sind nicht erforderlich, da der Stil ist nicht mehr in HTML eingebettet.

• Der Code beginnt mit einem Kommentar. Das / * * / Paar gibt einen Kommentar in CSS. Ehrlich gesagt, können Sie Kommentare in CSS auf der Seite Ebene setzen. Externe CSS-Dateien haben häufig Kommentare in ihnen.

• Der Stil-Dokument hat keine HTML. CSS-Dokumente enthalten nichts anderes als CSS. Dies kommt dem Ziel näher, der Stil Trennung (in der CSS-Dokument) und Inhalt (im HTML-Dokument).

• Das Dokument ist nicht auf eine bestimmte Seite gebunden. Der große Vorteil von externen CSS ist die Wiederverwendung. Die CSS-Dokument ist nicht Teil einer bestimmten Seite, aber jede Seite kann es verwenden.

Wie eine externe CSS-Stil wiederverwenden

Externe Stylesheets sind wirklich Spaß, wenn man mehr als eine Seite haben, die den gleichen Stil braucht. Die meisten Webseiten nutzen heute mehrere Seiten, und sie sollten ein gemeinsames Stylesheet teilen Konsistenz zu halten.

Der Code zeigt, wie leicht dies geschieht:

Zweite Seite
Diese Seite verwendet den gleichen Stil wieexternalStyle.html.

Externe Stylesheets haben einige große Vorteile:

• Ein Stylesheet kann viele Seiten steuern: Im Allgemeinen haben Sie eine große Anzahl von verschiedenen Seiten in einer Website, die alle den gleichen allgemeinen Stil teilen. Sie können das Stylesheet in einem Dokument definieren und alle HTML-Dateien in der CSS-Datei verweisen.

• Globale Änderungen sind einfacher: Wenn Sie externe Stile verwenden, stellen Sie eine Änderung an einem Ort und es wird automatisch auf alle Seiten im System propagiert.

• Trennung von Inhalt und Design: Mit externen CSS, die ganze Konstruktion ist in der CSS untergebracht, und die Daten in HTML.

• Einfache Upgrades: Da die Design-Parameter der gesamten Website sind in einer Datei definiert sind, können Sie einfach die Seite wechseln, ohne um mit einzelnen HTML-Dateien zu mess.

Der Link-Tag

Das Tag ist der Schlüssel für eine CSS-Referenz auf ein HTML-Dokument hinzufügen. Das Tag hat die folgenden Eigenschaften:

• Das Tag ist Teil der HTML-Seite. Benutze einen Tag in Ihrem HTML-Dokument, das CSS-Dokument angeben, werden von der HTML-Seite verwendet werden.

• Das tag tritt nur in der Kopfzeile. Im Gegensatz zu dem Tag, der Tag kann nur in der Kopfzeile auftreten.

• Der Tag hat keine visuelle Präsenz. Der Benutzer kann nicht sehen, die

  Tag, nur seine Auswirkungen.

• Das Link Tag wird verwendet, um das Dokument mit einem anderen Dokument zu beziehen. Sie verwenden die Tag, um die Beziehung zwischen Dokumenten zu beschreiben.

• Das Tag hat ein rel Attribut, der definiert, die Art der Beziehung. Denn jetzt werden Sie die einzige Beziehung verwenden ist Sheet Attribut.

• Das Tag hat auch eine href Attribut, das die Position des anderen Dokument beschreibt.

Link-Tags werden häufig verwendet, um eine Seite zu einem extern definierten Stil Dokument zu verbinden.

Die meisten Menschen beziehen sich auf die Hyperlinks durch den Anker-Tag () als Hyperlinks oder Links erstellt. Dies kann zu einiger Verwirrung führen, da in diesem Sinne, wird der Link-Tag nicht, dass die Art der Verknüpfung erstellen.

Wie ein externer Link angeben

So verwenden Sie die Tag eine externe Stylesheet angeben, gehen Sie folgendermaßen vor:

1. Definieren Sie das Stylesheet.

   Externe Stylesheets sind sehr ähnlich wie die, die Sie bereits kennen. Einfach alle Stile in einem separaten Textdokument ohne den Tags.

2. Ein ... kreieren Link Element im Kopfbereich der HTML-Seite, die Verbindung zwischen den HTML- und CSS-Seiten zu definieren.

   Mein Link-Element sieht wie folgt aus:

3. Stellen Sie den Link'S Beziehung, die durch die Einstellung rel = "Sheet"Attribut.

   Ehrlich, Sheet fast die einzige Beziehung, die Sie jemals verwenden werden, so sollte dies automatisch.

4. Geben Sie die Art von Stil, indem type = "text / css".

5. Bestimmen Sie den Speicherort des Stylesheets mit der href Attribut.