CSS selektora. vrste selektora

, od kojih je svaka želite da postavite određene boje. Kako se to radi? Standard CSS selektori nisu pogodne za tagove, oni ukazuju na parametre za sve blokove odjednom. Rješenje je jednostavno. Dodijeliti članovi klase. Na primjer, prvi dobio div class = 'crvene', drugi - class = 'plavi', treći - class = 'zelene'. Sada oni mogu izabrati pomoću CSS tablice.

Sintaksa je kako slijedi: Ukazuje na tačku ( "."), A zatim pisanjem ime klase. Za upravljanje prva jedinica, koristite izgradnja .red. Drugi - .blue i tako dalje.

VAŽNO! Preporučuje se koristiti smislene vrijednosti atribut klase. Smatra se da je lošoj formi za korištenje transliteracija (npr krasiviy-blok) ili slučajnih kombinacija slova / brojeva (ojfh834871). U ovom koda, dužni su da se zbunjen, da ne spominjemo poteškoće koje će se suočiti sa onima koji će biti uključeni u projekt po tebe. Najbolja opcija - da koristi bilo metodologije, kao što je BEM.

Prednosti - relativno visoka fleksibilnost.

Nedostaci - višestruki elementi mogu biti jedno te iste klase, što znači da će biti istovremeno uređivati. Problem je riješen koristeći metodologiju kao i nasleđivanje predprocesora. Budite sigurni da biste dobili vaše ruke manje, Sass ili neki drugi pretprocesor, oni u velikoj mjeri pojednostaviti rad.

ID selektor

O ovom verzija kodera mišljenje i programeri su dvosmisleni. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Neki CSS tutoriali ne preporučujemo upotrebu ID, jer u netačne aplikacije mogu uzrokovati probleme s nasljeđivanja. Međutim, mnogi stručnjaci su aktivno organizirati ih u cijeloj rasporeda. Vi odlučite. # »), затем имя блока. Sintaksa je kako slijedi: znak funte ( "#"), a zatim ime bloka. #red. Na primjer, #Red.

отличается от класса по нескольким параметрам. ID razlikuje se od klase na nekoliko načina. ID. Prvo, strana ne može biti dva identična ID. Oni se dodjeljuju jedinstveno ime. Drugo, kao što je selektor ima viši prioritet. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. To znači da ako navedete jedinica klase crvene i CSS tablice odrediti crvene boje pozadine, a zatim dodijeliti na isti id plave i odrediti boju plavu, uređaj će postati plava.

Prednosti - možete kontrolirati specifične element, zanemarujući stilova tagova i klase.

ID и class. Nedostaci - lako izgubiti u velikom broju ID i klase.

VAŽNO! ID вам, в общем-то, не нужны. Ako koristite BEM metodologija (ili njegovih analoga), ID vam, generalno, nisu potrebni. Ova tehnika uključuje korištenje raspored jedinstvenih klasa koje mnogo jednostavnije.

univerzalni selektor

{}. Sintaksa: Starlete znak ( "*") i proteza, odnosno, {*} ...

Koristi se dodijeliti određene atribute jednom sve elemente stranice. Kada se to može biti korisno? box-sizing: border-box. Na primjer, ako želite da postavite stranu imovinu box-dimenzioniranje: granica-box. div *{}. ne mogu se koristiti samo za upravljanje sve komponente ovog dokumenta, ali i da kontroliše sva djeca navedenog bloka, na primjer, div * {}.

Prednosti - možete kontrolirati veliki broj predmeta u isto vrijeme.

Cons - nije dovoljno fleksibilan opciju. Osim toga, upotreba ovog selektora, u nekim slučajevima usporavaju rad stranice.

prema atributima

Da li je moguće kontrolirati element sa specifičnim atributa. Na primjer, imate broj ulaznih oznake s drugog tipa atributa. Jedan od njih - tekst, drugi - lozinke, treći - broj. Naravno, možete podesiti svake klase ili ID, ali to nije uvijek zgodno. CSS selektora atributa čine ga moguće odrediti vrijednosti za određene tagove sa maksimalnom preciznošću. Na primjer, ovako:

input [type = 'text'] {}

Ovaj selektor će odabrati sve atribute sa vrstom unos teksta.

Alat je vrlo fleksibilan i može se koristiti sa bilo kojim od oznaka, u kojem mogu postojati atribute. Ali to nije sve! CSS specifikacija ima mogućnost kontrole elemenata sa još više pogodnosti!

Zamislite da vaša stranica ima ulaz sa atribut placeholder = "Unesite ime" i unos placeholder = "Unesite lozinku". Mogu se izabrati pomoću selektora! Da biste to učinili, koristite sljedeću strukturu:

ulaz [placeholder = "Unesite ime"] {} ili ulaz [placeholder = "Unesite lozinku"]

Možda fleksibilniji rad sa atributima. Recimo da imate broj oznaka sa sličnim atributima naslovom (na primjer, "Caspian" i "Caspian"). Da biste izabrali oba, koristite sljedeći izbor:

[Naslov * = "Kaspijsk"]

CSS će izabrati sve stavke u naslovu koji ima simbol "Caspian", tj. E, i "Caspian" i "Caspian".

Možete odabrati i oznake koje počinju s atributima određeni lik:

[Naslov ^ = "znak koji želite"] {}

ili raskinuti njih:

[$ Title = "right karaktera"] {}.

Prednosti - maksimalnu fleksibilnost. Možete odabrati bilo postojeću stranicu elemenata bez petljaju s nastave.

Nedostaci - koristi se relativno rijetko, samo u određenim slučajevima. Mnogi web dizajneri vole metodologije, jer klase poenta je lakše nego organizirati brojne uglastim zagradama i znaci "jednaki". Osim toga, ovi selektori ne rade u Explorer verzije Internet 7 i ispod. Međutim, koji su sada potrebna stara Internet Explorer?

pseudo-klase selektora

Označava pseudo-status elementa. Na primjer ,: hover - šta se dešava na dio stranice kada lebdite ,: posjetio - posećenih link. Ona također uključuje elemente kao što su: prva-dijete i: zadnja-dijete.

Ova vrsta selektor se aktivno koristi u modernom izgledu, jer zahvaljujući njoj možete napraviti stranicu "živi" bez upotrebe JavaScript. Na primjer, želite biti sigurni da kada mišem preko dugmeta sa klasi BTN svoju boju promijenilo. Da biste to učinili, mi koristimo sljedeću strukturu:

.btn: hover {

pozadine-boja: crvena;

}

Beauty možete biti naveden u osnovna svojstva dugmeta, vlasništvo tranzicije, na primjer, 0,5s - u ovom slučaju, dugme neće rumenilo odmah, a unutar pola sekunde.

Vrline - su naširoko koristi za "oživljavanje" stranica. Jednostavan za korištenje.

Nedostaci - nisu. Ovo je stvarno zgodan alat. Međutim, neiskusni web dizajneri mogu se izgubiti u obilju pseudo-klase. Problem je riješen studija i prakse.

pseudo-selektori

"Pseudo" - to su dijelovi stranice koje nisu u HTML-u, ali i dalje se može upravljati. Nisi razumeo? To je puno lakše nego što se čini. Na primjer, želite da prvo slovo u nizu velikih i crvene, ostavljajući druge male i crni tekst. Naravno, može se zaključiti da je pismo u rasponu s određene klase, ali to je duga i dosadna. Mnogo je lakše izabrati čitav stav i koristiti pseudo :: prvo pismo. To daje mogućnost da se upravlja izgledom prvo pismo.

Postoji prilično veliki broj pseudo-elemenata. List ih u jednom članku je teško da će uspjeti. Možete pronaći relevantne informacije u svoj omiljeni tražilicu.

Prednosti - pružaju fleksibilnost da prilagodite izgled stranice.

Nedostaci - novi njima su često zbunjeni. Mnogi izbor za ovu vrstu rada samo u određenim preglednicima.

da sumiramo

Selektor - moćan alat za kontrolu protoka dokumenata. Zahvaljujući njemu, možete odabrati svaku komponentu stranice (postoje čak i samo djelomično). Budite sigurni da biste saznali sve opcije na raspolaganju, ili ih čak i zapisati. Ovo je posebno važno ako napravite složenih stranica sa modernim dizajnom i mnogo interaktivnih elemenata.