CSS-Syntax
Eine CSS-Regel-Set besteht aus einem Selektor und einem Deklarationsblock:
Die Wähler zeigt auf das HTML-Element möchten Sie zu gestalten.
Der Deklarationsblock enthält eine oder mehrere Erklärungen durch Semikolon getrennt.
Jede Deklaration enthält eine CSS-Eigenschaft Namen und einen Wert durch einen Doppelpunkt getrennt.
Eine CSS-Deklaration endet immer mit einem Semikolon und Deklarationsblöcke werden von geschweiften Klammern umgeben.
Im folgenden Beispiel werden alle <p> Elemente werden mit einem roten Textfarbe zentriert sein:
CSS-Selektoren
CSS - Selektoren werden verwendet , um "find" (oder wählen) HTML - Elemente auf der Grundlage ihrer Elementname, ID, Klasse, Attribut, und vieles mehr.
Das Element Selector
Das Element wählt die Auswahlelemente basierend auf dem Elementnamen.
Sie können wählen Sie alle <p> Elemente auf einer Seite wie folgt aus (in diesem Fall werden alle <p> Elemente werden mit einem roten Textfarbe zentriert sein):
Die ID-Selektor
Der id-Selektor verwendet das id-Attribut eines HTML-Elements ein bestimmtes Element auszuwählen.
Die ID eines Elements sollte innerhalb einer Seite eindeutig sein, so wird die ID-Selektor verwendet ein einzigartiges Element zu wählen!
Um ein Element mit einer bestimmten ID wählen, schreiben Sie eine Raute (#) Zeichen, durch die ID des Elements gefolgt.
Der Stil der Regel unten wird auf das HTML - Element angewendet werden id="para1" :
 | Hinweis: Eine ID - Name nicht mit einer Zahl beginnen kann! |
|---|
Die Klasse Selector
Die Klasse wählt die Auswahlelemente mit einem bestimmten Klassenattribut.
So wählen Sie Elemente mit einer bestimmten Klasse, schreiben Sie eine period (.) Zeichen, mit dem Namen der Klasse gefolgt.
Im Beispiel unten, alle HTML - Elemente mit class="center" wird rot und zentriert:
Sie können auch nur bestimmte HTML-Elemente durch eine Klasse angeben, dass betroffen sein sollte.
Im Beispiel unten, nur <p> Elemente mit class="center" wird zentriert ausgerichtet:
HTML-Elemente können auch mehr als eine Klasse verweisen.
Im Beispiel unten, das <p> wird Element nach gestylt werden class="center" und class="large" :
| Hinweis: ein Klassenname nicht mit einer Zahl beginnen kann! |
|---|
Gruppieren von Selektoren
Wenn Sie Elemente mit den gleichen Stil Definitionen haben, wie folgt aus:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Es wird zu einer Gruppe besser die Wähler, um den Code zu minimieren.
Um Gruppenwähler, trennen Sie die einzelnen Wähler mit einem Komma.
Im Beispiel unten haben wir die Selektoren aus dem obigen Code gruppiert:
CSS Kommentare
Kommentare werden verwendet, um den Code zu erklären, und helfen können, wenn Sie den Quellcode zu einem späteren Zeitpunkt bearbeiten.
Kommentare werden von Browsern ignoriert.
Ein CSS - Kommentar beginnt mit /* and ends with */ . Kommentare können auch mehrere Zeilen umfassen:
Beispiel
p
{
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4»