css kann in drei Kategorien unterteilt werden: 1. Inline-Stil (Inline-Stil), bei dem das Stilattribut zum Einfügen von CSS-Code in das HTML-Tag verwendet wird, die Syntax „...< ;/tag name >"; 2. Eingebettetes Stylesheet, fügen Sie den CSS-Code in das Style-Tag-Paar im Kopfteil des Dokuments ein, die Syntax lautet „"; 3. Externer Stil Fügen Sie im Blatt den CSS-Code ein. Verwenden Sie in der Datei „.css“ das Link-Tag oder die Regel „@import“, um ihn in das HTML-Dokument einzuführen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Um einige Effekte im HTML-Code zu erzielen, ist es oft notwendig, CSS-Änderungen hinzuzufügen. Es gibt drei Arten von CSS in HTML: Inline-Stile, eingebettete Stylesheets und externe Stylesheets.
1. Inline-Stil (Inline-Stil)
Der Inline-Stil dient dazu, die Stilinformationen direkt im Stilattribut des HTML-Tags zu definieren. Da der Inline-Stil innerhalb des Tags definiert ist, ist er nur für das Tag gültig in dem es sich befindet.
Es wird empfohlen, kein Inline-CSS zu verwenden, da jedes HTML-Tag separat gestaltet werden muss und die Verwaltung der Website sehr schwierig werden kann, wenn Sie nur Inline-CSS verwenden. In bestimmten Situationen kann es jedoch nützlich sein. Beispielsweise in Situationen, in denen Sie keinen Zugriff auf CSS-Dateien haben oder Stile nur auf ein einzelnes Element anwenden müssen.
Nachteile:
Das Definieren von Inline-Stilen erfordert die Definition des Stilattributs in jedem HTML-Tag, was sehr unpraktisch ist.
Seien Sie besonders vorsichtig, wenn Sie doppelte oder einfache Anführungszeichen in Inline-Stilen verwenden, da die Attribute von HTML-Tags verwenden normalerweise doppelte Anführungszeichen, um den Attributwert einzuschließen, z. B. ; In Inline-Stilen definierte Stile können nirgendwo anders wiederverwendet werden Spätere Wartung, da eine Website normalerweise aus vielen Seiten besteht und Sie beim Ändern des Seitenstils die Seiten einzeln ändern müssen.
Das Hinzufügen zu vieler Inline-Stile führt zu einer Vergrößerung der HTML-Dokumente.
2. Eingebettetes Stylesheet
Schreiben Sie den Stilcode in das Tag <style>...</style>
<style>
bdoy{font-size:14px;}
</style>
Nach dem Login kopieren
< Die ;...</style>-Tag-Struktur kann sich an einer beliebigen Stelle im -Tag der Seite befinden und mehrmals vorkommen. Normalerweise wird die gesamte Struktur <style>...</style> in den Abschnitt ... geschrieben. Das Merkmal dieser Art der Einführung von CSS besteht darin, dass der CSS-Code jeder Seite vereinheitlicht und geplant werden kann. Er lässt sich leicht innerhalb einer Seite wiederverwenden und warten, die Wiederverwendung von CSS-Code zwischen mehreren Seiten reicht jedoch immer noch nicht aus.
Da das eingebettete Stylesheet den CSS-Stil innerhalb des HTML-Dokuments definieren muss, erhöht sich die Größe des Dokuments. Wenn auch andere Dokumente denselben Stil im eingebetteten Stylesheet verwenden müssen, kann er nicht in andere Dokumente eingeführt werden Eine Neudefinition in anderen Dokumenten führt zu Coderedundanz und ist einer späteren Wartung nicht förderlich.
3. Externe Stylesheets werden in der tatsächlichen Entwicklung verwendet. Geeignet für Situationen mit vielen Stilen. Die Stile werden separat in CSS-Dateien geschrieben, und dann werden die CSS-Dateien zur Verwendung in HTML eingeführt.
1) Linkstil verwenden bedeutet, ein CSS-Stylesheet extern zu definieren und eine Datei mit der Erweiterung .CSS zu erstellen und dann <link> zu übergeben > Link-Tag ist mit der Seite verknüpft und die Link-Anweisung muss im -Tag-Bereich der Seite platziert werden.
href-Attribut legt die Adresse der externen Stylesheet-Datei fest, die eine relative Adresse oder eine absolute Adresse sein kann. Das Attribut
rel definiert das zugehörige Dokument, also hier das zugehörige Stylesheet.
type-Attribut definiert den Typ der importierten Datei. Wie das Style-Element gibt text/css eine CSS-Textdatei an.
🎜🎜🎜Im Allgemeinen sollten beim Definieren des <link>-Tags drei grundlegende Attribute definiert werden, darunter href ein unbedingt festzulegendes Attribut. 🎜🎜Sie können auch das Titelattribut im Link-Element hinzufügen, um den Titel des optionalen Stylesheets festzulegen. Das heißt, wenn ein Webdokument mehrere Stylesheets importiert, können Sie die anzuwendende Stylesheet-Datei über den Titelattributwert auswählen . 🎜🎜Tipps: Im Firefox-Browser können Sie im Menü die Option „Ansicht -> Seitenstil“ auswählen. Anschließend wird der Titelattributwert im Untermenü angezeigt. Sie müssen lediglich verschiedene Titelattributwerte auswählen Erforderliche Stylesheet-Dateien können selektiv angewendet werden. Der IE-Browser unterstützt diese Funktion nicht. 🎜
Da das eingebettete Stylesheet den CSS-Stil innerhalb des HTML-Dokuments definieren muss, erhöht sich die Größe des Dokuments. Wenn auch andere Dokumente denselben Stil im eingebetteten Stylesheet verwenden müssen, kann er nicht in andere Dokumente eingeführt werden Eine Neudefinition in anderen Dokumenten führt zu Coderedundanz und ist einer späteren Wartung nicht förderlich.