So wählen Sie ein HTML -Element in CSS aus

Für die Verbesserung des Erscheinungsbilds von Webseiten, die in HTML oder XML geschrieben wurden, verwenden Webprogrammierer CSS -Regeln, um ihre Webseiten zu verschönern. Die CSS -Syntax bietet eine breite Palette von Selektoren Auswählen von HTML -Elementen. Durch Auswählen von HTML -Elementen mithilfe von CSS -Selektoren kann der Programmierer seine Websites verbessern. In diesem Tutorial lernen wir eine Reihe von CSS -Selektoren, mit denen wir HTML -Elemente auswählen können.

CSS -Selektoren

Ein Selektor ist eine grundlegende CSS -Regel. Diese Selektoren informieren den Browser, um bestimmte HTML -Elemente auszuwählen und sie auf die angegebene Weise zu stylen.

Syntax:

H2
Text-Align: Mitte;
Farbe: Aqua;

P
Schriftgröße: 12px;
Farbe blau;

Wie bereits erwähnt, gibt es eine Reihe von Selektoren, die von CSS bereitgestellt werden, die sind.

1. Grundauswahl
2. Attributauswahl
3. Kombinatorauswahl
4. Typ Selector
5. Pseudo-Klasse-Selektoren
6. Pseudo-Elemente-Selektoren

Lassen Sie uns im Detail über sie erfahren.

Grundauswahl

Diese Kategorie von Selektoren besteht aus einigen primären CSS -Selektoren.

Elementauswahl

Ein Element -Selektor wird verwendet, um HTML -Elemente auf der Grundlage auszuwählen. Zum Beispiel,

H2
Text-Align: Mitte;
Farbe blau;

Im obigen Beispiel wählt der Element Selector aus

Element und setzt seine Farbe auf Blau und richtet den Text in die Mitte der Seite/des Containers aus.

ID -Selektor

Da jedes Element eine eindeutige ID haben kann, zielt diese Selektor auf diese ID ab, um das Element auszuwählen und seinen Eigenschaften Werte zuzuweisen. Um ein HTML -Element mit seiner ID auszuwählen, verwenden wir ein Hash (#) -Symbol, gefolgt von ID.

Im folgenden Beispiel wählt der ID -Selektor ein Element mit ID = „Head1“ aus und passt seine Ausrichtung nach links an, während die Farbe an Aqua ist.

#head1
Text-Align: links;
Farbe: Aqua;

Klassenauswahl

Klassenauswahlstile ein HTML -Element auf der Grundlage eines bestimmten Klassenattributs. Um ein HTML -Element mit seinem Klassennamen auszuwählen, verwenden wir einen Punkt, gefolgt von einem Klassennamen.

.hauptsächlich
Text-Align: links;
Rand: 3px;
Randboden: 3px;

Universeller Selektor

Um alle Elemente einer HTML -Seite auszuwählen, verwenden wir einen universellen Selektor. Es wird durch ein Sternchenzeichen (*) dargestellt.

*
Farbe Beige;
Text-Align: Justify;

Gruppierungswähler

Zum Zweck der Auswahl aller Elemente, die Sie auf ähnliche Weise auswählen möchten.

H1, H2, P
Farbe: Schwarz;
Text-Align: Mitte;
Schriftfamilie: 'Times New Roman', Times, Serif;

Attributauswahl

Ein Attribut -Selektor verwendet bestimmte Attributnamen, um HTML -Elemente auszuwählen.

ein Ziel]
Farbe grün;
Text-Align: Mitte;

Im obigen Beispiel hat der Selektor, der alle Elemente davon auswählt, ein Attributziel. Der Attribut -Selektor ist weiter in verschiedene Kategorien unterteilt. Die folgende Tabelle erklärt sie.

Attribut -Selektoren	Beschreibung	Beispiel
[Attribut = "Wert"]	Es wählt Elemente mit einem bestimmten Attribut und Wert aus.	div [lang = fr] Hintergrund-Color = rot;
[Attribut ~ = "Wert"]	Es wählt Elemente aus, die ein bestimmtes Wort in ihrem Attributwert haben.	IMG [Titel ~ = "Blume"] Border: 2PX Solid Blue
[Attribut | = "Wert"]	Es wählt ein Element mit einem bestimmten Attribut aus, dessen Wert genau der bestimmte Wert oder der bestimmte Wert sein kann, der nach einem Bindestrich kommt (-).	p [lang | = en] Schriftgröße: 12px;
[Attribut^= "Wert"]	Es wählt Elemente mit Attributen mit Werten aus, die mit einem bestimmten Wert beginnen.	a [class^= "top"] Hintergrundfarbe: Pink;
[Attribut $ = "Wert"]	Es wählt Elemente mit Attributen mit einem bestimmten Endwert aus.	IMG [Src $ = Hund.JPG] Border: 2px; solide gelb
[Attribut*= "Wert"]	Es wählt ein Element mit Attributwert mit einem bestimmten Wert aus.	a [href*= "Beispiel"] Farbe: blau;

Kombinatorauswahl

Um eine oder mehrere Arten von Basis -CSS -Selektoren zu kombinieren. Es gibt vier Arten von Kombinator -Selektoren, die sind;

Kombinatorauswahl	Beschreibung	Beispiel
Nachfahre	Es wählt Elemente aus, die Nachkommen eines bestimmten Elements sind.	div p Farbe blau;
Kind	Es wählt die Elemente aus, die erste Kinder eines bestimmten Elements sind.	div> p Farbe blau;
Angrenzendes Geschwister	Es wählt ein Element aus, das unmittelbar nach einem anderen bestimmten Element kommt.	div + p Farbe blau;
Allgemeines Geschwister	Es wählt alle Elemente aus, die die nächsten Geschwister eines bestimmten Elements sind.	div ~ p Farbe blau;

Geben Sie Selektoren ein

Typ -Selektoren werden in CSS verwendet, wenn Sie alle Elemente eines bestimmten Typs in einem Dokument auswählen möchten. Zum Beispiel.

Span
Hintergrundfarbe: Blau;

Pseudo-Klasse-Selektoren

Pseudo-Klasse-Selektoren werden verwendet, wenn Sie einen bestimmten Zustand eines Elements beschreiben möchten. Verschiedene Pseudoklassen sind.

Pseudoklassen	Beschreibung	Beispiel
:Verknüpfung	Es stiles einen Link, der noch nicht besucht wurde.	A: Link Farbe: Aqua;
:hat besucht	Es stiles einen Link, der bereits besucht wurde.	A: Besucht Farbe: grün;
:schweben	Es enthält ein Element, wenn die Maus darauf schwebt.	A: Hover Farbe: Pink
: Acitve	Es enthält einen aktiven Link.	A: aktiv Farbe: blau;
:Fokus	Es wird verwendet, um Elemente mit Fokus zu stylen.	P: Fokus Hintergrundfarbe: lila;
:erstes Kind	Es wird verwendet, um das erste Kind eines bestimmten Elements zu stylen.	P: Erstkind Farbe: blau;
:letztes Kind	Es entspricht all den Elementen, die das letzte Kind seines Elternteils sind.	P: Last-Kind Schriftgröße: 6px;
: Lang	Es gibt die Sprache eines bestimmten Elements an.	F: Lang (Eng) Zitate: "-" "-";

Pseudo-Elemente-Selektoren

Um einige bestimmte Teile eines Elements zu stylen, werden Pseudoelemente verwendet. Pseudoelemente sind wie folgt;

Pseudoelemente	Beschreibung	Beispiel
::erste Linie	Es wird verwendet, um die erste Zeile eines Textes zu stylen.	P :: Erste Zeile Schriftgröße: 6px: Farbe: rot;
::erster Brief	Es wird verwendet, um den ersten Buchstaben eines Textes zu stylen.	P :: Erstgeschichte Schriftgewicht: 7px; Farbe blau;
::Vor	Es fügt Inhalte vor einem Element hinzu.	P :: vor img = “Blume.JPG ”;
::nach	Es fügt Inhalte nach einem Element hinzu.	p :: nach img = “Blume.JPG ”;
::Marker	Es wird verwendet, um Marker einer Liste zu stylen.	:: marker color: rot; Schriftgewicht: 2px;
::Auswahl	Es wird verwendet, um ausgewählte Teil eines Elements zu stylen.	:: Auswahl Hintergrundfarbe: Blau; Schriftgröße: 2px;

Abschluss

Um ein HTML -Element in CSS auszuwählen, bietet CSS Selectors, um den Browser zu informieren, um bestimmte HTML -Elemente auszuwählen und sie auf die angegebene Weise zu stylen. CSS liefert zahlreiche Selektoren. Hier haben wir eine Liste von einigen gegeben. In diesem Tutorial haben wir verschiedene Kategorien von CSS -Selektoren und deren Verwendung untersucht.