CSS Odabiri. Vrste selektora

Jezik za opisivanje izgleda CSS dokumenta stalno se razvija. S vremenom se povećava ne samo njegova snaga i funkcionalnost već i fleksibilnost i jednostavnost korištenja.

CSS selektori

Počnimo razumjeti. Otvorite bilo koji CSS tutorial, barem jedan odjeljak u njemu će se usredotočiti na vrste selektora. To ne čudi jer su jedan od najprikladnijih načina upravljanja sadržajem stranice. Pomoću njih možete komunicirati s apsolutno bilo kojim HTML elementima. Sada postoje 7 vrsta odabira:

• za tag-
• za nastavu;
• za ID;
• univerzalna;
• atributa;
• za interakciju s pseudoklasama;
• za kontrolu pseudo-elemenata.

Sintaksa je jednostavna. Da biste saznali kako koristiti CSS selektori, samo pročitajte o njima. Koje je opcije bolje kontrolirati sadržaj u vašem slučaju? Pokušajmo razumjeti.

Odabir oznaka

Ovo je najjednostavnija opcija koja ne zahtijeva posebno znanje za pisanje. Da biste upravljali oznakama, morate upotrijebiti njihovo ime. Pretpostavimo da je "kapica" vaše web lokacije zamotana u oznaku

Prednosti - jednostavnost korištenja, svestranost.

Nedostaci - potpuni nedostatak fleksibilnosti. U gornjem primjeru sve će zaglavlje oznake biti odabrane odjednom. A što ako trebate upravljati samo jednom?

Odabiri klase

Najčešća opcija. Namijenjen je za upravljanje oznakama s klasom atributa. Pretpostavimo da vaš kôd ima tri bloka

Sintaksa je ovo: odredite točku ("."), Nakon čega napišemo naziv klase. Da biste upravljali prvim blokom, upotrijebite .red dizajn. Drugi je .blue i tako dalje.

Važno! Preporučuje se da koristite jasne vrijednosti za atribut klase. Smatra se loša forma za korištenje transliteraciju (npr krasiviy-blok) ili nasumične kombinacije slova / brojeva (ojfh834871). U ovom kodeksu, vi ste dužni da se zbuniti, da ne spominjemo poteškoće koje će se suočiti oni koji će biti uključeni u projekt nakon vas. Najbolja opcija je koristiti neku vrstu metodologije, kao što je BEM.

Prednosti su prilično visoka fleksibilnost.

Nedostaci - nekoliko elemenata može imati istu klasu, pa će ih istodobno urediti. Problem se rješava metodologijom, kao i nasljeđivanjem predprocesora. Budite sigurni da ste manje svladali, sass ili neki drugi predprocesor, oni će uvelike pojednostaviti rad.

Odabir prema ID-u

O ovoj opciji, mišljenja kodera i programera su dvosmislena. Neki tutoriali CSS obično ne preporučujemo upotrebu ID jer oni mogu izazvati probleme nasljeđivanja kada se nehotice koriste. Međutim, mnogi stručnjaci aktivno ih distribuiraju kroz oznaku. Na vama je. Sintaksa je: lik rešetke ("#"), Zatim naziv bloka. Na primjer, #red.

ID razlikuje se od klase po nekoliko parametara. Prvo, na stranici se ne mogu nalaziti dvije identične stranice ID. Imaju jedinstvena imena. Drugo, takav selektor ima veći prioritet. To znači da ako blokiraš klase crvena i navedite u tablicama CSS crvena boja pozadine, i potom ga imenovati id plavo i označite plavu boju, blok će postati plava.

Prednosti - možete kontrolirati određeni element, ne obraćajući pažnju na stilove za oznake i klase.

Nedostaci - lako se zbuniti u velikom broju ID i klase.

Važno! Ako koristite BEM metodologiju (ili njegove analoge), ID vi, općenito, ne trebate. Ova tehnika rasporeda uključuje korištenje jedinstvenih klasa, što je mnogo prikladnije.

Univerzalni izbornik

Sintaksa: znak zvijezde ("*") i kovrčavi spojnice, tj.{}.

Koristi se za dodjelu određenih atributa svim elementima stranice odjednom. Kada može doći u ruci? Na primjer, ako želite postaviti svojstvo stranice box-size: granični okvir. Može se koristiti ne samo za upravljanje svim komponentama dokumenta, već i za kontrolu svih djece određenog bloka, na primjer, div * {}.

Prednosti - možete istovremeno upravljati velikim brojem predmeta.

Nedostaci nisu fleksibilna opcija. Osim toga, upotreba ovog izbornika u nekim slučajevima usporava stranicu.

Prema atributima

Moguće je kontrolirati element s određenim atributom. Na primjer, imate nekoliko unosa s različitim atributima tipa. Jedan od njih je tekst, drugi je lozinka, treći je broj. Naravno, možete dodijeliti svaki razred ili ID, ali to nije uvijek prikladno. CSS selektori po atributima omogućuju maksimalnu točnost određivanja vrijednosti za određene oznake. Na primjer, ovako:

ulaz [tip = rsquo-textrsquo -] {}

Ovaj izbornik atributa će odabrati sve unose s tipom teksta.

Alat je prilično fleksibilan, može se koristiti s bilo kojim oznakama koje mogu imati atribute. Ali to nije sve! U CSS specifikaciji moguće je upravljati elementima čak i uz veliku pogodnost!

Zamislite da vaša stranica ima unos s atributom placeholder = "Unesite ime" i upišite mjesto rezervirano = "Unesite lozinku". Također se mogu odabrati pomoću izbornika! Za to se koristi sljedeća konstrukcija:

unos [placeholder = "Unesite ime"] {} ili unos [placeholder = "Unesi zaporku"]

Moguć je fleksibilniji rad s atributima. Pretpostavimo da imate nekoliko oznaka s sličnim naslovnim atributima (recimo "Caspian" i "Caspian"). Da biste odabrali oba, upotrijebite sljedeće odabire:

[naslov * = "kaspiysk"]

CSS će odabrati sve elemente u naslovu kojih postoje simboli "Caspian", tj. "Caspian" i "Caspian".

Možete odabrati i oznake čije atribute počinju s određenim znakovima:

[naslov ^ = "znak koji trebate"] {}

ili završiti s njima:

[naslov $ = "željeni znak"] {}.

Prednosti - maksimalna fleksibilnost. Možete odabrati bilo koje postojeće elemente stranice bez nametanja klasa.

Nedostaci - koristi se relativno rijetko, samo u određenim slučajevima. Mnogi dizajneri izgleda preferiraju metodologiju jer je lakše odrediti klasu nego organizirati višestruke kvadratne zagrade i znakovi su "jednaki". Pored toga, ti selektori ne rade u verziji 7 ili nižoj verziji programa Internet Explorer. Međutim, tko sada treba stari Internet Explorer?

Pseudo klase selektori

Pseudo-klasa označava stanje elementa. Na primjer: zadržite pokazivač miša - što se događa s dijelom stranice kada lebdi iznad: posjetili - posjetili vezu. Ona također uključuje elemente kao što su: prvo dijete i: posljednje dijete.

Ova vrsta selektora aktivno se koristi u modernom izgledu, jer zahvaljujući njemu možete napraviti stranicu "uživo" bez upotrebe jаvascripta. Na primjer, želite ga učiniti tako da kada se zadržite pokazivačem miša iznad gumba s klasi btn, njezina se boja mijenja. Da biste to učinili, koristimo sljedeću konstrukciju:

.btn: zadržite se {

boja pozadine: crveno-

}

Za ljepotu, možete odrediti svojstvo ovog gumba u glavnim svojstvima ovog gumba, na primjer, u 0.5 sekundi - u ovom slučaju gumb neće bljesnuti odmah, već pola sekunde.

Prednosti - aktivno se koriste za "oživljavanje" stranica. Jednostavan za uporabu.

Nedostaci - oni nisu. Ovo je stvarno prikladan alat. Međutim, neiskusni urednici mogu se zbuniti u obilju pseudo-klasa. Problem se rješava pomoću studija i prakse.

Pseudo-element selektori

"Pseudo-elementi" su oni dijelovi stranice koji nisu u HTML-u, ali se i dalje mogu upravljati. Zar nisi razumio ništa? Sve je jednostavnije nego što se čini. Na primjer, želite napraviti prvo slovo u retku velikom i crvenom, ostavljajući drugi tekst mali i crni. Naravno, ovo pismo možete priložiti s određenom klasom, ali dugo je i dosadno. Mnogo je lakše odabrati cijeli odlomak i koristiti pseudo-element prvog slova. Omogućuje vam upravljanje izgledom prvog slova.

Postoji vrlo velik broj pseudo-elemenata. Nije vjerojatno da će ih navesti u okviru jednog članka. Možete pronaći relevantne informacije u svojoj omiljenoj tražilici.

Prednosti - omogućavaju fleksibilno prilagodbu izgleda stranice.

Nedostaci - početnici u njima često su zbunjeni. Mnogi odabiri ove vrste funkcioniraju samo u određenim preglednicima.

Sažetak

Selektor je moćan alat za upravljanje protokom dokumenata. Zahvaljujući njemu možete odabrati apsolutno svaku komponentu stranice (čak i postojeći je uvjet). Pazite da naučite sve dostupne opcije ili bar napišite ih. To je osobito važno ako izradite složene stranice s modernim dizajnom i mnogo interaktivnih elemenata.