Selektoren sind normalerweise HTML-Elemente, die gestaltet werden müssen.
Jede Deklaration besteht aus einem Attribut und einem Wert.
Eigenschaft ist das Stilattribut, das Sie festlegen möchten. Jedes Attribut hat einen Wert. Eigenschaften und Werte werden durch Doppelpunkte getrennt.
Die meisten Stylesheets enthalten mehr als eine Regel und die meisten Regeln enthalten mehr als eine Deklaration. Mehrere Deklarationen und die Verwendung von Leerzeichen erleichtern die Bearbeitung von Stylesheets:
① Gruppierung von Selektoren. Sie können Selektoren gruppieren, sodass gruppierte Selektoren dieselbe Deklaration verwenden. Verwenden Sie Kommas, um Selektoren zu trennen, die gruppiert werden müssen. Im folgenden Beispiel haben wir alle Überschriftenelemente gruppiert. Alle Titelelemente sind grün.
Laut CSS erben untergeordnete Elemente Eigenschaften von ihrem übergeordneten Element. Aber es funktioniert nicht immer so. Schauen Sie sich diese Regel an:
Basierend auf der oben genannten Regel verwendet das Hauptelement der Website die Schriftart Verdana (vorausgesetzt, diese ist auf dem System des Besuchers verfügbar).
Durch die CSS-Vererbung erben untergeordnete Elemente die Attribute, die dem Element der obersten Ebene (in diesem Fall body) gehören (diese untergeordneten Elemente sind z. B. p, td, ul, ol, ul, li, dl, dt, und dd). Es sind keine zusätzlichen Regeln erforderlich. Alle untergeordneten Elemente des Körpers sollten die Schriftart Verdana anzeigen, ebenso wie die untergeordneten Elemente des untergeordneten Elements. Und in den meisten modernen Browsern ist dies tatsächlich der Fall.
3.CSS-abgeleiteter Selektor
Sie können das Markup prägnanter gestalten, indem Sie Stile basierend auf dem Kontext der Position eines Elements definieren.
Im folgenden Beispiel ist nur das starke Element im li-Element kursiv dargestellt. Es ist nicht erforderlich, eine spezielle Klasse oder ID für das starke Element zu definieren, und der Code ist prägnanter.
id-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind. Der ID-Selektor wird mit „#“ definiert.
Für die beiden ID-Selektoren unten kann der erste die Farbe des Elements als Rot und der zweite die Farbe des Elements als Grün definieren:
In modernen Layouts werden ID-Selektoren häufig zum Erstellen abgeleiteter Selektoren verwendet.
Der obige Stil wird nur auf Absätze angewendet, die in Elementen mit der ID der Seitenleiste erscheinen. Bei diesem Element handelt es sich höchstwahrscheinlich um eine Div- oder Tabellenzelle, es könnte sich jedoch auch um eine Tabelle oder ein anderes Element auf Blockebene handeln.
Im folgenden HTML-Code haben sowohl h1- als auch p-Elemente die Mittelklasse. Das bedeutet, dass beide die Regeln im „.center“-Selektor respektieren.
<span style="color: #0000ff;"><</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This heading will be center-aligned
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This paragraph will also be center-aligned.
</span><span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
Nach dem Login kopieren
① Wie id kann auch class als abgeleiteter Selektor verwendet werden:
Tabellenzellen innerhalb größerer Elemente mit dem Klassennamen Fancy zeigen orangefarbenen Text auf grauem Hintergrund an. (Das größere Element namens fancy könnte eine Tabelle oder ein Div sein)
Stile für HTML-Elemente mit angegebenen Attributen festlegen Sie können Stile für HTML-Elemente mit angegebenen Attributen festlegen, nicht nur für Klassen- und ID-Attribute.
① Attributauswahl
Stilisieren Sie alle Elemente mit einem Titelattribut:
