CSS Selectors. Selectors mota

, bakoitza kolore jakin bat ezarri nahi izatea. Nola egiten den? Standard CSS selectors ez dira etiketa egokia, bloke guztiak parametroak adierazi dute aldi berean. Konponbidea erraza da. Esleitu class kideak. class = 'urdin', hirugarren - - class = 'berdea' Adibidez, lehenengo 'gorria', bigarren jaso div class =. Orain dute aukera daiteke CSS taulak erabiliz.

sintaxia honako hau da: puntu bat ( "."), eta jarraian class-izena idatziz adierazten du. Lehenengo unitatea kudeatzeko, erabili .red eraikitzea. Bigarren - .blue eta abar.

Oso garrantzitsua: Gomendagarria da class atributua balioak esanguratsuak erabiltzeko. Jotzen inprimaki txarra transliterazio (adibidez, krasiviy-blok) edo ausazko letrak / zenbakiak konbinazio (ojfh834871) erabiltzeko. kode honetan, lotuak dira nahastu lortzeko, ez zailtasun hori duten proiektuaren arduratzen izango duzu ondoren horiek aurre egingo aipatzearren. Aukerarik onena - edozein metodologia erabili, hala nola, BEM gisa.

Abantailak - malgutasuna nahiko handia.

Desabantailak - hainbat elementu bat eta klase berean, eta horrek esan nahi dutela argitaratuko da aldi berean izan daitezke. Arazoa metodologia baita herentzia preprocessors erabiliz moldatzen da. Ziurtatu zure esku gutxiago, Sass edo beste preprocessor batzuk lortzeko, asko sinplifikatzen dute lana.

ID hautatzaileak

Bertsio honi buruz iritzia coders eta programatzaileak anbiguoa dira. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. CSS tutoretzak batzuk ez ID erabiltzea gomendatzen, izan ere zehaztugabeak aplikazioan herentzia arazoak sor daitezke. Hala ere, aditu askok dira aktiboki horiek antolatu diseinua osoan. erabakitzen duzu. # »), затем имя блока. the libra zeinua ( "#"), orduan bloke baten izena: sintaxia honakoa da. #red. Adibidez, #red.

отличается от класса по нескольким параметрам. NAN hainbat modutan klase desberdinak. ID. Lehen, orriaren ezin bi berdin ID egon. Izen bakarra esleitzen dira. Bigarrenik, esaterako hautatzailea lehentasun handiagoa dauka. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Horrek esan nahi du unitate klasea gorri zehaztu baduzu eta CSS taulak zehaztu gorria atzeko kolorea, eta gero urdina esleitu the id bera eta kolore urdina zehaztu, unitate urdina txanda izango da.

Abantailak - elementu espezifikoak kontrola dezakezu, etiketa eta klaseak estilo jaramonik.

ID и class. Desabantailak - erraza NAN eta klase ugari galtzeko.

Oso garrantzitsua: ID вам, в общем-то, не нужны. you BEM metodologia (edo bere Antzeko), NAN erabiltzen ari bazara, oro har, ez da beharrezkoa. Teknika hau diseinua klase berezia dela askoz erosoagoa erabilera dakar.

hautatzaile unibertsala

{}. Sintaxia: Starlets ikurra ( "*") eta giltza, hau da, {*} ...

zenbait atributu behin orriaren elementu guztiak esleitzeko erabiltzen da. Hori baliagarria izan daiteke? box-sizing: border-box. Adibidez, orri jabetza box-tamaina ezarri nahi baduzu: muga-koadroa. div *{}. Ezin bakarrik Dokumentuaren osagai guztiak, kudeatzeko erabiliko ez baina baita zehaztutako bloke seme guztiak, adibidez kontrolatzeko, div * {}.

Abantailak - elementu kopuru handi bat kontrola dezakezu aldi berean.

Cons - ez da nahikoa aukera malguak. Gainera, hautatzaileak honen erabilera, kasu batzuetan mantsotu orri lana.

ezaugarri batzuen

Egin elementu kontrolatzeko posible attribute zehatz batekin. Adibidez, idazketa-etiketa kopuru bat atributu mota ezberdin batekin duzu. Horietako bat - testua, bigarren - pasahitza, hirugarren - zenbakia. Jakina, klase edo NAN bakoitzari ezar dezakezu, baina ez da beti erosoa. CSS atributuen Selectors egin baloreak zehazteko posible da zehaztasun handienaz etiketa jakin batzuk egiteko. Adibidez, honelako:

Sarrera-[type = 'text'] {}

hautatzaileak honek sarrerako testu mota batera atributu guztiak hautatu dira.

tresna nahiko malgua da eta etiketa, eta bertan atributuak daitezke edozein erabili ahal izango dira. Baina hori ez da guztia! CSS zehaztapena elementu kontrolatzeko erosotasuna are gehiago gaitasuna du!

Imajinatu zure orrian sarrera ditu attribute placeholder batera = "Idatzi izen bat" eta sarrera placeholder = "Sartu pasahitza". halaber hautatutako ezin dira hautatzaileak erabiliz! Horretarako, erabili honako egitura:

Sarrera-[placeholder = "Sartu izena"] {} edo sarrera [placeholder = "Idatzi pasahitza"]

Agian izaera horrekin lan malguagoak. Demagun antzeko atributuak izenburua (adibidez, "Caspian" eta "Caspian") batera etiketa zenbaki bat behar duzu. biak hautatzeko, erabili honako hautapen:

[Izenburua * = "Kaspiysk"]

CSS titulua elementu horietatik daude "Caspian", hau. E., eta "Caspian" eta "Caspian" sinbolo guztiak aukeratuko du.

Aukera dezakezu pertsonaia jakin bat egozten hasten diren etiketa:

[Izenburua ^ = "pertsonaia Nahi izanez"] {}

edo amaitutzat haiek:

[Izenburua $ = "eskuin pertsonaia"] {}.

Abantailak - gehienez malgutasuna. lehendik dauden elementuak aukera ditzakezu klase batera aldatzeari gabe.

Desabantailak - erabili nahiko gutxitan, kasu zehatz bakarrik. Web diseinatzaile askok metodologia nahiago, puntua klasearen errazagoa ugari antolatu nahi baino denez karratu parentesi eta seinaleak "berdina". Gainera, Selectors horiek ez Internet Explorer bertsio 7 eta azpitik lan egiteko. Hala ere, nor dira orain behar du Internet Explorer zaharra?

sasi-class Selectors

sasi-status-elementu bat adierazten du. Adibidez ,: pasatzean For - Zer orriaren zatian gertatzen denean pasatzean ,: bisitatu - bisitatu link. lehen ume eta: azken-ume, gainera, esaterako, elementu biltzen ditu.

hautatzaileak mota honek aktiboki diseinua modernoa erabiltzen da, horri esker orri bat "bizirik" egin dezakezu baita JavaScript erabili gabe. Adibidez, ziur pasatzean botoia gainetik btn bere kolorea aldatu klasea batera hori egin nahi duzula. Horretarako, honako egitura erabiltzen dugu:

.btn: hover {

background-color: red;

}

Beauty egon botoia, trantsizio jabetza oinarrizko ezaugarriak zehaztu daiteke, adibidez, 0.5s - Kasu honetan, botoia ez gorritzen berehala, eta bigarren erdi barruan.

Bertute - oso da "berpiztea" orrien erabiltzen. Erraza da erabiltzeko.

Desabantailak - ez dira. Hau tresna benetan erabilgarria da. Hala ere, esperientziarik web diseinatzaile sasi-klaseak ugaritasuna galtzeko daiteke. Arazoa konpondu da azterketa eta praktika.

sasi-Selectors

"Sasi" - horiek orriaren ez diren HTML zatiak dira, baina oraindik ere kudeatu daitezke zuten. Ez duzu ulertzen? Askoz errazagoa dirudi baino ez da. Adibidez, katea lehen hizkia handi eta gorria egiteko, beste testu txiki eta beltz irten nahi duzula. Jakina, ondorioztatu daiteke klase jakin batekin span batean letraren, baina luze eta aspergarria da. Askoz errazagoa da paragrafo osoa aukeratzeko eta sasi :: lehenengo letra-erabili. aukera lehen letra itxura kontrolatzeko ematen du.

Badira nahiko sasi-elementu ugari daude. Zerrenda horietako artikulu bakar batean zaila da arrakasta. Zure gogoko bilatzailea informazio garrantzitsua aurkitu ahal izango duzu.

Abantailak - malgutasuna orriaren itxura pertsonalizatzeko ematen.

Desabantailak - haiei new nahasi ohi dira. Lan mota hau nabigatzaile jakin batzuetan bakarrik hautapenak asko.

Laburbilduz

Selector - dokumentu-fluxuaren kontrola tresna indartsua. Berari esker, orria osagai bakoitza hautatu dezakezu (daude, nahiz eta partzialki soilik). Ziurtatu aukera guztiak eskuragarri ikasteko, edo baita idatzi. Hau bereziki garrantzitsua da, diseinu moderno batekin orrietan konplexua eta elementu elkarreragileak asko sortzen baduzu.