So führen Sie CSS in HTML ein-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

So führen Sie CSS in HTML ein

May 16, 2018 am 11:26 AM

css html

Es gibt vier Hauptmethoden, um CSS in HTML einzuführen: Inline, eingebettet, verlinkt und importiert.

1. Inline-Stil
Beim Inline-Stil wird der CSS-Stil im Stilattribut des Tags festgelegt. Diese Methode spiegelt nicht die Vorteile von CSS wider und wird nicht empfohlen.
2. Eingebettet
Eingebettet ist das gemeinsame Schreiben von CSS-Stilen in das Tag-Paar <style></head> Das Format lautet wie folgt:

&lt;head&gt;
        &lt;style type=&quot;text/css&quot;&gt;
               ...此处写CSS样式
       &lt;/style&gt;
      &lt;/head&gt;

Nach dem Login kopieren

Der Nachteil besteht darin, dass es bei einer Website mit vielen Webseiten sehr mühsam ist, die Einbettung in jede Webseite zu verwenden und den Stil zu ändern. Einzelne Webseiten können die Verwendung von Einbettungen in Betracht ziehen.

3. Importieren Sie eine unabhängige CSS-Datei. Der Import verwendet CSS-Regeln, um externe CSS-Dateien einzufügen . Die verwendete Syntax lautet wie folgt:

&lt;style type=&quot;text/css&quot;&gt;
                    @import&quot;mystyle.css&quot;; 此处要注意.css文件的路径
         &lt;/style&gt;

Nach dem Login kopieren

Der Importtyp lädt die CSS-Datei, nachdem die gesamte Webseite geladen wurde. Dies führt also zu einem Problem, wenn die Webseite relativ groß ist erscheint zuerst und flackert. Nach einer Weile wird der Stil der Webseite wieder angezeigt. Dies ist ein inhärenter Importfehler.

4. Der Linktyp

führt ebenfalls eine .css-Datei in die HTML-Datei ein, unterscheidet sich jedoch vom Importtyp darin, dass der Linktyp HTML-Regeln verwendet, um externe CSS-Dateien einzuführen, die in der <head>-Tag im ;</head>-Tag. Die Syntax lautet wie folgt:

   &lt;link href=&quot;mystyle.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;

Nach dem Login kopieren

Bei Verwendung des Linktyps Der Unterschied zum Importtyp besteht darin, dass er als Hauptteil der Webseitendatei geladen wird, sodass die angezeigte Webseite von Anfang an einen Stileffekt hat Zuerst die Webseite aufrufen und dann die gestaltete Webseite wie beim Importtyp anzeigen. Dies ist der Vorteil des Linktyps.

Zusammenfassung: Im Allgemeinen werden Stile beim Erstellen einer Website meist in mehreren Stylesheet-Dateien geschrieben. Daher verwenden wir zunächst einen Link, um eine allgemeine CSS-Datei einzuführen, und verwenden dann die Importmethode in dieser CSS-Datei Führen Sie andere CSS-Dateien ein. Wenn Sie CSS-Dateien jedoch dynamisch über JavaScript einführen, können Sie nur die Verknüpfung verwenden.

Verwandte Empfehlungen:

Einführung in die vier Möglichkeiten, CSS in HTML einzuführen

Eine kurze Analyse von Chrom-CSS ( 1) Standard-htmlCss-Formationslogik (chromium39)_html/css_WEB-ITnose

HTMLCSS-Notiz-Tag Standardwertstil zurücksetzen CSS-Reset(2)_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonSo führen Sie CSS in HTML ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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