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

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

Grammatik:

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2), CSS-Import

Der Import wird im

Grammatik:

<style type="text/css">
  @import url("css文件路径");
</style>

Einfaches Beispiel:

Vor- und Nachteile externer Stylesheets

Vorteile:

• Erzielen Sie eine vollständige Trennung von Struktur- und Leistungscode

• Bequem für die Wiederverwendung und Wartung

• Da sie in separate Dateien aufgeteilt ist, wird die Größe der HTML-Datei erheblich reduziert, wodurch die Seitenstruktur für Programmierer und Webcrawler leichter lesbar ist

• Für Suchmaschinen Freundlich, ermöglicht es Suchmaschinen, die Seite höher zu bewerten, was sich positiv auf das Suchmaschinenranking der Seite auswirkt

• Das externe Stylesheet wird nach dem ersten Besuch des Benutzers auf dem Computer des Benutzers zwischengespeichert und muss nicht geladen werden beim nächsten Besuch

Nachteile:

• Wenn es viele Stile gibt, wird die CSS-Datei sehr groß und schwer zu finden. Darüber hinaus bedeutet eine weitere CSS-Datei eine weitere HTTP-Anfrage, was bei einer stark besuchten Website den Druck auf den Server erhöht.

Das obige ist der detaillierte Inhalt vonWelche drei Arten von CSS-Regeln gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!