Entdecken Sie vier Möglichkeiten, CSS-Stylesheets in Webseiten zu verwenden_Erlebnisaustausch

So fügen Sie CSS in eine Webseite ein

Wir haben die Syntax von CSS bereits kennengelernt, 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.

1. Link zu einem externen Stylesheet
Um einen Link zu einem externen Stylesheet zu erstellen, müssen Sie das Stylesheet als Stylesheet-Datei speichern und dann den Tag < Stylesheet-Datei auf der Seite:

Kopieren Sie den Code Der Code lautet wie folgt:

……
… 


Das obige Beispiel zeigt, dass der Browser das definierte Stylesheet im Dokumentformat aus der Datei mystyle.css liest . 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. Bei den Medien handelt es sich um die Auswahl des Medientyps: Bildschirm, Papier, Sprachsynthesegerät, Braille-Lesegerät usw.

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 leere Rand auf der linken Seite des Absatzes beträgt 20 Pixel; ist die Datei back40.gif im Bilderverzeichnis*/

2. Das interne Stylesheet platziert das Stylesheet im Bereich < Das Stylesheet ist mit dem Tag < style > gekennzeichnet. Die Verwendung des Tags < style > 🎜>Code kopieren


Der Code lautet wie folgt:

…… } body {background-image: url(" images/back40.gif")}  …… 

 

Hinweis: Einige Browser niedrigerer Versionen können das Style-Tag nicht erkennen. Dies bedeutet, dass der Browser der niedrigeren Version den Inhalt im Style-Tag ignoriert und den Inhalt im Style-Tag direkt auf der Seite als Text anzeigt. Um diese Situation zu vermeiden, verwenden wir HTML-Kommentare (< !-- Kommentare -- >), um den Inhalt auszublenden, ohne ihn anzuzeigen:




Code kopieren


Der Code lautet wie folgt:

!--

hr {color: sienna} p {margin-left: 20px } body {background-image: url("images/back40.gif")} --> ;    ……  🎜>

3. Import helaian gaya luaran
Mengimport helaian gaya luaran bermaksud mengimport helaian gaya luaran dalam < ;kepala>
……
. Kaedah ini hampir sama dengan kaedah memaut ke helaian gaya, tetapi kaedah input helaian gaya luaran mengimport mempunyai lebih banyak kelebihan. Pada asasnya ia adalah bersamaan dengan disimpan dalam helaian gaya dalaman.
Nota: Mengimport helaian gaya luaran mestilah pada permulaan helaian gaya, di atas helaian gaya dalaman yang lain.

4. Gaya sebaris
Gaya sebaris dicampur dalam teg HTML. Dengan cara ini, anda boleh mentakrifkan gaya berasingan untuk sesuatu elemen. Penggunaan gaya sebaris adalah untuk menambah terus parameter gaya pada teg HTML. Kandungan parameter gaya ialah atribut dan nilai CSS, seperti dalam contoh berikut:

Ini ialah perenggan

Kandungan dalam tanda petikan selepas parameter gaya adalah bersamaan dengan kandungan dalam kurungan kerinting helaian gaya.
Nota: Parameter gaya boleh digunakan pada mana-mana elemen dalam BODY (termasuk BODY itu sendiri), kecuali BASEFONT, PARAM dan SCRIPT. ,

Stellungnahme：

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