Drei Arten von CSS-Regeln: 1. Inline-Stylesheet, verwenden Sie das Style-Attribut, um CSS-Code direkt zum HTML-Markup hinzuzufügen, die Syntax „". 2. Schreiben Sie im internen Stylesheet den CSS-Stil in das Tag „
“ und deklarieren Sie ihn mit dem Tag „
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
CSS ist eine Programmiersprache zur Darstellung von HTML-Stilen. Es handelt sich um eine Stilsprache, die Webseiten und Inhalte trennen kann.
CSS wird hauptsächlich zum Entwerfen des Stils von Webseiten und zum Verschönern von Webseiten verwendet. Es kann Webseiten nicht nur statisch ändern, sondern auch verschiedene Elemente von Webseiten in Verbindung mit verschiedenen Skriptsprachen dynamisch formatieren.
CSS kann das Layout von Elementpositionen in Webseiten präzise auf Pixelebene steuern, unterstützt fast alle Schriftgrößen und -stile und verfügt über die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten.
CSS-Stile umfassen hauptsächlich die folgenden drei Typen: Inline-Stile (Inline-Stile), interne Stile (Inline-Stile), externe Stile (Gliederungsstile)
1 Inline-Stile (Inline-Stile):
Das Innere der Struktur, d. h. der im Tag geschriebene Stil; im Stilattribut im Anfangsteil des Tags.
<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>
Beispiel:
<h1 style="color:red;">style属性的应用</h1>
Mit dieser Methode können Sie ganz einfach einen Stil für ein Element individuell definieren.
Vorteile:
Ohne Stylesheet-Dateien kann die Effizienz zu bestimmten Zeiten verbessert werden;
Der Stileffekt, der das Stilattribut verwendet, ist am stärksten und überschreibt den gleichen Stileffekt anderer Einführungsmethoden .
Nachteile:
Es ist für mehrere Elemente schwierig, Stile zu teilen, was der Wiederverwendung von Code nicht förderlich ist.
HTML- und CSS-Codes sind gemischt, was für Programmierer und Suchmaschinen nicht förderlich ist.
2. Interner Stil (Inline-Stil):
wird in die HTML-Seite geschrieben, im Head-Tag gespeichert und der Stil wird im Style-Tag geschrieben.
<style>选择器 {属性名：属性值；属性名：属性值；......}</style>Beispiel:
Vorteile: Es generiert keine zusätzlichen Anforderungen wie das Inline-Stylesheet und erreicht zunächst die Trennung von Struktur und Stil, wodurch es besser für einseitige Website-Anwendungen geeignet ist.
Nachteile: Da das interne Stylesheet in der HTML-Datei geschrieben ist, ist die Seite unrein, die Dateigröße ist groß, es ist für Webcrawler nicht förderlich, Informationen abzurufen, es ist nicht förderlich für die Wartung und Stile können nicht gemeinsam genutzt werden zwischen den Seiten
3. Externe Stile (Externer Linkstil):
Der Code ist in der CSS-Datei geschrieben. Verlinken Sie dann über das Link-Tag und die Link-Anweisung muss im
-Tag-Bereich platziert werden.Wenn der CSS-Stil in einer Datei außerhalb des Webseitendokuments platziert wird, wird er als externes Stylesheet bezeichnet. Ein CSS-Stylesheet-Dokument stellt ein externes Stylesheet dar.
Eigentlich ist ein externes Stylesheet nur eine Textdatei mit der Erweiterung .css. Wenn Sie den CSS-Stilcode in eine Textdatei kopieren und als CSS-Datei speichern, handelt es sich um ein externes Stylesheet.
Wie in der Abbildung unten gezeigt, handelt es sich um ein externes Stylesheet:
Möglichkeiten zur Einführung externer Stylesheets:
HTML-Dateien verweisen auf Stylesheets mit der Erweiterung .css. Es gibt zwei Möglichkeiten: Link Typ und Importtyp.
1), CSS-Link-Stil
Der Link-Stil bezieht sich auf die externe Definition eines CSS-Stylesheets und die Erstellung einer Datei mit der Erweiterung .CSS und die anschließende Verknüpfung mit der Seite über das Link-Tag und die Link-Anweisung Muss im
-Tag-Bereich der Seite platziert werden.Grammatik:
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2), CSS-Import
Der Import wird im
