CSS-selektor i njegova uloga u oblikovanju HTML dokumenata

Izradom web mjesta i ispunjavanjem određenih elemenata web stranice, svatko će sigurno naići na koncept kao što je CSS selektor. Ona služi za precizno određivanje svih elemenata html datoteke, njihovog dizajna i mjesta na stranici. Da biste to učinili, izradite CSS dokument koji propisuje one ili druge odabire i parametre za njihovo oblikovanje: boja, veličina, položaj i ostali. Svaki web dizajner bi trebao znati i biti u mogućnosti ispravno unijeti željene selektore. Podijeljeni su na vrste, od kojih će glavne razmotriti u nastavku.

Vrste selektora u CSS-u

Ovisno o tome koji se HTML oblik oblikuje, CSS selektor može se odnositi na jednu od sljedećih skupina:

• selektor oznaka;
• klasa selektor;
• id-selektor;
• izbornik atributa.

Odabir oznake

Također se naziva "tip selektor" ili "po elementu", to je najjednostavniji i najčešći. Kao naziv u CSS-dokumentu su imena onih elemenata html datoteke koju opisujemo. Na primjer, ako moramo navesti stil odlomka, navodimo svojstva i njihove vrijednosti za element p {background: x-color: y-size: z}. U tom će slučaju svi odlomci web stranice imati isti oblikovanje (boja pozadine, tekst, veličina itd.).

Odabir klase

A što ako trebate postaviti svoj stil različit za druge za svaki odlomak? Za to postoji klasni selektor.

CSS dokument u ovom slučaju sadrži sljedeći unos: p.first {color: x-font-size: y}. Stoga postavljamo svojstva "boja" i "veličina" samo za stavak klase prve.

U HTML dokumentu u ovom slučaju, prvo unesete atribut klase s nazivom stila. Nastava mogu biti jednako kao i stilovi koje želite primijeniti na elemente web stranice.

Odabir prema id

Često postoji potreba da se stil još preciznije definira, na primjer, na jedan element stranice ili na njihov uzorak. U takvoj situaciji id-selektor dolazi u spašavanje. U html datoteci smo dodijelili naziv željenom elementu, identificirajući ga među ostalima. Na primjer, element koji želimo postaviti drugačiji od drugog stila bit će naslov članka.

Zatim u html dokumentu dodjeljujemo h1 zaglavlju identifikator, na primjer artikalni naziv. I u CSS datoteci postavite stil dodavanjem rešetke prije naziva identifikatora: #articlename {color: blue-text-align: center}. Sada će naš naslov imati plavu boju i poravnanje u sredini.

Svaki od gore navedenih vrsta može se nazvati "jednostavnim CSS-selektorom". Definiraju oblikovanje za određeni parametar HTML dokumenta: zbirku sličnih elemenata (na primjer, sve stavke članka), jednu klasu (na primjer, samo prvi odlomak) ili određeni element (na primjer, naslov članka).

Odabir atributa

Osim gore navedenog, postoje CSS odabiri atributa - složeniji način primjene stilova. To vam omogućuje oblikovanje HTML elemenata odabranim atributom ili njegovom vrijednošću. Postoji nekoliko vrsta ovog odabira:

• po prisustvu atributa;
• po svojoj točnoj vrijednosti;
• po djelomičnoj vrijednosti atributa;
• svojim specifičnim značenjem.

Razmotrimo detaljno svaku od ovih sorti:

1. Prvi slučaj. Oblikovanje se koristi ako u html kodu postoji određeni atribut (mogu biti p, div, zaglavlje i drugi). Ako to nedostaje, koristi se univerzalni stil za sve elemente. Na primjer, za stavke koje imaju naslov (Tip alat).
2. Drugi slučaj. Stil se primjenjuje samo na one HTML elemente koji imaju točno podudaranje vrijednosti atributa. Na primjer, onim elementima unosa čija je vrijednost atributa tipa jednaka predaji.
3. Treći slučaj. Oblikovanje je ograničeno na stavke s određenom riječi na popisu vrijednosti. Na primjer, sideBar u atributu "klase" div elemenata.
4. Četvrti slučaj. Stil je specificiran samo za one elemente HTML dokumenta, za koji određeni atribut ima određenu vrijednost i počinje s njom. Na primjer, primjenom navedene boje na sve elemente čiji je jezik atributa engleski (to može biti en, en-rus, en-au, itd.).

Stoga pomoću određenog CSS-izbornika možete najbolje dizajnirati i cijelu web stranicu i opisati njegove pojedinačne elemente.