Last updated Feb 16, 2010 - Bookmark & Share this page!

CSS-Selektoren

Syntax

Alle CSS-Stile bestehen aus 3 Teilen: einem Selektor, eine Eigenschaft und einen Wert. Damit im Einklang mit dem XHTML Formatierungsregeln alle CSS-Code sollte in Kleinbuchstaben geschrieben werden.

Syntax CSS

selector {property:value}
  • Selector: Legt fest, welche HTML-Tags sich, um die CSS-Regeln zu erhalten. So ändern Sie den Stil der alle Absätze, die Sie schreiben können p {property:value} .
  • Objekt: Dies ist der CSS-Stil, den Sie sich bewerben möchten. So ändern Sie die Textfarbe für alle Absätze, die Sie schreiben können p {color:value} .
  • Wert: Der Wert der Immobilie. Um alle Absatz-Text rot man schreiben kann p {color:red} .

Erklärungen CSS können auch mehr als eine Eigenschaft: Wert-Paar, indem Sie diese mit einem Semikolon ; .

Mehrere Immobilien: Wert-Paare

selector {property1:value1; property2:value2; property3:value3}

Immobilien möchten, dass Sie mindestens einen Wert bieten, sondern kann manchmal mehr akzeptieren. Mehrere Werte können entweder durch Leerzeichen getrennt, was bedeutet, dass alle Werte für die Eigenschaft verwendet werden. Oder sie können durch ein Komma getrennt, das bedeutet, dass eine Reihe von Werten wird angeregt und der ersten Anwendung ein verwendet wird.

Space-separierte Werte

p {border:5px solid red}

Über CSS-Anweisung verwendet alle 3 Werte auf die Ziffern mit einer 5 Pixel breiten roten Rand machen.

Komma-separierte Werte

p {font-family:verdana,arial,sans-serif}

Über CSS-Anweisung schlägt 3 Fonts für Absätze verwendet werden, von links nach rechts. Im Fall ist die Verdana nicht auf dem System des Benutzers wird es versuchen, Arial benutzen und wenn dies fehlschlägt, wird auch das Resort zu einem generischen serifenlose Schrift.

Mehrere Selektoren

Anstelle von der gleichen CSS-Regel für jedes HTML-Tag wünschen Ihnen um sie anwenden, können Sie Selektoren Gruppe zusammen und trennen Sie diese durch Kommas. Dies macht CSS-Code sehr kompakt und effizient.

Gleichen Stil für jeden Selektor (schlecht)

h1 {color:black}
h2 {color:black}
h3 {color:black}
h4 {color:black}
h5 {color:black}
h6 {color:black}

Gruppierte Selektoren (gut)

h1, h2, h3, h4, h5, h6 {color:black}

Kontextuelle Selektoren

Wenn Sie nur Styles für einen Absatz-Selektor, werden alle Absätze betroffen sein. Was passiert, wenn Sie möchten, ändern nur die Absätze in Listenelemente? In diesem Fall müssen Sie kontextuellen Selektoren, die nur eine CSS-Regel zur Anwendung, wenn ein Tag tritt in einem bestimmten Kontext. Ein Kontext-Selektor wird von der Liste der Tags in der verschachtelten, in welcher Reihenfolge sie in Ihrem Dokument angezeigt werden soll geschaffen.

Kontextuelle Selektoren

li p {color:red}
h1 em {background:gray}

Im obigen Beispiel nur Absatz Elemente <p> in Listenelemente <li> get red Text und nur hervorgehobenen Text <em> in <h1> Positionen bekommt einen grauen Hintergrund.

Kommentare

Manchmal kann es hilfreich sein, um Kommentare CSS neben einigen Aussagen gebracht zu erklären, was sie tun. Diese Kommentare werden von Web-Browsern ignoriert, aber noch hinzufügen, bis zur endgültigen Dateigröße (im Gegensatz zu Programmiersprachen wie PHP, wo Kommentare sind nicht Bestandteil der endgültigen Ausgabe).

CSS Kommentar

/* this is a comment starting with an opening slash and star and ending with a closing star and slash */
p {font-weight:bold} /* this makes all paragraphs bold */

Browser-Kompatibilität

Alle wesentlichen aktuellen Web-Browser unterstützen beide Arten von Selektoren, so können Sie sicher verwenden. Es gibt einige erweiterte CSS-Selektoren, die nicht alle werden von Browsern wie Internet Explorer unterstützt (siehe hier ein Muster?). Sie werden in den CSS abgedeckt werden fortgeschrittene Tutorial.

  • Bookmark & Share this page!