CSS-Syntax

In diesem Tutorial werden Sie lernen, wie Sie CSS-Regeln in einem Stylesheet definieren können. Sie können durch CSS-Attribute die Styles der HTML-Elemente festlegen. Verschiedene HTML-Elemente können verschiedene CSS-Attribute haben, die gesetzt werden können. CSS-Attribute können in CSS-Regeln organisiert werden. CSS-Regeln kombinieren eine Gruppe von CSS-Attributen und wenden alle Attribute auf die HTML-Elemente an, die den CSS-Regeln entsprechen.

CSS-Syntax verstehen

Eine CSS-Stylesheet besteht aus einer Gruppe von Regeln, die von Webbrowsern interpretiert und dann auf die entsprechenden Elemente im Dokument angewendet werden, z.B. Absätze, Überschriften usw.

Eine CSS-Regel hat zwei Hauptteile, einen Selector und eine oder mehrere Deklarationen:

Der Selector bestimmt, für welche Elemente in der HTML-Seite die CSS-Regeln gelten.

während die Deklarationen im Block das Format der Elemente auf der Webseite bestimmen. Jede Deklaration enthält eine Eigenschaft und einen Wert, diese Werte werden durch Doppelpunkte (:) getrennt:）getrennt und durch Semikolons (;);）endend und die Deklarenzgruppe in eckigen Klammern eingeschlossen{}.

Diese Eigenschaft ist die Stylesheet-Eigenschaft, die Sie ändern möchten. Sie können Schriftarten, Farben, Hintergründe usw. sein. Jede Eigenschaft hat einen Wert, z.B. kann der color-Attribut den Wert haben blauoder#0000FFetc.

h1　{color:blue;text-align:center;}

Um CSS lesbarer zu machen, können Sie jede Zeile mit einer Deklaration platzieren, wie folgt:

h1　{
　　　　color:　blue;
　　　　text-align:　center;
　　　}

Im obigen Beispielh1ist ein Selektor,colorundtext-alignist ein CSS-Attribut, und das gegebeneblue（h1Textfarbe im Abschnitt ist blau）undcenter（h1Text im Abschnitt zentriert)sind die entsprechenden Werte dieser Attribute.

Kommentare mit CSS schreiben

Normalerweise werden Kommentare hinzugefügt, um den Quellcode lesbarer zu machen. Sie helfen anderen Entwicklern (oder Ihnen selbst, wenn Sie den Quellcode später bearbeiten) zu verstehen, was Sie mit CSS versuchen zu erreichen. Kommentare sind für Programmierer wichtig, werden jedoch von Browsern ignoriert.

CSS-Kommentare beginnen mit/*，um den CSS-Kommentar zu beenden*/，wie im folgenden Beispiel gezeigt:

/*　Dies ist ein CSS-Kommentar　*/
h1　{
　　　　color:　blue;
　　　　text-align:　center;
}
/*　Dies ist ein mehrfaches-CSS-Kommentar, der über mehrere Zeilen hinweg geht　*/
p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;
}

Sie können auch Teile des CSS-Codes mit Kommentaren markieren, um zu debuggen, wie folgt:

h1　{
　　　　color:　blue;
　　　　text-align:　center;}
/*p　{
　　　　font-size:　18px;
　　　　text-transform:　uppercase;}
*/

CSS的大小写-sensitiv

Obwohl CSS-Attributnamen und viele Attribute-Werte nicht大小写敏感 sind. CSS-Selektoren sind jedoch大小写-sensitiv, z.B.:.maincontentund.mainContentsind zwei verschiedene class-Klassen-Selektoren und sind大小写敏感。

Daher sollten Sie aus Sicherheitsgründen annehmen, dass alle Komponenten von CSS-Regeln大小写敏感。

InKapitel weiterIn China werden Sie verschiedene Arten von CSS-Selektoren lernen.