CSS-Selektor, und seine Rolle bei der Formatierung html-Dokument

click fraud protection

Erstellen einer Website und mit bestimmten Elementen einer Web-Seite zu füllen, wird jeder eine Laufzeit wie CSS-Selektor zu stellen.Er dient dazu, alle Elemente der html-Datei von ihrem Design und Stelle auf der Seite die meisten genau zu bestimmen.Um dies zu tun, erstellen Sie eine CSS-Dokumente, die aus Zaubern bestimmte Selektoren und ihre Formatierungsoptionen: Farbe, Größe, Position und andere.Jeder Web-Designer sollten wissen, und in der Lage, richtig zu überprüfen Sie die Verfügbarkeit der Selektoren.Sie werden von Typ unterteilt, die Haupt von denen wir unten besprechen.

Typen Selektoren in CSS

Je nach dem, was html-Element gilt Formatierung kann CSS-Wahlschalter auf eine der folgenden Gruppen vorzulegen:

  • Wahl Tags;
  • Klassenauswahl;
  • id-Selektor;
  • Wahlattributen.

Tag-Selektor

Es wird auch als "Typ-Selektor" und "auf den Punkt", es ist die einfachste und häufig.Als seine CSS-Dokument sind die Namen der Elemente html-Datei, die wir beschreiben.Zum Beispiel, wenn wir brauchen, um das Absatzformat festgelegt, wir geben die Eigenschaften und deren Werte für das Element p {background: x;Farbe: y;Größe: z}.In diesem Fall werden alle Absätze Webseite haben (, Hintergrundfarbe, Textgröße und dergleichen. D.) das gleiche Format.

Klassenauswahl

Aber was, wenn Sie benötigen, um Ihre Fragen jeden Absatz ist anders als andere Arten?Zu diesem Zweck gibt es eine Klasse-Selektor.P.first {color::

CSS-Dokument in diesem Fall wird ein Eintrag ähnlich der folgenden enthalten X;font-size: y}.Damit die Eigenschaften der "Farbe" und "Größe" definieren wir nur für einen Absatz des ersten Klasse.

in html-Dokument in diesem Fall geben Sie das Klassenattribut auf den Namen des Stils ersten.Klassen können so viel wie der Stil, den Sie für Webseitenelemente anwenden wollen.

Selektor id

Oft besteht die Notwendigkeit, die Art genauer beispielsweise einem Element einer Seite oder in der Probe zu definieren.In dieser Situation wird die Beihilfe id-Selektor.Die HTML-Datei vergeben Sie einen gewünschten Artikel Namen, die es unter den anderen identifiziert.Zum Beispiel das Element, das wir wollen, einen Stil von den anderen unterscheidet, Headliner Artikel zu setzen.

Weisen Sie dann html-Belegkopf h1 Kennung, wie Artikelname.Und in der CSS-Datei, um den Stil eingestellt, indem auf die Namen Kennung Gitter: #articlename {color: blue;text-align: center}.Jetzt ist unsere Schlagzeile wird die Farbe blau und zentriert werden.

Jede der oben genannten Typen können "eine einfache CSS-Selektor" genannt werden.Sie definieren die Formatierung für einen bestimmten Parameter html-Dokument: zusammen ähnliche Elemente (zum Beispiel alle Absätze des Artikels), eine Klasse (zum Beispiel nur die erste Ziffer) oder einen bestimmten Artikel (zum Beispiel der Titel des Artikels).

Auswahlattribute

Zusätzlich zu dem oben gibt es in CSS-Attribut Selektoren - ein anspruchsvoller Weg, um Arten zu verwenden.Es ermöglicht html Formatierungselemente einer ausgewählten Attribut oder Wert.Es gibt mehrere Arten dieser Wahl:

  • durch das Vorhandensein eines Attributs;
  • auf ihrer exakten Wert;
  • auf Teilattributwert;
  • seiner besonderen Wert.

Betrachten wir jede dieser Sorten:

  1. ersten Fall.Die Formatierung wird angewendet, wenn es ein bestimmtes Attribut in dem HTML-Code (es kann p, div, header, usw. sein).Wenn es nicht ist, verwendet es eine allgemein für alle Elemente der Stil.Zum Beispiel mit Elementen der Titel (Tooltip).
  2. zweiten Fall.Der Stil gilt nur für die HTML-Elemente, die eine genaue Übereinstimmung Attributwerte sind.Um beispielsweise den Elementen der Eingabe, wobei der Wert von dem Typ-Attribut gleich vorzulegen.
  3. dritten Fall.Unter dem Format enthält nur Elemente in der Liste von Werten, die ein bestimmtes Wort hat.Zum Beispiel sideBar Attribut "class" in den Elementen div.
  4. vierten Fall.Der Stil nur auf diejenigen Elemente der html-Dokument, in dem die besondere Eigenschaft einen bestimmten Wert hat, und beginnt mit ihm gesetzt.Zum Beispiel kann die Verwendung der angegebenen Farbe auf alle Elemente, Attribute, welche die englische Sprache (es sein kann, en, en-rus, en-au und so weiter. D.).

Somit kann unter Verwendung der einen oder anderen CSS-Selektor kann am besten in einer ganzen Web-Seite platziert werden, und beschreiben einige seiner Elemente.