Selektori klase

Najčešća varijanta. postavljenza upravljanje oznakama s atributom klase. Na primjer, postoje tri bloka u vašem kodu, od kojih svaki zahtijeva određenu boju. Kako to učiniti? Standardni CSS selektori nisu prikladni za oznake, oni određuju parametre za sve blokove odjednom. Izlaz je jednostavan. Dodjeljivanje elemenata klase. Na primjer, prvi div je dobio klasu = 'crvenu', drugu - klasu = 'plavu', treću - klasu = 'zelenu'. Sada ih možete odabrati pomoću CSS-a.


Sintaksa je: usmjerite točku ("."), Nakon čega upišemo ime klase. Za upravljanje prvim blokom koristimo .red dizajn. Druga je .plava i tako dalje. Važno! Preporučuje se korištenje jasnih vrijednosti atributa klase. Loš ton je upotreba transliteracije (na primjer, krasiviy-blok) ili slučajne kombinacije slova /brojeva (ojfh834871). U takvom kodu ćete se zbuniti, da ne spominjemo poteškoće s kojima ćete se morati suočiti s onima koji će biti uključeni u projekt nakon vas. Najbolja opcija je korištenje neke metodologije, kao što je BEM. Prednosti - prilično visoka fleksibilnost. Nedostaci - mogu postojati jedna i ista klasa u nekoliko elemenata, što znači da će biti uređeni istovremeno. Problem je riješen metodologijom, kao i nasljeđivanjem predprocesora. Budite sigurni da ovladate manje, sass ili bilo koji drugi procesor, oni će uvelike pojednostaviti posao.

Selektor prema ID-u

Što se tiče ove opcije, mišljenja dizajnera i programera su dvosmislena. Neki CSS vodiči obično ne preporučuju korištenje ID-a jer nisu pažljivo korištenimože uzrokovati probleme nasljeđivanja. Međutim, mnogi stručnjaci ih aktivno smještaju kroz markup. Odlučite za sebe Sintaksa je: simbol rešetke ("#"), zatim naziv bloka. Na primjer, #red.
ID se razlikuje od klase za nekoliko parametara. Prvo, stranica ne može imati dva identična ID-a. Njima se dodjeljuju jedinstvena imena. Drugo, takav izbornik ima veći prioritet. To znači da ako stavite klasu u crvenu klasu i navedete crvenu boju pozadine u CSS tablicama, a zatim joj dodijelite id plavu i odredite plavu boju, blok će postati plav. Prednosti - Možete upravljati određenom stavkom bez obraćanja pozornosti na stil za oznake i klase. Nedostaci se lako miješaju s velikim brojem ID-ova i klasa. Važno! Ako koristite metodu BEM (ili njezine kopije), obično ne trebate ID. Ova tehnika postavljanja uključuje korištenje jedinstvenih klasa, što je mnogo praktičnije.

Univerzalni birač

Sintaksa: zvjezdica ("*") i vitičasta zagrada, tj. * {}. Koristi se za dodjeljivanje određenih atributa svim elementima stranice odjednom. Kada je to potrebno? Na primjer, ako želite postaviti svojstvo veličine kutije stranice: border-box. Može se koristiti ne samo za upravljanje svim komponentama dokumenta, već i za upravljanje svim podređenim elementima bloka, na primjer, div * {}. Prednosti - Možete upravljati velikim brojem elemenata odjednom. Nedostaci -nije dovoljno fleksibilan. Osim toga, korištenje ovog selektora u nekim slučajevima usporava rad stranice.

Po atributima

Omogućuje vam kontrolu stavke s određenim atributom. Na primjer, imate nekoliko ulaznih oznaka s različitim atributom tipa. Jedan od njih - tekst, drugi - lozinka, treći - broj. Naravno, možete staviti svaku klasu ili ID, ali to nije uvijek zgodno. CSS selektori daju atribute mogućnost određivanja vrijednosti za određene oznake s maksimalnom točnošću. Na primjer, evo kako: input [type = 'text'] {} Ovaj izbornik atributa odabire sve tekstove tipa unosa. Alat je vrlo fleksibilan, može se koristiti s bilo kojim oznakama koje mogu imati atribute. Ali to nije sve! CSS specifikacija ima sposobnost kontrole elemenata čak i uz veliku pogodnost!
Zamislite da vaša stranica ima ulaz s atributom placeholder = "Unesite ime" i unesite placeholder = "Unesite lozinku". Moguće ih je odabrati i pomoću selektora! Za ovo se koristi sljedeći dizajn: input [placeholder = "Enter name"] {} ili input [placeholder = "Enter password"] Fleksibilniji rad s atributima. Na primjer, pretpostavimo da imate više oznaka sa sličnim atributima (npr. "Kaspijsko" i "Kaspijsko"). Da bismo odabrali oba, koristimo sljedeće selektore: [title * = "kaspiisk"] CSS će odabrati sve stavke u naslovu koje sadrže znakove "kaspijski", odnosno "kaspijski" i "kaspijski". Također možete odabrati oznake čije atribute počinju s određenim znakovima: [title ^ = "znak koji želite"] {} ili završiti s njima:[title $ = "obavezni znak"] {}. Prednosti - maksimalna fleksibilnost. Možete odabrati bilo koje postojeće elemente stranice bez ikakvih problema s razredima. Nedostaci - koriste se relativno rijetko, samo u određenim slučajevima. Mnogi planeri preferiraju metodologiju, jer je lakše odrediti klasu nego urediti više uglatih zagrada i potpisati "jedan". Osim toga, ovi selektori ne rade u programu Internet Explorer 7 i niže. No, kome sada treba stari Internet Explorer?

Selektori pseudo-klase

Pseudo-klasa označava stanje elementa. Na primjer: lebdjeti - što se događa s dijelom stranice kada prelazite preko pokazivača,: posjetili - posjetili vezu. To uključuje elemente kao što su: prvo dijete: posljednje dijete. Ovaj tip selektora se aktivno koristi u trenutnom rasporedu, jer vam omogućuje da napravite stranicu "uživo" bez korištenja javascripta. Na primjer, želite biti sigurni da kada kliknete na gumb s klasom btn mijenja se njegova boja. Da biste to učinili, upotrijebite sljedeći dizajn: .btn: hover {pozadinska boja: crvena; } Za ljepotu, možete odrediti u glavnim svojstvima ovog gumba svojstvo prijelaza, na primjer, u 05 s - u ovom slučaju, gumb će treptati trenutno, ali za pola sekunde. Prednosti - aktivno se koriste za "revitalizaciju" stranica. Jednostavan za uporabu. Nedostaci - nisu. Ovo je stvarno zgodan alat. Međutim, neiskusne rukovatelje može se zamijeniti s velikim brojem pseudo-klasa. Problem se rješava obukom i praksom.

Pseudoelement selektori

"Pseudoelementi" su oniDijelovi stranice koji nisu u HTML-u, ali ih možete upravljati. Niste ništa razumjeli? Sve je lakše nego što se čini. Na primjer, želite da prvo slovo u retku bude veliko i crveno, dok će drugi tekst biti mali i crni. Naravno, ovo slovo možete staviti u raspon s određenom klasom, ali to je dugo i dosadno. Mnogo je lakše odabrati cijeli paragraf i koristiti pseudo-element :: prvo slovo. Omogućuje vam kontrolu nad prvim slovom. Postoji prilično velik broj pseudo stanica. Navedite ih kao jedan članak koji vjerojatno neće ispasti. Možete pronaći relevantne informacije u svojoj omiljenoj tražilici. Prednosti - omogućuju fleksibilno podešavanje izgleda stranice. Nedostaci - početnici se često miješaju s njima. Mnogi selektori ovog tipa rade samo u određenim preglednicima.

Sažmi

Selektor je moćan alat za kontrolu toka dokumenta. Zahvaljujući njemu možete odabrati apsolutno svaku komponentu stranice (čak i postojeću samo uvjetno). Svakako proučite sve postojeće opcije ili ih barem zapišite. To je posebno važno ako stvorite složene stranice modernog dizajna i velikog broja interaktivnih elemenata.