CSS selectores. specoj de elektiloj

, ĉiu el kiuj vi volas agordi specifa koloro. Kiel fari ĝin? Norma CSS selectores ne taŭgas por etikedoj, ili indikas la parametrojn por ĉiuj blokas tuj. La solvo estas simpla. Asigni klaso membroj. Ekzemple, la unua ricevis div class = 'ruĝa', dua - klaso = 'blua', tria - klaso = 'verda'. Nun ili povas esti elektitaj uzante CSS tabloj.

La sintakso estas la jena: Indikas punkton ( "."), Sekvata de skribi la nomon de la klaso. Administri la unua unuo, uzu la konstruo .red. Due - .blue ktp.

Grava! Oni rekomendas uzi signifoplenan valorojn de la klaso atributo. Ĝi estas konsiderata malbona formo uzi transliteration (ekz krasiviy-blok) aŭ hazardaj kombinaĵoj de literoj / nombroj (ojfh834871). En ĉi tiu kodo, kio ligas vin akiri konfuzita, kaj kompreneble la malfacilaĵojn kiuj alfrontos kiuj estos engaĝitaj en la projekto post vi. La plej bona eblo - por uzi ajnan metodaron, kiel BEM.

Avantaĝoj - relative alta fleksebleco.

Malavantaĝoj - la multnombraj elementoj povas esti oni kaj la sama klaso, kio signifas, ke ili estos eldonita samtempe. La problemo estas solvita uzante la metodaron kaj ankaŭ heredaĵo de preprocessors. Nepre akiri viajn manojn malpli, Sass aŭ alian antaŭtraktilo, ili ege simpligi la laboron.

ID seleccionador

Pri ĉi tiu versio opinio codificadores kaj programistoj estas ambiguaj. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Iuj CSS lernilojn ne rekomendas la uzon de ID, ĉar en malpreciza aplikon ili povas kaŭzi problemojn kun heredaĵo. Tamen, multaj fakuloj estas aktive aranĝi ilin en la tuta aranĝo. Vi decidas. # »), затем имя блока. La sintakso estas la jena: la pundo signo ( "#"), tiam la nomo de la bloko. #red. Ekzemple, #red.

отличается от класса по нескольким параметрам. ID malsamas de la klaso en pluraj manieroj. ID. Unue, la paĝo ne povas esti du identajn ID. Ili estas asignita unikan nomon. Due, tia elektilo havas pli altan prioritaton. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Tio signifas, ke se vi specifi unuo klaso ruĝa kaj specifi en CSS tabloj ruĝa fono koloro, kaj poste atribui al ĝi la saman id blua kaj specifi la koloro blua, la unuo iĝos blua.

Avantaĝoj - vi povas kontroli la specifaj elemento, ignorante stiloj de etikedoj kaj klasoj.

ID и class. Malavantaĝoj - facile perdiĝi en granda nombro da ID kaj klaso.

Grava! ID вам, в общем-то, не нужны. Se vi uzas BEM metodaron (aŭ ĝia analogoj), ID vin, ĝenerale, ne estas necesa. Tiu tekniko implikas la uzon de aranĝo unika klasoj ke multe pli oportuna.

universala elektilo

{}. Sintakso: starlets signo ( "*") kaj krampoj, kio estas, {*} ...

Uzata por atribui iujn atributoj iam ĉiuj elementoj de la paĝo. Kiam tio povas esti utila? box-sizing: border-box. Ekzemple, se vi volas agordi la paĝon proprieto skatolo-dimensionamiento: limo-skatolo. div *{}. Eblas ne nur uzi por administri ĉiuj komponantoj de la dokumento, sed ankaŭ por kontroli ĉiuj infanoj de la specifita bloko, ekzemple, div * {}.

Avantaĝoj - vi povas kontroli grandan nombron da aĵoj samtempe.

Cons - ne sufiĉe fleksebla elekto. Krome, la uzo de ĉi selector, en iuj kazoj malrapidigi la paĝo laboro.

de atributoj

Ebligi kontroli la elemento kun specifa eco. Ekzemple, vi havas kelkajn enigo etikedoj kun alia eco tipo. Unu el ili - teksto, la dua - pasvorton, la tria - nombro. Kompreneble, vi povas agordi ĉiun klason aŭ ID, sed estas ne ĉiam oportuna. CSS selectores de atributoj ebligi specifi valorojn por iuj etikedoj kun maksimuma precizeco. Ekzemple, tiel:

enigo [tipo = 'teksto'] {}

Ĉi seleccionador elektos ĉiuj atributoj de la tipo de enigo tekston.

La ilo estas sufiĉe fleksebla kaj povas esti uzata kun ajna de la etikedoj, en kiuj povas esti atributoj. Sed tio ne estas ĉiu! La especificación CSS havas la kapablon kontroli la elementojn kun eĉ pli da komforto!

Imagu, ke via paĝo havas eniga kun la eco lokokupilo = "Entajpu nomon" kaj enigo lokokupilo = "Entajpu la pasvorton". Ili povas ankaŭ esti elektita uzante la seleccionador! Por fari tion, uzu la sekvan strukturon:

enigo [lokokupilo = "Entajpu la nomon"] {} aŭ eniro [lokokupilo = "Entajpu la pasvorton"]

Eble pli fleksebla laboro kun atributoj. Imagu ke vi havas kelkajn etikedoj kun similaj atributoj titolon (ekzemple, "Kaspia" kaj "Kaspia"). Por elekti ambaŭ, uzi la sekvajn elektojn:

[Titolo * = "Kaspijsk"]

CSS elektos ĉiuj aĵoj en la titolo de kiu estas simboloj de "Kaspia", te. E., Kaj "Kaspia" kaj "Kaspia".

Vi povas ankaŭ elekti etikedoj kiuj komencas kun iuj karaktero ecoj:

[Titolo ^ = "karakteron vi volas"] {}

aŭ nuligi ilin:

[Titolo $ = "dekstra karaktero"] {}.

Avantaĝoj - maksimuma fleksebleco. Vi povas elekti ajnan ekzistantan paĝon elementoj sen rompado kun la klasoj.

Malavantaĝoj - uzata relative malofte, nur en specifaj kazoj. Multaj ttt diseñadores preferas metodaron, ĉar la punkto klaso estas pli facila ol aranĝi multnombraj rektaj krampoj kaj signoj "egalaj". Krome, ĉi tiuj selectores ne funkcias en Internet Explorer versioj 7 kaj sube. Tamen, kaj ili nun bezonas la malnova Interreto Explorer?

pseŭdo-klaso selectores

Indikas pseŭdo-statuso elemento. Ekzemple ,: Hover - kio okazas al la parto de la paĝo kiam vi ŝvebi ,: vizitis - la vizitis ligilo. Ĝi ankaŭ inkludas elementojn kiel: unua-infano kaj: lasta-infano.

Tiu tipo de seleccionador estas aktive uzata en moderna aranĝo, ĉar danke al tio povas fari paĝon "vivas" sen la uzo de JavaScript. Ekzemple, vi volas certigi ke kiam vi ŝvebi super la butonon kun la klaso de BTN ĝia koloro ŝanĝiĝis. Por fari tion, ni uzas la jenan strukturon:

.btn: ŝvebado {

fono-koloro: ruĝa;

}

Beleco povas esti precizigita en la bazaj propraĵoj de la butono, la transiro propraĵo, ekzemple, 0.5s - en ĉi tiu kazo, la butono ne ruĝiĝi senprokraste, kaj ene de duona sekundo.

Virtoj - estas vaste uzita por la "renaskiĝo" de paĝoj. Facila uzi.

Malavantaĝoj - ili ne estas. Jen vere oportuna ilo. Tamen, sensperta retejo diseñadores povas akiri perdita en la abundeco de pseŭdo-klasoj. La problemo estas solvita studo kaj praktiko.

pseŭdo-elektiloj

"Pseudo" - jen estas la partoj de la paĝo, kiuj ne estas en HTML, sed ankoraŭ eblas sukcesis. Vi ne komprenis? Ĝi estas multe pli facila ol ĝi ŝajnas. Ekzemple, vi volas fari la unua litero en la kordo granda kaj ruĝa, lasante la aliajn malgrandajn kaj nigra teksto. Kompreneble, ĝi povas fini ke letero en lapso kun certa klaso, sed ĝi estas longa kaj enuiga. Estas multe pli facile elekti la tutan alineon kaj uzi pseŭdo :: unua-leteron. Ĝi donas la ŝancon por kontroli la apero de la unua litero.

Estas sufiĉe granda nombro da pseŭdo-elementoj. Listo ilin en ununura artikolo verŝajne ne sukcesos. Vi povas trovi la koncernajn informojn en via preferata serĉilo.

Avantaĝoj - provizi la flekseblo personecigi la aspekton de la paĝo.

Malavantaĝoj - nova por ili estas ofte konfuzita. Multaj selektadoj de ĉi tiu tipo de laboro nur en iuj retumiloj.

Resume

Elektilo - potenca ilo por dokumenton fluo kontrolo. Danke al li, vi povos elekti ĉiun ununuran komponanto de la paĝo (estas eĉ nur parte). Certiĝu lerni ĉiujn disponeblajn eblojn, aŭ eĉ ilin registri. Ĉi tio estas aparte grava se vi kreas kompleksajn paĝoj kun moderna dezajno kaj multa interagaj elementoj.