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