Was sind die drei Komponenten der CSS-Syntax?

CSS-Syntax besteht aus drei Teilen: Selektor, Eigenschaft und Wert. Der Selektor kann dem Browser mitteilen, auf welche Teile der Seite der Stil angewendet wird. Der Attributwert wird verwendet, um die Parameter des Attributeffekts anzuzeigen Wert}".

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Syntax besteht aus drei Teilen: Selektor, Eigenschaft und Wert.

• Der Selektor teilt dem Browser mit, auf welche Objekte auf der Seite der Stil angewendet wird. Bei diesen Objekten kann es sich um ein bestimmtes Tag, alle Webseitenobjekte, bestimmte Klassen- oder ID-Werte usw. handeln. Wenn der Browser diesen Stil analysiert, rendert er den Anzeigeeffekt des Objekts basierend auf dem Selektor.

• Eigenschaften sind festgelegte Stiloptionen, die von CSS bereitgestellt werden. Der Attributname besteht aus einem oder mehreren Wörtern und mehrere Wörter werden durch Bindestriche verbunden. Dadurch kann die Wirkung des zu formatierenden Attributs intuitiv dargestellt werden.

• Wert (Wert) bezieht sich auf den Wert des Attributs, einen Parameter, der zur Anzeige der Wirkung des Attributs verwendet wird. Es enthält numerische Werte und Einheiten oder Schlüsselwörter.

Der Selektor ist normalerweise das HTML-Element oder -Tag, das Sie definieren möchten, die Eigenschaft ist das Attribut, das Sie ändern möchten, und jede Eigenschaft hat einen Wert. Die Attribute und Werte werden durch Doppelpunkte getrennt und von geschweiften Klammern umgeben und bilden so eine vollständige Stildeklaration:

selector {property: value}
选择器{属性:属性值}

Beispiel:

body {color: blue}

Die Funktion der obigen Codezeile besteht darin, die Textfarbe innerhalb des Body-Elements zu definieren ist blau. Im obigen Beispiel ist der Körper der Selektor und der in geschweifte Klammern eingeschlossene Teil ist die Deklaration. Die Deklaration besteht aus zwei Teilen: Attributen und Werten. Farbe ist das Attribut und Blau ist der Wert.

Mehrere Deklarationen:

Tipp: Wenn Sie mehr als eine Deklaration definieren möchten, müssen Sie jede Deklaration durch ein Semikolon trennen. Das folgende Beispiel zeigt, wie Sie einen zentrierten Absatz mit rotem Text definieren. Die letzte Regel erfordert kein Semikolon, da das Semikolon im Englischen ein Begrenzungssymbol und kein Schlusssymbol ist. Die meisten erfahrenen Designer fügen jedoch am Ende jeder Deklaration ein Semikolon hinzu. Dies hat den Vorteil, dass die Möglichkeit von Fehlern minimiert wird, wenn Sie Deklarationen zu vorhandenen Regeln hinzufügen oder davon entfernen. So:

p {text-align:center; color:red;}

Sie sollten nur ein Attribut pro Zeile beschreiben, was die Lesbarkeit der Stildefinition verbessert, etwa so:

p {
text-align: center;
color: black;
font-family: arial;
}

Leerzeichen und Groß-/Kleinschreibung beachten

Die meisten Stylesheets enthalten mehr als eine Regel, und die meisten Regeln enthalten mehr als eine Aussage. Mehrere Deklarationen und die Verwendung von Leerzeichen erleichtern die Bearbeitung des Stylesheets:

body {

color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}

Ob Sie Leerzeichen einfügen oder nicht, hat keinen Einfluss darauf, wie CSS im Browser funktioniert. Ebenso unterscheidet CSS im Gegensatz zu XHTML nicht zwischen Groß- und Kleinschreibung. Es gibt eine Ausnahme: Bei der Arbeit mit HTML-Dokumenten muss bei Klassen- und ID-Namen die Groß-/Kleinschreibung beachtet werden.

Erweiterte CSS-Syntax: Gruppierung von Selektoren

Sie können Selektoren gruppieren, sodass gruppierte Selektoren dieselbe Deklaration verwenden können.

Verwenden Sie Kommas, um die Selektoren zu trennen, die gruppiert werden müssen. Im folgenden Beispiel haben wir alle Überschriftenelemente gruppiert. Alle Titelelemente sind grün.

h1,h2,h2,h3,h5,h6 {
color: green;
}

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas sind die drei Komponenten der CSS-Syntax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!