Einführung in die CSS-Syntax

Die Definition von CSS besteht aus drei Teilen:

Selektor (Selektor) ,

Eigenschaften

Der Wert der Immobilie.

Syntax: selector {property: value} (selector {Attribut: Wert})

1. Beschreibung

Der Selektor kann in vielen Formen vorliegen, normalerweise Sie möchten um den Stil von HT zu definieren ML-Tags wie BODY, P, TABLE können mit dieser Methode definiert werden. Die Attribute und Werte sollten durch Doppelpunkte getrennt werden:

Beispiel: Körper {color: black}, der Effekt dieses Beispiels besteht darin, dass der Text auf der Seite schwarz wird.

Wenn der Wert eines Attributs aus mehreren Wörtern besteht, müssen dem Wert Anführungszeichen hinzugefügt werden. Beispielsweise ist der Name einer Schriftart oft eine Kombination aus mehreren Wörtern:

Beispiel: p {font-family: „sans serif“} (definieren Sie die Absatzschriftart als Sans Serif)

Wenn Sie mehrere Attribute für einen Selektor angeben müssen, verwenden Sie Semikolons, um alle Attribute und Werte zu trennen:

Beispiel :p { Textausrichtung: Mitte; Farbe: Rot} (Die Absätze sind in der Mitte angeordnet und der Text im Absatz ist rot)

2. Auswahlgruppe

ist verfügbar Schreiben Sie, indem Sie Selektoren mit denselben Attributen und Werten kombinieren und die Selektoren durch Kommas trennen, wodurch wiederholte Definitionen von Stilen reduziert werden können:

h1, h2, h3, h4, h5, h6 { Farbe: grün } (Diese Gruppe umfasst alle Titelelemente und der Text jedes Titelelements ist grün)

p, table{ Schriftart- Größe: 9pt } (Die Textgröße in Absätzen und Tabellen ist Punkt 9)

Der Effekt ist völlig äquivalent zu:

p { Schriftgröße: 9pt }

Tabelle { Schriftgröße: 9pt }

3. Klassenselektor

Mit dem Klassenselektor können Sie dieselben Elemente klassifizieren und unterschiedliche definieren . Fügen Sie beim Definieren eines Klassenselektors einen Punkt vor dem Namen der benutzerdefinierten Klasse hinzu. Wenn Sie zwei unterschiedliche Absätze wünschen, einen rechtsbündigen und einen zentrierten, können Sie zunächst zwei Klassen definieren:

p.right {text-align: right}

p.center {text-align: center}

Verwenden Sie es dann in verschiedenen Absätzen, fügen Sie einfach die Klassen hinzu, die Sie im HTML-Tag definiert haben s-Parameter:

rechts Dieser Absatz ist rechtsbündig

zentriert Dieser Absatz ist zentriert

-Klassenselektor zu verwenden, besteht darin, den HTML-Tag-Namen im Selektor wegzulassen, sodass mehrere verschiedene Elemente im gleichen Stil definiert werden können:

center {text-align: center} (definieren Sie den .center-Klassenselektor, um Text zu zentrieren). Im Folgenden werden sowohl das h1-Element (Titel 1) als auch das p-Element (Absatz) in die Klasse „center“ klassifiziert, wodurch die Stile beider Elemente dem Klassenselektor „.center“ folgen:

Dieser Titel ist zentriert

Dieser Absatz ist auch zentriert

Dieser Klassenselektor, der HTML-Tags weglässt, ist in Zukunft die am häufigsten verwendete CSS-Methode Wenden Sie vordefinierte Klassenstile bequem auf jedes Element an.

4. ID-Selektor

In der HTML-Seite gibt der ID-Parameter ein einzelnes Element und die ID an Selektor Das Symbol wird verwendet, um einen separaten Stil für dieses einzelne Element zu definieren. Die Anwendung des ID-Selektors ähnelt der des Klassenselektors. Ersetzen Sie einfach CLASS durch ID. Ersetzen Sie die Klasse im obigen Beispiel durch ID: Richten Sie diesen Absatz rechts aus und definieren Sie den ID-Selektor mit einem „#“-Zeichen vor dem ID-Namen. Wie beim Klassenselektor gibt es zwei Möglichkeiten, die Attribute des ID-Selektors zu definieren. Im folgenden Beispiel stimmt das ID-Attribut mit allen Elementen mit id="intro" überein:

#intro

{

Schriftgröße:110%;

Schriftstärke:fett;

Farbe: #0000ff>} (Schriftgröße beträgt 110 % der Standardgröße; fett; blau; Hintergrundfarbe transparent)

Im folgenden Beispiel stimmt das ID-Attribut nur mit Absatzelementen mit id="intro" überein:

p#intro

{

Schriftgröße: 110%

f ont-weight: fett;

Farbe: #0000ff;

Hintergrundfarbe: t transparent

}

Der ID-Selektor ist sehr eingeschränkt und kann den Stil eines bestimmten Elements nur individuell definieren, normalerweise nur unter besonderen Umständen. verwenden.

CSS-Album

Das können Sie Ein Element einzeln anvisieren Ein Stylesheet, das Beziehungsdefinitionen enthält, enthält Element 2. Diese Methode ist nur für Element 2 innerhalb von Element 1 definiert. Es gibt keine Definition für einzelnes Element 1 oder Element 2, zum Beispiel:

Tabelle a

{

Schriftgröße: 12px

}

Die Links innerhalb der Tabelle haben ihren Stil geändert und die Textgröße beträgt 12 Pixel, während der Text der Links außerhalb der Tabelle die Standardgröße behält.

6. Die kaskadierende Natur von Stylesheets

Die kaskadierende Natur von Stylesheets ist Vererbung und die Vererbung Regeln von Stylesheets sind extern. Der Elementstil wird beibehalten und von anderen in diesem Element enthaltenen Elementen geerbt. Tatsächlich erben alle innerhalb eines Elements verschachtelten Elemente die vom äußeren Element angegebenen Attributwerte, wodurch manchmal viele Ebenen verschachtelter Stile übereinander gestapelt werden, sofern nichts anderes geändert wird. Zum Beispiel das Verschachteln von P-Tags in DIV-Tags:

div { color: red; Schriftgröße: 9pt

Der Text dieses Absatzes hat die rote Schriftgröße 9 (der Inhalt im P-Element erbt die durch DIV definierten Attribute)

Es gibt Fälle, in denen innere Selektoren nicht die Werte umgebender Selektoren erben, aber theoretisch sind diese etwas Besonderes. Beispielsweise wird der Wert des oberen Randattributs nicht vererbt. Intuitiv hat ein Absatz nicht denselben oberen Randwert wie der Dokumentkörper. Darüber hinaus hat bei Konflikten bei der Stylesheet-Vererbung immer der zuletzt definierte Stil Vorrang. Wenn die Farbe von P im obigen Beispiel definiert ist:

div { color: red-font-size:9pt}

p {; Farbe: blau