Jak wybrać element HTML w CSS

Aby zwiększyć wygląd stron internetowych napisanych w HTML lub XML, programiści internetowi używają zasad CSS do upiększania stron internetowych. Składnia CSS zapewnia szeroki zakres Selektory Aby wybrać elementy HTML. Wybór elementów HTML za pomocą selektorów CSS pozwoli programistowi na ulepszenie ich stron internetowych. W tym samouczku nauczymy się wielu selektorów CSS, z którymi możemy wybrać elementy HTML.

Selektory CSS

Selektor to podstawowa zasada CSS. Selektory te informują przeglądarkę do wybrania określonych elementów HTML i stylizowania ich w określony sposób.

Składnia:

H2
Text-Align: Center;
Kolor: Aqua;

P
Rozmiar czcionki: 12px;
kolor niebieski;

Jak już wspomniano, istnieje wiele selektorów dostarczanych przez CSS.

1. Podstawowe selektory
2. Selektor atrybutu
3. Selektory kombinatory
4. Typ selektor
5. Pseudoklasy selektory
6. Pseudoelementy selektory

Dowiedzmy się o nich szczegółowo.

Podstawowe selektory

Ta kategoria selektorów składa się z niektórych podstawowych selektorów CSS.

Selektor elementu

Do wyboru elementów HTML służy do wyboru elementów HTML. Na przykład,

H2
Text-Align: Center;
kolor niebieski;

W powyższym przykładzie selektor elementu wybiera

element i ustawia swój kolor na niebieski i wyrównuje tekst w środku strony/kontenera.

Selektor identyfikatora

Ponieważ każdy element może mieć unikalny identyfikator, więc ten selektor jest celem tego identyfikatora, aby wybrać element i przypisać wartości do jego właściwości. Aby wybrać element HTML za pomocą jego identyfikatora, używamy symbolu skrótu (#), a następnie identyfikatora.

W poniższym przykładzie selektor ID wybiera element z ID = „Head1” i dostosowuje jego wyrównanie do lewej, podczas gdy kolor do Aqua.

#Head1
Text-Align: lewy;
Kolor: Aqua;

Selektor klas

Selektor klasowy styl elementu HTML na podstawie określonego atrybutu klasy. Aby wybrać element HTML za pomocą jego nazwy klasy, używamy kropki, a następnie nazwy klasy.

.główny
Text-Align: lewy;
margines: 3px;
BARGO-Bottom: 3px;

Uniwersalny selektor

Aby wybrać wszystkie elementy strony HTML, korzystamy z uniwersalnego selektora. Jest reprezentowany przez znak gwiazdkowy (*).

*
kolor bezowy;
Text-Align: Justify;

Grupowanie selektora

W celu wybrania wszystkich tych elementów, które chcesz wybrać w podobny sposób, użyj selektora grupowania.

H1, H2, P
czarny kolor;
Text-Align: Center;
Font-family: „Times New Roman”, Times, Serif;

Selektor atrybutu

Selektor atrybutów używa określonych nazw atrybutów do wyboru elementów HTML.

cel]
Zielony kolor;
Text-Align: Center;

W powyższym przykładzie selektor IIS Wybieranie wszystkich elementów ma cel atrybutu. Selektor atrybutów jest dalej podzielony na różne kategorie. Poniższa tabela wyjaśnia je.

Selektory atrybutów	Opis	Przykład
[atrybut = „wartość”]	Wybiera elementy posiadające określony atrybut i wartość.	div [lang = fr] kolor tła = czerwony;
[atrybut ~ = „wartość”]	Wybiera elementy, które mają określone słowo w ich wartości atrybutu.	IMG [tytuł ~ = „kwiat”] border: 2px solid blue
[atrybut | = „wartość”]	Wybiera element z konkretnym atrybutem, którego wartością może być dokładnie konkretna wartość lub konkretna wartość, która pojawia się po łączniku (-).	p [lang | = en] font-size: 12px;
[atrybut^= „wartość”]	Wybiera elementy z atrybutami o wartościach, zaczynając od określonej wartości.	a [class^= „top”] kolor tła: Pink;
[atrybut $ = „wartość”]	Wybiera elementy z atrybutami o określonej wartości końcowej.	img [src $ = pies.jpg] border: 2px; Solidny żółty
[atrybut*= „wartość”]	Wybiera element o wartości atrybutu o określonej wartości.	a [href*= „przykład”] color: blue;

Selektory kombinatory

Aby połączyć jeden lub więcej rodzajów podstawowych selektorów CSS, używamy selektora kombinatora. Istnieją cztery rodzaje selektorów kombinatory;

Selektory kombinatory	Opis	Przykład
Potomek	Wybiera elementy, które są potomkami określonego elementu.	div p kolor niebieski;
Dziecko	Wybiera te elementy, które są pierwszymi dziećmi z pewnego elementu.	div> p kolor niebieski;
Sąsiednie rodzeństwo	Wybiera element, który pojawia się natychmiast po innym konkretnym elemencie.	div + p kolor niebieski;
Ogólne rodzeństwo	Wybiera wszystkie te elementy, które są następnym rodzeństwem konkretnego elementu.	div ~ p kolor niebieski;

Wpisz selektory

Typ selektory są używane w CSS, gdy chcesz wybrać wszystkie elementy określonego typu w dokumencie. Na przykład.

Zakres
kolor tła: niebieski;

Pseudoklasy selektory

Pseudoklasy selektory są używane, gdy chcesz opisać określony stan elementu. Różne pseudoklasy są.

Pseudoklasy	Opis	Przykład
:połączyć	Styluje link, który jeszcze nie został odwiedzony.	A: link color: aqua;
: odwiedzono	Styluje link, który już został odwiedzony.	A: odwiedzone Color: Green;
:unosić się	Styluje element, gdy mysz się na nim unosi.	A: Hover Color: Pink
: Acitve	Styluje aktywny link.	A: Active Color: Blue;
:centrum	Służy do stylizacji elementów z ostrością.	P: Focus kolor tła: fiolet;
:pierworodny	Służy do stylizacji pierwszego dziecka z określonego elementu.	P: Pierwszy dziecko Color: Blue;
:ostatnie dziecko	Pasuje do wszystkich tych elementów, które jest ostatnim dzieckiem jego rodzica.	P: Last-Child Font-Size: 6px;
: Lang	Określa język konkretnego elementu.	P: Lang (eng) cytaty: „-” „-”;

Pseudoelementy selektory

W celu stylizowania niektórych określonych części elementu używane są pseudoelementy. Pseudoelementy są następujące;

Pseudoelementy	Opis	Przykład
::Pierwsza linia	Służy do stylizowania pierwszego wiersza tekstu.	P :: pierwsza linia Font-size: 6px: kolor: czerwony;
:: Pierwszy liter	Służy do stylizowania pierwszej litery tekstu.	P :: First-Letter Font-Weight: 7px; kolor niebieski;
::zanim	Dodaje treść przed elementem.	P :: przed img = „kwiat.jpg ”;
::Po	Dodaje treść po elemencie.	P :: po img = „kwiat.jpg ”;
::znacznik	Służy do stylizowania markerów listy.	:: marker color: czerwony; Font-Waight: 2px;
::wybór	Służy do stylowania wybranej części elementu.	:: Wybór kolor tła: niebieski; Font-size: 2px;

Wniosek

Aby wybrać element HTML w CSS, CSS zapewnia selektory do informowania przeglądarki do wybrania określonych elementów HTML i stylizowania w określony sposób. CSS zapewnia liczne selektory. Tutaj podaliśmy listę niektórych: podstawowych selektorów, selektora atrybutów, selektora typu, selektorów kombinatorów, selektorów klasy pseudo, selektorów pseudoelementów. W tym samouczku badaliśmy różne kategorie selektorów CSS i jak ich używać.