CSS selektora. vrste selektora

, od kojih svaki želite postaviti određenu boju. Kako to učiniti? Standardni CSS selektora nisu pogodni za oznake, oni ukazuju na parametre za sve blokove odjednom. Rješenje je jednostavno. Dodjela članove klase. Na primjer, prva primila div class = 'crvene', drugi - class = 'plave', treći - class = 'zeleno'. Sada se mogu odabrati pomoću CSS tablice.

Sintaksa je sljedeća: Označava točku ( „”), nakon čega slijedi pisanje naziv klase. Za upravljanje prvu jedinicu, koristite izgradnju .red. Drugo - .blue i tako dalje.

Važno! Preporučuje se koristiti smislene vrijednosti klase atributa. 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 - koristiti bilo metodologije, kao što Bem.

Prednosti - relativno visoka fleksibilnost.

Nedostaci - višestruki elementi mogu biti jedna te ista klasa, što znači da će se uređivati istovremeno. Problem je riješen korištenjem metodologije, kao i baštinu predprocesora. Budite sigurni da biste dobili vaše ruke manje, Sass ili neki drugi Preprocessoru, oni uvelike pojednostaviti rad.

selektor ID

O ovoj verziji mišljenje koderi i programeri su nejasne. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Neki CSS tutoriali Ne preporučamo korištenje ID-a, jer je u netočnim primjene mogu uzrokovati probleme s nasljedstvom. Međutim, mnogi stručnjaci su aktivno organizirati ih po izgledu. Vi odlučujete. # »), затем имя блока. Sintaksa je sljedeća: znak funte ( „#”), a zatim ime bloka. #red. Na primjer, #red.

отличается от класса по нескольким параметрам. ID različit od klasnog na nekoliko načina. ID. Prvo, stranica ne može biti dva identična ID. Oni su dodijeljeni jedinstveni naziv. Drugo, kao selektor ima veći prioritet. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. To znači da ako navedete jedinica klase crveni i navesti u CSS tablice crvene boje pozadine, a zatim dodijeliti na njega isti ID plave i odrediti boju plavu, uređaj će poplaviti.

Prednosti - možete kontrolirati poseban element, ignorirajući stilova oznake i razredu.

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

Važno! ID вам, в общем-то, не нужны. Ako koristite Bem metodologijom (ili njegovih analoga), ID vam, općenito, nisu potrebni. Ova tehnika uključuje korištenje rasporeda jedinstvenih klasa koji mnogo praktičniji.

univerzalni selektor

{}. Sintaksa: starleta znak ( "*") i aparatić, odnosno {*} ...

Koristi se za dodjeljivanje određene atribute jednom sve elemente stranice. Kada se to može biti korisno? box-sizing: border-box. Na primjer, ako želite postaviti stranica u vlasništvu box-dimenzioniranje: Border-box. div *{}. ne samo da može se koristiti za upravljanje sve komponente dokumenta, ali i kontrolirati svu djecu u određenom bloku, na primjer, div * {}.

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

Kontra - nije dovoljno fleksibilan izbor. Osim toga, korištenje ovog izbornika, u nekim slučajevima usporiti stranicu rad.

po atributima

Bi bilo moguće kontrolirati element s određenim atributom. Na primjer, imate broj ulaznih oznake s različitih vrsta atributa. Jedan od njih - tekst, drugi - lozinka, treći - broj. Naravno, možete postaviti svaki razred ili ID, ali to nije uvijek praktično. CSS selektora atributa bi bilo moguće odrediti vrijednosti za određene oznake s maksimalnom preciznošću. Na primjer, ovako:

ulaz [type = 'text'] {}

To selektor će odabrati sve atribute s vrstom ulaznog teksta.

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

Zamislite da je vaša stranica ima ulaz s atributom rezervirano mjesto = „Unesite ime” i ulaz rezervirano = „Unesite zaporku”. Oni također mogu odabrati pomoću selektor! Da biste to učinili, koristite sljedeću strukturu:

ulazni [rezervirano = "Enter naziv"] {} ili unos [rezervirano = "Enter lozinku"]

Možda fleksibilniji rad s atributima. Recimo da imate veliki broj oznaka sa sličnim atributima naslovom (na primjer, „Kaspijskog” i „Kaspijskog”). Za odabir i koristite sljedeće odabire:

[Naslova * = "Kaspiysk"]

CSS će izabrati sve stavke u naslovu od kojih su simboli „Kaspijan”, tj. E. i „Kaspijan” i „Caspian”.

Također možete odabrati oznake koje počinju s određeni karakter atributa:

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

ili ih raskinuti:

[Naslova $ = "right znak"] {}.

Prednosti - maksimalna fleksibilnost. Možete odabrati postojeće elemente stranice bez zabrljati sa nastave.

Nedostaci - koristi se relativno rijetko, samo u posebnim slučajevima. Mnogi web dizajneri vole metodologiji, budući da je točka klasa je lakše nego organizirati brojne uglate zagrade i znak „jednako”. Osim toga, ovi selektori ne rade u Internet Explorer verzije 7 i ispod. Međutim, koji su sada trebaju stari Internet Explorer?

pseudo-klase selektora

Označava element pseudo-statusa. Na primjer ,: hover - što se događa na dio stranice kada prelazite ,: posjetili - posjećene veze. Ona također uključuje elemente kao što su: prvog djeteta i: Last dijete.

Ova vrsta selektor aktivno koristi u modernom izgledu, jer je zahvaljujući njemu možete napraviti stranicu „live” bez uporabe JavaScript. Na primjer, želite da biste bili sigurni da kada pređete preko gumba s klasi btn promijenila boju. Da biste to učinili, mi koristimo sljedeću strukturu:

.btn: hover {

background-color: red;

}

Ljepota može biti naveden u osnovnim svojstvima gumb, prijelaz imovine, na primjer, 0,5S - u ovom slučaju pokazivač neće rumenilo odmah, a unutar pola sekunde.

Vrline - su naširoko koristi za „oživljavanje” stranica. Jednostavan za uporabu.

Nedostaci - nisu. Ovo je stvarno zgodan alat. Međutim, neiskusni web dizajneri mogu se izgubiti u mnoštvu pseudo-klase. Problem je riješen studij i praksu.

pseudo-selektora

„Pseudo” - to su dijelovi stranice koje nisu u HTML-u, ali još uvijek može upravljati. Niste razumjeli? To je puno lakše nego što se čini. Na primjer, želite da se prvo slovo u nizu velika i crvena, ostavljajući druge male i crni tekst. Naravno, može se zaključiti da je pismo u razmaku s određenom razredu, ali je dugo i dosadno. To je puno lakše za odabir cijeli odlomak i koristiti pseudo :: prve pismo. To daje mogućnost da kontrolira pojavu prvog slova.

Ima dosta veliki broj pseudo-elemenata. Popis ih u jednom članku je vjerojatno da će uspjeti. Možete pronaći relevantne informacije na svoje omiljene tražilice.

Prednosti - pružaju fleksibilnost da prilagodite izgled stranice.

Nedostaci - novi s njima često su zbunjeni. Mnogi izbor ove vrste rada, samo u nekim preglednicima.

Da sumiramo

Selektor - moćan alat za kontrolu protoka dokumenata. Zahvaljujući njemu, možete odabrati svaki pojedini dio stranice (postoje čak i samo djelomično). Budite sigurni da biste saznali sve opcije na raspolaganju, ili čak i napisati ih. To je osobito važno ako ste stvorili složene stranice sa modernim dizajnom i puno interaktivnih elemenata.