CSS Izbirniki. Vrste selektorjev

, od katerih vsaka želite nastaviti določeno barvo. Kako to storiti? Standardne CSS selektorji niso primerni za oznake, ki jih navaja parametre za vse bloke naenkrat. Rešitev je preprosta. Določi članov razreda. Na primer, prva prejela div class = "rdeče", drugi - class = "modri", tretja - class = "zeleno". Sedaj jih je mogoče izbrati s pomočjo CSS tabele.

Sintaksa je naslednja: Označuje točko ( "."), S pisanjem ime razreda sledili. Za upravljanje s prvo enoto, uporabite gradnje .red. Drugič - .blue in tako naprej.

Pomembno! Priporočljivo je, da uporabite smiselne vrednosti atributa razreda. Šteje se, slaba oblika za uporabo transkripcije (npr krasiviy-blok) ali naključne kombinacije črk / številk (ojfh834871). V to kodo, boste zagotovo dobili zmeden, da ne omenjam težav, s katerimi se bo srečujejo tisti, ki bo z delom v projektu po vas. Najboljša možnost - uporaba kakršne koli metodologije, kot metodo robnih elementov.

Prednosti - relativno visoka fleksibilnost.

Slabosti - snopi elementi so lahko en in isti razred, kar pomeni, da je hkrati uredili. Problem je rešen v skladu z metodologijo, kot tudi dediščino predprocesorjev. Bodite prepričani, da bi dobili svoje roke manj, Sass ali kakšno drugo Predprocesor, so močno poenostavi delo.

izbirnik ID

O tej različici so mnenja kodiranje in programerji dvoumno. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Nekateri CSS vaje ne priporočajo uporabe ID, saj v netočne prijave lahko povzročijo težave z dedovanjem. Vendar, mnogi strokovnjaki so dejavno jih razporedite po vsej postavitev. Sami se odločite. # »), затем имя блока. Sintaksa je naslednja: funt znak ( "#"), nato ime bloka. #red. Na primer, #red.

отличается от класса по нескольким параметрам. ID je drugačen od razreda na več načinov. ID. Prvič, stran ne more biti dva enaka ID. Uvrščeni so edinstveno ime. Drugič, tako selektor ima višjo prioriteto. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. To pomeni, da če si določite razred na enoto rdeče in navesti v CSS tabelah rdečo barvo ozadja, nato pa ji naloži isto id modro in določite barvo modro, bo enota obarva modro.

Prednosti - lahko nadzorujete poseben element, ignoriranje stilov oznak in razredov.

ID и class. Slabosti - enostavno priti izgubil v velikem številu ID in razreda.

Pomembno! ID вам, в общем-то, не нужны. Če uporabljate BEM metodologije (ali analognih), ID za vas, na splošno niso potrebni. Ta tehnika vključuje uporabo postavitve edinstvenih razredov, da je veliko bolj udoben.

univerzalna selektor

{}. Sintaksa: Starlets znak ( "*") in naramnice, kar pomeni, {*} ...

Uporablja se za prenos posameznih atributov enkrat vse elemente strani. Ko se je to lahko koristno? box-sizing: border-box. Na primer, če želite nastaviti stran lastnine box-velikosti: meja-box. div *{}. ni mogoče uporabiti samo za upravljanje vseh sestavnih delov dokumenta, temveč tudi za nadzor vseh otrok v določenem bloku, na primer, div * {}.

Prednosti - lahko nadzorujete veliko število predmetov naenkrat.

Proti - ni dovolj prilagodljiva možnost. Poleg tega je uporaba tega selektorja, v nekaterih primerih upočasni stran dela.

po lastnostih

Naj bo mogoče nadzorovati element z določeno lastnost. Na primer, imate več vhodnih oznak z drugo vrsto atributa. Eden od njih - besedilo, drugi - geslo, tretji - številka. Seveda, lahko nastavite vsak razred ali ID, vendar to ni vedno primerna. CSS selektorji atributov bi bilo mogoče določiti vrednosti za nekatere oznake z največjo natančnostjo. Na primer, kot je ta:

vnos [ 'besedilo' vrsto =] {}

To izbirnik bodo izbrane vse atribute z vrsto vhodnega besedila.

Orodje je zelo prilagodljiv in se lahko uporablja s katerim koli od oznake, v katerih bi bilo lahko atributi. Ampak to še ni vse! Specifikacija CSS ima sposobnost za nadzor elemente, s še več udobja!

Predstavljajte si, da je vaša stran vhod z atributom ogrado = "Vnesite ime" in vhod ograda = "Vpišite geslo". Lahko se tudi izbrana z izbiro! Če želite to narediti, uporabite naslednjo strukturo:

vnos [ograda = "Vnesite ime"] {} ali vhod [ograda = "Vnesite geslo"]

Morda še bolj prilagodljiv delo z atributi. Recimo, da imate več oznak s podobnimi značilnostmi naslova (na primer, "kaspijski" in "Kaspijskem"). Če želite izbrati tako, uporabite naslednje izbire:

[Naslovno * = "Kaspiysk"]

CSS bodo izbrali vse elemente v naslovu, ki obstajajo simboli "Kaspijan", tj. E., in "Kaspijskem morju" in "Kaspijskem morju".

Izberete lahko tudi oznake, ki se začnejo z atributi določen znak:

[Naslovno ^ = "želeni znak"] {}

ali jih prekine:

[Naslovno $ = "desno znak"] {}.

Prednosti - maksimalno fleksibilnost. Izberete lahko obstoječe elemente strani, ne da bi zlorabili razredov.

Slabosti - uporabljajo razmeroma redko, le v posebnih primerih. Veliko spletnih oblikovalcev raje metodologiji, saj je razred točka lažje, kot da poskrbi številnih oglatih oklepajev in znaki "enaka". Poleg tega ti selektorji ne delujejo v Internet Explorerju različice 7 in spodaj. Vendar pa, ki so zdaj morali stari Internet Explorer?

pseudo-class selektorji

Označuje element o stanju psevdo. Na primer ,: lebdenje - kaj se zgodi na delu strani, ko hover ,: obiskali - obiskane povezavo. To vključuje tudi elemente, kot so: prvi-otrok in: zadnje-otroka.

Ta vrsta selektorja se aktivno uporablja v sodobni zasnovi, saj zaradi nje lahko naredite stran "v živo", brez uporabe JavaScript. Na primer, želite, da se prepričajte, da ko z miško gumb z razredom btn njegova barva spremenila. V ta namen bomo uporabili naslednje strukture:

.btn: lebdenje {

background-color: red;

}

Lepota je lahko določena v osnovnih lastnosti gumba, prehodnega premoženja, na primer, 0,5 s - v tem primeru, gumb ne bo blush takoj, in v pol sekunde.

Vrline - se pogosto uporabljajo za "oživljanje" strani. Enostaven za uporabo.

Slabosti - niso. To je zelo priročno orodje. Vendar pa lahko neizkušeni spletni oblikovalci izgubijo v izobilju psevdo-razredov. Problem je rešen študij in prakso.

pseudo-selektorji

"Pseudo" - to so deli strani, ki niso v HTML, vendar jih je še vedno mogoče upravljati. Nisi razumel? To je veliko lažje, kot se zdi. Na primer, želite prva črka v nizu velikih in rdeče, pri čemer drugo majhno in črno besedilo. Seveda je mogoče, je treba ugotoviti, da je pismo v razponu z določeno skupino, vendar je dolgo in dolgočasno. To je veliko lažje, da izberete celoten odstavek in uporabo psevdo :: prve črko. To omogoča, da nadzor nad videz prvo črko.

Obstaja precej veliko število psevdo-elementov. jih navede v enem členu, je verjetno ne bo uspelo. Tu lahko najdete ustrezne informacije v vaši najljubši iskalnik.

Prednosti - zagotoviti prožnost pri prilagajanju videz strani.

Slabosti - nove z njimi pogosto zmedeni. Veliko izbire tovrstnega dela samo v določenih brskalnikih.

Če povzamemo

Selektor - zmogljivo orodje za nadzor pretoka dokumentov. Zahvaljujoč njemu, lahko izberete vsak sestavni del strani (obstajajo celo samo delno). Bodite prepričani, da se naučijo vse možnosti na voljo, ali pa jih celo zapisali. To je še posebej pomembno, če ste ustvarili zapletene strani z modernim dizajnom in veliko interaktivnih elementov.