Was ist externes Link-CSS?-Front-End-Fragen und Antworten-php.cn

Was ist externes Link-CSS?

青灯夜游

Freigeben： 2022-09-01 18:43:32

Original

3363 Leute haben es durchsucht

Externer Link CSS bezieht sich auf die Definition des CSS-Stils in einer Datei im „.css“-Format und die anschließende Verwendung des HTML-Link-Tags, um die CSS-Datei mit dem HTML-Dokument zu verknüpfen. Externer Link-CSS lädt die CSS-Datei, bevor der Hauptteil der Webseitendatei geladen wird, sodass die angezeigte Webseite von Anfang an gestylt wird. Es wird nicht zuerst die nicht gestylte Webseite und dann die gestylte Seite wie die importierte angezeigt CSS. Webseite.

Was ist externes Link-CSS?

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Externer Link-CSS bezieht sich auf die Verwendung des HTML-Link-Tags, um die CSS-Datei mit dem HTML-Dokument zu verknüpfen.

CSS-Dateien werden im Allgemeinen als externe CSS-Stylesheets bezeichnet. Hierbei handelt es sich um Textdateien, die zum Platzieren von CSS-Codes verwendet werden. CSS-Codes bestehen aus Textcodes mit bestimmten regulären Regeln. Wir verwenden Notepad, um die Erweiterung in eine CSS-Datei zu ändern.

CSS-Dateien haben das Suffix .css Wir sehen, dass Dateien mit dem Suffix .css CSS-Dateien sind.

Link-Tag muss im

-Bereich platziert werden.

Der Linktyp lädt die CSS-Datei, bevor der Hauptteil der Webseitendatei geladen wird, sodass die angezeigte Webseite von Anfang an gestylt wird. Es wird nicht zuerst die nicht gestylte Webseite und dann die gestylte Seite angezeigt Importtyp. Webseiten, das ist der Vorteil von Links.

Das Folgende ist ein konkretes Beispiel zur Demonstration.

Zuerst müssen Sie eine Stildatei im .css-Format (z. B. style.css) definieren, wie unten gezeigt:

body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}

Nach dem Login kopieren

Dann fügen wir diese style.css-Datei in das HTML-Dokument ein, wie unten gezeigt:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>  
    <body>
	<h1>PHP中文网</h1>
	<p>https://www.php.cn/</p>
    </body>
</html>

Nach dem Login kopieren

Was ist externes Link-CSS?

Beschreibung jedes Attributs des Link-Tags: Das Attribut

href legt die Adresse der externen Stylesheet-Datei fest, die eine relative Adresse oder eine absolute Adresse sein kann. Das Attribut
rel definiert das zugehörige Dokument, also hier das zugehörige Stylesheet.
type-Attribut definiert den Typ der importierten Datei. Wie das Style-Element gibt text/css eine CSS-Textdatei an.

Im Allgemeinen sollten beim Definieren des -Tags drei grundlegende Attribute definiert werden, darunter href ein unbedingt festzulegendes Attribut.

Sie können auch das Titelattribut im Link-Element hinzufügen, um den Titel des optionalen Stylesheets festzulegen. Das heißt, wenn ein Webdokument mehrere Stylesheets importiert, können Sie die anzuwendende Stylesheet-Datei über den Titelattributwert auswählen .

Tipps: Im Firefox-Browser können Sie im Menü die Option „Ansicht -> Seitenstil“ auswählen. Anschließend wird der Titelattributwert im Untermenü angezeigt. Sie müssen lediglich verschiedene Titelattributwerte auswählen Erforderliche Stylesheet-Dateien können selektiv angewendet werden. Der IE-Browser unterstützt diese Funktion nicht.

Darüber hinaus ist das Titelattribut mit dem rel-Attribut verknüpft, und zukünftige Webdokumente werden mehrere -Elemente verwenden, um verschiedene externe Dateien zu importieren, z. B. Stylesheet-Dateien, Skriptdateien usw. Theme-Dateien und enthält sogar zusätzliche Zusatzdateien zur persönlichen Anpassung. Nachdem Sie so viele Dateien unterschiedlichen Typs und Namens importiert haben, können Sie das Titelattribut zur Auswahl verwenden. Zu diesem Zeitpunkt wird die Rolle des rel-Attributs deutlich. Es kann den importierten Dateityp angeben, der bei der ersten Anzeige der Webseitendatei angewendet wird. Derzeit kann es nur dem CSS-Stylesheet-Typ zugeordnet werden.

Hinweis:

Zusätzlich zur Verwendung des Link-Tags zum Einführen externer CSS-Stylesheets können Sie auch @importieren.

Der Unterschied zwischen externem Link (Link) und Import (@import):

link ist ein XHTML-Tag. Zusätzlich zum Laden von CSS kann es auch andere Transaktionen wie RSS definieren, während @import zum CSS gehört Kategorie und kann nur geladen werden.
link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf, während @import in CSS2.1 vorgeschlagen wurde und von Browsern niedrigerer Versionen nicht unterstützt wird.
ink unterstützt die Verwendung von Javascript zur Steuerung des DOM zum Ändern des Stils; @import unterstützt dies nicht.
@import kann andere Stylesheets wieder in die CSS-Datei einführen; Link unterstützt dies nicht.
(Lernvideo-Sharing:
Web-Frontend

Das obige ist der detaillierte Inhalt vonWas ist externes Link-CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!