Heim >Web-Frontend >HTML-Tutorial >Wie verweise ich auf den CSS-Stil in HTML? Einführung in drei Methoden zur HTML-Referenzierung von CSS-Dateien
Es gibt drei Möglichkeiten, CSS-Stile in HTML zu referenzieren. Welche drei Möglichkeiten gibt es also? In diesem Artikel erhalten Sie eine detaillierte Einführung in drei Methoden, mit denen HTML auf CSS-Dateien verweisen kann.
Das Anwenden von Stylesheets auf HTML-Dokumente und XHTML-Dokumente in CSS kann grob in die folgenden drei Methoden unterteilt werden. (Empfohlenes Tutorial: CSS-Video-Tutorial)
1. Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Element, um externe CSS-Dateien aufzurufen und anzuwenden.
2. Element zum Anwenden Dokumenteinheit
3. Wenden Sie Stile an, indem Sie Stilattribute zu Elementen hinzufügen
Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Element, um externe CSS-Dateien aufzurufen und anzuwenden
erstellt eine CSS-Datei, die das Stylesheet getrennt von der HTML-Datei beschreibt und aus der HTML-Datei aufruft. Bei Aufrufen wird die externe CSS-Datei über ein 2cdf5bf648cf2f33323966d7f58a7f3f-Element im 93f0f5c25f18dab9d176bd4f6de5d30e-Element angegeben. Um den Browser usw. darüber zu informieren, dass die angewendeten Stile auf CSS basieren, geben Sie text/css für den Wert des Typattributs des 2cdf5bf648cf2f33323966d7f58a7f3f-Elements an. Unter Berücksichtigung der Kompatibilität mit XHTML, der einfachen Änderung von Stilen usw. wird empfohlen, das Stylesheet auf diese Weise einzurichten.
Stylesheet-Komponenten werden in externen Dateien (xxx.css) beschrieben.
p {color:blue; line-height:1.5;}
HTML-Quellcode
<html> <head> <link rel =“ stylesheet ”type =“ text / css ”href =“ xxx.css ”> </ head> <body> <p>这是一个段落</ p> </ body> </ html>
Auf Dokumenteinheit anwenden mit dem c9ccee2e6ea535a969eb3f532ad9fe89-Element
in HTML Schreiben Sie das c9ccee2e6ea535a969eb3f532ad9fe89-Element in das 93f0f5c25f18dab9d176bd4f6de5d30e-Element und legen Sie das Stylesheet für jedes Dokument fest. Geben Sie text/css als Wert des type-Attributs des c9ccee2e6ea535a969eb3f532ad9fe89-Elements an, um Browser usw. darüber zu informieren, dass die angewendeten Stile auf CSS basieren.
Verwenden Sie auch 1e0dc9dd195550f5079c2ed08555544cDurch das Kommentieren des Stylesheet-Abschnitts soll verhindert werden, dass der Inhalt des c9ccee2e6ea535a969eb3f532ad9fe89-Elements in älteren Browsern angezeigt wird, die nicht dem Stylesheet entsprechen. Da jedoch die meisten Browser in den letzten Jahren das c9ccee2e6ea535a969eb3f532ad9fe89-Element unterstützen, auch wenn das 55647f38c6076dd069ab98c96dcb83c3 gibt es fast keine Probleme.
<html> <head> <style type="text/css"> <!-- p {color:blue; line-height:1.5;} --> </style> </head> <body> <p>这是一个段落。</p> </body> </html>
Wenden Sie Stile an, indem Sie Stilattribute zu Elementen hinzufügen.
Fügen Sie Stilattribute zu Elementen hinzu und beschreiben Sie Stilspezifikationen direkt im HTML-Quellcode. Um einen Stil über das Stilattribut anzugeben, um dem Browser usw. mitzuteilen, dass es sich bei dem im Dokument verwendeten Stylesheet um CSS handelt, fügen Sie dem Element 93f0f5c25f18dab9d176bd4f6de5d30e ein e8e496c15ba93d81f6ea4fe5f55a2244-Element hinzu und geben Sie die Stilsprache an text/css als Wert. In vielen Fällen erkennt der Browser dies automatisch, auch wenn Sie es nicht angeben. Sie sollten es jedoch schreiben, um Störungen zu vermeiden.
Die Stilzuweisung von Stilattributen ist nützlich, um Stile teilweise zu priorisieren, führt jedoch tendenziell zu einer komplizierteren Stilverwaltung, wenn die HTML-Quelle komplexer wird. Wenn man eine effiziente Stilverwaltung anstrebt, ist es üblich, CSS-Teile in externe Dateien zu konvertieren.
Beispiel: Direktes Anwenden eines Stylesheets mithilfe von Stilattributen
<html> <head> <meta name="Content-Style-Type" content="text/css"> </head> <body> <p style="color:blue; line-height:1.5;">这是一个段落。</p> </body> </html>
Das obige ist der detaillierte Inhalt vonWie verweise ich auf den CSS-Stil in HTML? Einführung in drei Methoden zur HTML-Referenzierung von CSS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!