CSS-Tutorial (4) So fügen Sie CSS in eine Webseite ein

In den ersten beiden Kapiteln haben wir etwas über die Syntax von CSS gelernt, aber wenn wir den Effekt im Browser anzeigen möchten, müssen wir ihn vom Browser erkennen und aufrufen lassen. Wenn der Browser das Stylesheet liest, muss er es im Textformat lesen. Es gibt vier Methoden zum Einfügen von Stylesheets in die Seite: Verknüpfen mit externen Stylesheets, interne Stylesheets, Importieren externer Stylesheets und eingebettete Stile.

Verlinkung zu einem externen Stylesheet

Verlinkung zu einem externen Stylesheet bedeutet, das Stylesheet als Stylesheet-Datei zu speichern und dann mit der ?lt;link>-Taste eine Verknüpfung zu dieser Stylesheet-Datei herzustellen. Tag auf der Seite. Dieses -Tag muss im -Bereich wie folgt platziert werden:


......

Das obige Beispiel zeigt an, dass der Browser den definierten Stil liest Blatt im Dokumentformat aus der Datei mystyle.css. rel="stylesheet" bezieht sich auf die Verwendung dieses externen Stylesheets auf der Seite. type="text/css" bedeutet, dass der Dateityp Stylesheet-Text ist. href="mystyle.css" ist der Speicherort der Datei.

Eine externe Stylesheet-Datei kann auf mehrere Seiten angewendet werden. Wenn Sie diese Stylesheet-Datei ändern, werden die Stile aller Seiten entsprechend geändert. Dies ist sehr nützlich, wenn Sie eine große Anzahl von Websites mit demselben Seitenstil erstellen. Es reduziert nicht nur den Arbeitsaufwand durch Duplikate, sondern erleichtert auch zukünftige Änderungen und Bearbeitungen und reduziert auch das wiederholte Herunterladen von Codes beim Durchsuchen.

Stylesheet-Dateien können mit jedem Texteditor (zum Beispiel: Notepad) geöffnet und bearbeitet werden. Im Allgemeinen sind Stylesheet-Dateierweiterungen .css. Der Inhalt ist ein definiertes Stylesheet und enthält keine HTML-Tags. Der Inhalt der Datei mystyle.css lautet wie folgt:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
(Definieren Sie die Farbe der horizontalen Linie als erdiges Gelb; der Rand auf der linken Seite des Absatzes beträgt 20 Pixel; das Hintergrundbild des (Seite ist die back40.gif-Datei im Bilderverzeichnis)

Internes Stylesheet

Das interne Stylesheet platziert das Stylesheet im ?lt;head>-Bereich Definierte Stile werden auf die Seite angewendet. Die Verwendung des Tags
……


Hinweis: Einige Browser niedrigerer Versionen können das Style-Tag nicht erkennen, was bedeutet, dass der Browser niedrigerer Versionen dies tun wird Ignorieren Sie den Inhalt im Style-Tag und ersetzen Sie den Inhalt im Style-Tag als Text, der direkt auf der Seite angezeigt wird. Um diese Situation zu vermeiden, verwenden wir HTML-Kommentare (), um den Inhalt auszublenden, ohne ihn anzuzeigen:

……
< ;style type="text/css">


……


Externes Stylesheet importieren

Das Importieren eines externen Stylesheets bedeutet, dass ein externes Stylesheet im