Wie füge ich einen CSS-Stil zu HTML hinzu? Vor- und Nachteile von Inline, Embedded und External-CSS-Tutorial-php.cn

Wie füge ich einen CSS-Stil zu HTML hinzu? Vor- und Nachteile von Inline, Embedded und External

青灯夜游

Freigeben： 2018-11-02 14:32:31

Original

16073 Leute haben es durchsucht

Wie füge ich einen CSS-Stil zu HTML hinzu? In diesem Artikel werden drei Methoden zum Hinzufügen von CSS-Stilen zu HTML vorgestellt: die Vor- und Nachteile von Inline-, eingebetteten und externen Stilen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Zunächst müssen wir verstehen, welche drei Methoden es gibt, um CSS-Stile zu HTML hinzuzufügen. Sie sind:

1. Verwenden Sie Inline-CSS, um Regeln für bestimmte Elemente anzuwenden, das heißt: Inline

2. Verwenden Sie internes CSS und im Abschnitt CSS-Regeln, das heißt: inline

3. Link zu einer externen Datei (.css-Datei), die alle CSS-Regeln enthält, das heißt: extern

Lassen Sie es uns unten im Detail vorstellen. Lassen Sie uns darüber sprechen Implementierung sowie Vor- und Nachteile von Inline-, Embedded- und externen Methoden.

1. Inline

Inline-CSS sollte innerhalb bestimmter HTML-Tags verwendet werden. Das Attribut -Tags platziert werden. Ein Beispiel für ein internes Stylesheet:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Nach dem Login kopieren

Vorteile von eingebettetem CSS:

1. Das Stylesheet betrifft nur eine Seite.

2. Interne Stylesheets können Klassen und IDs verwenden.

3. Es ist nicht erforderlich, mehrere Dateien hochzuladen. HTML und CSS können in derselben Datei sein.

Nachteile von eingebettetem CSS:

1. Erhöhen Sie die Ladezeit der Seite.

2. Es betrifft nur eine Seite – nutzlos, wenn Sie dasselbe CSS in mehreren Dokumenten verwenden möchten.

3. Externe Links

Der vielleicht bequemste Weg, CSS zu einer HTML-Seite hinzuzufügen, besteht darin, sie mit einer externen Datei zu verknüpfen (. CSS-Datei). Auf diese Weise werden alle Änderungen, die Sie an den externen CSS-Dateien vornehmen, auf Ihrer Website widergespiegelt. Verweise auf externe CSS-Dateien sollten im Abschnitt platziert werden, zum Beispiel:

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Nach dem Login kopieren

und style.css enthält alle Stilregeln. Zum Beispiel:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Nach dem Login kopieren

Vorteile von externem CSS:

1. Die Größe der HTML-Seite ist kleiner und die Struktur ist klarer.

2. Schnellere Ladegeschwindigkeit.

3. Dieselbe CSS-Datei kann auf mehreren Seiten verwendet werden.

Nachteile von externem CSS:

1. Die Seite wird möglicherweise nicht korrekt gerendert, bevor das externe CSS geladen wird.

Fazit

Das Obige ist der gesamte Inhalt dieses Artikels, der Ihnen verschiedene Methoden zum Hinzufügen von CSS zu HTML-Seiten vorstellt . Und verstehen Sie die Unterschiede zwischen Inline-, externen und internen Stylesheets. Sie können verschiedene Methoden zum Hinzufügen von CSS-Stilen verwenden. Ich hoffe, dass dies für Ihr Lernen hilfreich ist. [Empfohlenes Video-Lernen: CSS-Tutorial]

Das obige ist der detaillierte Inhalt vonWie füge ich einen CSS-Stil zu HTML hinzu? Vor- und Nachteile von Inline, Embedded und External. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!