Heim  >  Artikel  >  Web-Frontend  >  Was ist der Unterschied zwischen internen CSS-Links, externen Links und eingebettetem CSS?

Was ist der Unterschied zwischen internen CSS-Links, externen Links und eingebettetem CSS?

青灯夜游
青灯夜游Original
2020-11-17 14:53:158138Durchsuche

Unterschied: Interne Verlinkung bezieht sich auf die Verwendung des Style-Attributs zum Schreiben von CSS-Stilen in HTML-Tags; externe Verlinkung bezieht sich auf das separate Schreiben von CSS-Stilen in einer Datei mit der Erweiterung „.css“ und die Verwendung des Link-Tags zum Referenzieren wird mit dem style-Tag referenziert und der CSS-Stil wird separat in „“ geschrieben.

Was ist der Unterschied zwischen internen CSS-Links, externen Links und eingebettetem CSS?

【Empfohlenes Tutorial: CSS-Video-Tutorial

Es gibt drei Möglichkeiten, CSS in HTML zu referenzieren: interne Verlinkung, externe Verlinkung und eingebettet.

Funktionell gesehen sind die von diesen drei implementierten Funktionen gleich und können alle das Setzen und Ändern von Inhalten erreichen. In Bezug auf die Verwendung sind ihre Verwendungsmethoden jedoch unterschiedlich:

(1) Einführung in den internen Link

Das CSS-Stylesheet besteht darin, den CSS-Code direkt in den vorhandenen HTML-Code zu schreiben Die spezifische Verwendungsmethode lautet wie folgt:

<div style="color:red;">设置文字的颜色为红色</div>

Hinweis hier: Der Inhalt des Stils wird in das Start-Tag des Elements geschrieben, und der CSS-Stilcode sollte in doppelte Anführungszeichen geschrieben werden, wenn mehrere CSS-Stilcodes vorhanden sind Einstellungen können zusammen geschrieben werden, getrennt durch Semikolon. Die Auswirkung mehrerer zusammen geschriebener CSS-Stile ist wie folgt:

<div style="color:red;font-size:14px;">>设置字体颜色为红色,并且字体大小为14px</div>

(2) Eingebettete Einführung

Der Unterschied zwischen eingebetteten Stylesheets und internen Links besteht darin, dass es sehr praktisch ist, die Stile mehrerer identischer Elemente gleichzeitig zu ändern Bei Attributen möchten wir beispielsweise die Schriftart des Inhalts in einem bestimmten Tag auf Rot und Fett anpassen und die Schriftgröße auf 14 Pixel anpassen. Wenn wir die interne Linkmethode verwenden, müssen wir sie jeweils hinzufügen Tag Nach dem Hinzufügen des Stils sieht der Code wie im Bild unten aus:

Was ist der Unterschied zwischen internen CSS-Links, externen Links und eingebettetem CSS?Wie Sie oben sehen können, führt die interne Verkettung zu einer Menge redundantem Code, aber die Verwendung unserer eingebetteten Version ist relativ einfach. Der Code ist wie folgt Im Bild unten gezeigt. :

Was ist der Unterschied zwischen internen CSS-Links, externen Links und eingebettetem CSS?Wie aus dem obigen Bild ersichtlich ist, müssen wir für eingebettet nur das Span-Tag ändern, dann werden die Stile aller Inhalte im Span-Tag entsprechend geändert.

(3) Externe Einführung

Der externe CSS-Stil besteht darin, den CSS-Code in eine separate externe Datei zu schreiben. Diese CSS-Stildatei hat die Erweiterung „.css“ und wird normalerweise im

platziert das

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen internen CSS-Links, externen Links und eingebettetem CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn