CSS-Tutorial (2) Grundlegende Syntax

1. Grundlegende Syntax

Die Definition von CSS besteht aus drei Teilen: Selektor (Selektor), Attributen (Eigenschaften) und Attributwerten (Wert).
Das Grundformat ist wie folgt:
Selektor {Eigenschaft: Wert}
(Selektor {Eigenschaft: Wert})
Der Selektor kann in vielen Formen vorliegen, normalerweise handelt es sich um ein gewünschtes HTML-Tag Um einen Stil zu definieren, können Sie beispielsweise BODY, P, TABLE... mit dieser Methode definieren. Die Attribute und Werte sollten durch Doppelpunkte getrennt werden:
body {color: black }
Der Selektorkörper bezieht sich auf den Hauptteil der Seite, Farbe ist ein Attribut, das die Textfarbe steuert, und Schwarz ist der Farbwert. Der Effekt dieses Beispiels besteht darin, den Text auf der Seite schwarz zu machen.

Wenn der Wert eines Attributs aus mehreren Wörtern besteht, muss der Wert in Anführungszeichen gesetzt werden. Beispielsweise ist der Name einer Schriftart oft eine Kombination aus mehreren Wörtern:
p {font-. Familie: „sans serif“ 🎜> (Definieren Sie die Absatzschriftart als serifenlose Schrift)

Wenn Sie mehrere Attribute für einen Selektor angeben müssen, verwenden wir Semikolons, um alle Attribute und Werte zu trennen:
S {text-align: center ; color: red🎜> (Absätze werden in der Mitte angeordnet; der Text im Absatz ist rot)

Um das von Ihnen definierte Stylesheet leichter lesbar zu machen, Sie können ein separates Zeilenschreibformat verwenden:
p
{
text-align: center;
color: black;
font-family: arial
}
(The Absätze sind in der Mitte angeordnet, der Text im Absatz ist schwarz und die Schriftart ist Arial)

2. Selektorgruppe

Sie können Selektoren mit denselben Attributen und Werten kombinieren Schreiben Sie die Selektoren und trennen Sie sie durch Kommas, wodurch wiederholte Definitionen von Stilen reduziert werden können:
h1, h2, h3, h4, h5, h6 { Farbe: grün }
(Diese Gruppe umfasst alle Titelelemente und den Text jedes Titelelements ist grün)
p, Tabelle{ Schriftgröße: 9pt 🎜> (Die Textgröße in Absätzen und Tabellen beträgt Größe 9)
Der Effekt ist völlig äquivalent zu:
p { Schriftgröße: 9pt
Tabelle { Schriftgröße: 9pt

3. Mit der Klassenauswahl können Sie dieselben Elemente klassifizieren und verschiedene Stile definieren Fügen Sie beim Definieren des 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}
Dann verwenden Sie es einfach in verschiedenen Absätzen. Fügen Sie einfach den Klassenparameter hinzu, den Sie im HTML-Tag definiert haben:

Dieser Absatz ist rechtsbündig

Dieser Absatz ist zentriert

Hinweis: Der Name der Klasse kann ein beliebiges englisches Wort oder eine Kombination sein, die mit beginnt Englisch und Zahlen, im Allgemeinen kurz nach ihrer Funktion und Wirkung benannt. Eine andere Möglichkeit, den 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)
Eine solche Klasse kann auf jedes Element angewendet werden. Als nächstes klassifizieren wir sowohl das h1-Element (Titel 1) als auch das p-Element (Absatz) in die Klasse „center“, wodurch die Stile beider Elemente dem Klassenselektor „.center“ folgen:

Dieser Titel ist in der Mitte angeordnet

Dieser Absatz ist ebenfalls in der Mitte angeordnet
Hinweis: Dieser Klassenselektor, der HTML-Tags weglässt, ist unsere am häufigsten verwendete CSS-Methode. Mit dieser Methode können wir vordefinierte Klassenstile problemlos auf jedes Element anwenden.

4. ID-Selektor

Auf der HTML-Seite gibt der ID-Parameter ein einzelnes Element an und der ID-Selektor 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 die ID:

Diesen Absatz rechts ausrichten

Der ID-Selektor muss zuvor definiert werden den ID-Namen. Fügen Sie ein „#“-Zeichen hinzu. 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
{
font-size:110%;
font-weight:bold;
Farbe: #0000ff;
Hintergrundfarbe:transparent
}
(Schriftgröße beträgt 110 % der Standardgröße; fett; blau; Hintergrundfarbe ist transparent)
Im folgenden Beispiel ist die ID Das Attribut stimmt nur mit dem id-Absatzelement von ="intro" überein:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
Hintergrundfarbe:transparent
}
Hinweis: Der ID-Selektor ist sehr eingeschränkt. Er kann nur den Stil eines bestimmten Elements individuell definieren und wird im Allgemeinen nur in besonderen Fällen verwendet.

5. Der Einschlussselektor

kann verwendet werden, um ein Stylesheet für eine bestimmte Elementeinschlussbeziehung zu definieren. Element 1 enthält Element 2. Diese Methode ist nur für Element 2 innerhalb von Element 1 definiert. , keine Definition für einzelnes Element 1 oder Element 2, zum Beispiel:
table a
{
font-size: 12px
}
Der Link in der Tabelle ändert den Stil und den Text Die Größe beträgt 12 Pixel, während der Text von Links außerhalb der Tabelle die Standardgröße behält.

6. Die kaskadierende Natur von Stylesheets

Kaskadierung ist Vererbung. Die Vererbungsregel des Stylesheets besteht darin, dass der externe Elementstil beibehalten und von anderen in diesem Element enthaltenen Elementen geerbt wird. 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. Verschachteln Sie beispielsweise P-Tags in p-Tags:
p { color: red-size:9pt🎜>......

dieses Absatzes Der Text ist in roter 9-Punkt-Schriftart

(der Inhalt im P-Element erbt die durch p definierten Attribute)
Hinweis : In einigen Fällen erbt der interne Selektor nicht die Werte der umgebenden Selektoren, 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.

Wenn außerdem bei der Stylesheet-Vererbung Konflikte auftreten, hat immer der zuletzt definierte Stil Vorrang. Wenn die Farbe von P im obigen Beispiel definiert ist:
p { color: red-font-size:9pt}
p {color: blue}
……

< ;p>
Der Text in diesem Absatz hat die blaue Schriftgröße 9

Wir können sehen, dass die Textgröße im Absatz der Schriftgröße entspricht 9 ist ein geerbtes p-Attribut, und das Farbattribut basiert auf der letzten Definition.

Wenn verschiedene Selektoren dasselbe Element definieren, muss die Priorität zwischen verschiedenen Selektoren berücksichtigt werden. ID-Selektor, Klassenselektor und HTML-Tag-Selektor. Da der ID-Selektor dem Element zuletzt hinzugefügt wird, hat er die höchste Priorität, gefolgt vom Klassenselektor. Wenn Sie die Beziehung zwischen diesen dreien überschreiten möchten, können Sie !important verwenden, um die Priorität des Stylesheets zu erhöhen, zum Beispiel:
p { color: #FF0000!important }
.blue { color: #0000FF }
#id1 { color: #FFFF00}
Wir fügen diese drei Stile gleichzeitig zu einem Absatz auf der Seite hinzu. Es wird schließlich roter Text gemäß dem durch !important deklarierten HTML-Tag-Selektorstil sein. Wenn !important entfernt wird, wird der ID-Selektor mit der höchsten Priorität in gelbem Text angezeigt.

7. Kommentare

Sie können Kommentare in CSS einfügen, um die Bedeutung Ihres Codes zu erklären, wenn Sie den Code in Zukunft bearbeiten und ändern . Im Browser werden Kommentare nicht angezeigt. CSS-Kommentare beginnen mit „/*“ und enden mit „*/“, wie folgt:
/* Absatzstilblatt definieren*/
p
{
text-align: center; die Textanordnung*/
Farbe: schwarz; /* Text ist schwarz*/
Schriftfamilie: Arial /* Schriftart ist Arial */

Das obige ist der detaillierte Inhalt vonCSS-Tutorial (2) Grundlegende Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!