Wie benutzt man den & lt; link & gt; Tag zum Link zu externer CSS -Stylesheets?

Wie verwenden Sie das <link> -Tag, um zu externer CSS -Stylesheets zu verlinken?

Um mit dem <link> -Tag mit einem externen CSS -Stylesheet zu verlinken, müssen Sie es in den Abschnitt Ihres HTML -Dokuments aufnehmen. Die Grundstruktur des <link> -Tags zum Verknüpfen einer CSS -Datei lautet wie folgt:

 <code class="html"> <link rel="stylesheet" type="text/css" href="path/to/yourstylesheet.css"> </code>

Hier ist eine Aufschlüsselung der in diesem Beispiel verwendeten Attribute:

• rel="stylesheet" : Dieses Attribut gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an. Für CSS -Dateien sollte dies immer auf "Stylesheet" eingestellt werden.
• type="text/css" : Dieses Attribut gibt den MIME -Typ des verknüpften Dokuments an. Obwohl es in der modernen HTML als optional und weniger verwendet wird, kann es dennoch zur Klarheit oder Rückwärtskompatibilität aufgenommen werden.
• href="path/to/yourstylesheet.css" : Dieses Attribut gibt den Speicherort der CSS -Datei in Bezug auf das HTML -Dokument an. Sie können einen absoluten oder relativen Weg verwenden.

Mit dieser Methode können Sie Stile aus einer externen CSS -Datei auf Ihr HTML -Dokument anwenden, sodass Sie die Verwaltung und Wiederverwendung von Stilen auf mehreren Seiten erleichtern können.

Was sind die gängigen Attribute, die mit dem <link> -Tag für CSS verwendet werden?

Bei der Verknüpfung mit einer CSS -Datei werden üblicherweise mit dem <link> -Tag verwendet. Hier sind die am häufigsten verwendeten:

• rel : Gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an. Für CSS sollte es auf "Stylesheet" eingestellt werden.
• type : Zeigt den MIME -Typ der verknüpften Ressource an. Für CSS -Dateien wäre dies normalerweise "Text/CSS", obwohl es in modernen HTML5 häufig weggelassen wird, da der Browser es aus dem rel -Attribut schließen kann.
• href : Gibt die URL der verknüpften Ressource an. Dies kann ein relativer oder absoluter Weg zur CSS -Datei sein.
• media : Gibt an, auf welchem ​​Gerät die verknüpfte Ressource angezeigt wird. Zu den gemeinsamen Werten gehören "Bildschirm", "Druck" und "All". Sie können auch Medienabfragen wie media="screen and (max-width: 600px)" .
• title : Wird verwendet, um zusätzliche Informationen zur verknüpften Ressource bereitzustellen. Es ist besonders nützlich, wenn Sie alternative Stylesheets haben und ihre Namen angeben möchten.
• integrity : Wird für die SubResource Integrity (SRI) verwendet, sodass der Browser die Datei mit einem bestimmten kryptografischen Hash überprüfen kann, um sicherzustellen, dass er nicht manipuliert wurde.
• crossorigin : Gibt an, ob die Ressource mit CORs abgerufen werden soll oder nicht. Es kann auf "anonyme" oder "Anwendungszüchter" eingestellt werden.

Hier ist ein Beispiel, das einige dieser Attribute enthält:

 <code class="html"> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" title="Default Styles"> </code>

Können Sie mehrere CSS -Dateien mit dem <link> -Tag und wenn ja, wie?

Ja, Sie können mehrere CSS -Dateien mithilfe des <link> -Tags verknüpfen. Fügen Sie dazu einfach mehrere <link> -Tags in den Abschnitt in Ihrem HTML -Dokument auf, wobei jeder auf eine andere CSS -Datei zeigt. Hier ist ein Beispiel dafür, wie mehrere CSS -Dateien verknüpft werden können:

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

Jedes <link> -Tag lädt seine zugehörige CSS -Datei so, dass Sie Ihre Stile basierend auf Ihren Anforderungen in verschiedenen Dateien organisieren, z. B. die Trennung von Stilen für verschiedene Komponenten oder die Verwendung verschiedener Stile für verschiedene Medientypen.

Wie können Sie die richtige Reihenfolge der CSS -Datei laden, wenn Sie mehrere <link> -Tags verwenden?

Bei Verwendung mehrerer <link> -Tags zum Laden verschiedener CSS -Dateien bestimmt die Reihenfolge der Tags im HTML -Dokument die Reihenfolge, in der die Stile angewendet werden. CSS -Regeln, die später in der Kaskade erscheinen, überschreiben frühere, wenn sie die gleiche Spezifität haben.

Um die korrekte Reihenfolge der CSS -Datei herunterzuladen und zu bewerben, sollten Sie die <link> -Tags im Abschnitt in der Reihenfolge, in der die Stile angewendet werden sollen, platzieren. Hier ist ein Beispiel, in dem styles1.css zuerst angewendet wird, gefolgt von styles2.css und schließlich styles3.css :

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

In dieser Konfiguration werden alle in styles2.css definierten Regeln, die in styles1.css in Konflikt stehen, diejenigen in styles1.css und Regeln in styles3.css überschreiben die höchste Vorrang. Auf diese Weise können Sie die Spezifität und das Überschreiben von Verhalten Ihrer CSS -Regeln effektiv verwalten.

Das obige ist der detaillierte Inhalt vonWie benutzt man den & lt; link & gt; Tag zum Link zu externer CSS -Stylesheets?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!