So referenzieren Sie CSS in HTML-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

So referenzieren Sie CSS in HTML

Nov 21, 2017 pm 05:24 PM

css html

Es gibt vier Möglichkeiten, CSS-Stylesheets zu referenzieren. Verwenden Sie CSS-Stile direkt in divs, um div+css-Webseiten zu erstellen, verwenden Sie den in HTML integrierten Stil, verwenden Sie @import, um auf externe CSS-Dateien zu verweisen, und verwenden Sie Links zu Auf externe CSS-Dateien verweisen Jede Methode hat Vor- und Nachteile. Deshalb werden wir heute die Unterschiede zwischen diesen vier Methoden ausführlich erläutern.

Die Verwendung unterschiedlicher Methoden zum Referenzieren von CSS-Stylesheets wird letztendlich den gleichen Effekt erzielen, aber die Verwendung unterschiedlicher Methoden zum Anwenden von CSS-Dateien wirkt sich auf SEO und die Geschwindigkeit und Effizienz beim Öffnen von Webseiten aus. Als Nächstes erklären wir nacheinander die Beispiele für die Referenzierung von CSS in HTML

1. Betten Sie CSS-Stile direkt in HTML-Tag-Elemente ein, z. B. <div style="font-size:14px; color: #FF0000;"> ;Ich bin der Testinhalt</div>

2. Fügen Sie den Style-Anweisungscode wie folgt in den Kopfteil des HTML-Headers ein:

&lt;style type=&quot;text/css&quot;&gt; 
&lt;!-- 
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 
--&gt; 
&lt;/style&gt;

Nach dem Login kopieren

3. Verwenden Sie @import, um auf externe CSS-Dateien zu verweisen

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
 &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt; 
&lt;title&gt;css引用方法实例&lt;/title&gt; 
&lt;style type=&quot;text/css&quot;&gt; 
&lt;!-- 
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 
--&gt; 
&lt;/style&gt; 
&lt;/head&gt; 
 
&lt;body&gt; 
&lt;div class=&quot;ceshi&quot;&gt;我是测试内容&lt;/div&gt; 
 
&lt;/body&gt; 
&lt;/html&gt;

Nach dem Login kopieren

Code in Wcss.css file.ceshi {font-size:14px; color:#FF0000;}

Es ist ersichtlich, dass die Verwendung dieser Methode der Verwendung der integrierten Referenz-CSS-Stylesheet-Methode ähnelt. Beide müssen das Style-Tag im HTML-Kopf verwenden, um auf externes CSS zu verweisen .

4. Verwenden Sie den Link, um eine externe CSS-Datei aufzurufen.

Fügen Sie den Typ <link rel="stylesheet" href="wcss.css" in den Kopf ein ="text/css" /> So rufen Sie die externe Datei wcss.css auf, um eine HTML-Referenz-CSS-Datei zu implementieren

Diese Methode erfordert kein Style-Tag, sondern verweist direkt auf den externen Stil, indem ein Stil verknüpft wird

Es wird allgemein empfohlen, einen Link zu verwenden, um auf externe Methoden im CSS-Stil zu verweisen.

Vorteile der Verwendung von Links zum Verweisen auf externe CSS-Dateien

1. Durch die Verwendung dieser Methode zum Verweisen auf externe CSS-Dateien wird der Quellcode der HTML-Seite viel kleiner als durch das direkte Hinzufügen CSS-Stile, da Suchmaschinen-Spider beim Crawlen von Webseiten keine CSS-Dateien crawlen, was zu sehr wenigen HTML-Quellcodes führt, wodurch Spider schneller crawlen und weniger verarbeiten, was das Gewicht dieser Webseite erhöht und sich positiv auf das Ranking auswirkt.

2. Durch das Speichern von HTML kann der Browser Threads beim Herunterladen von Webseiten trennen, genau wie das Laden einer Seite und das gleichzeitige Öffnen einer Seite durch zwei Zeilen, wodurch die Webseite besonders schnell geöffnet wird. (Wenn der Benutzer diese Webseite durchsucht, werden gleichzeitig der HTML-Quellcode und die CSS-Datei heruntergeladen, was die Geschwindigkeit beschleunigt.)

3. Es ist praktisch, den Stil der Webseite zu ändern. Sie müssen nur Änderungen vornehmen Der CSS-Stil zum Ändern des Kunststils der Webseite. Da bei dieser Methode des Projekts die gesamte Website einen gemeinsamen CSS-Stil verwendet, ist es schnell und bequem, den Stil der gesamten Website zu ändern.

Dies sind die vier Möglichkeiten, CSS-Stylesheets zu zitieren. Freunde, die sie benötigen, können sie auch weiterhin auf andere Updates auf dieser Website achten.

Verwandte Empfehlungen:

So lernen Sie Div und CSS

So verwenden Sie den CSS-Rahmen

So erstellen Sie abgerundete Ecken in CSS3

Das obige ist der detaillierte Inhalt vonSo referenzieren Sie CSS in HTML. 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