Selectors CSS. cureyên selectors

, her ku tu dixwazî set a rengê taybet. Ku çawa bikin? selectors CSS Standard ne minasib ji bo tags ne, ew didin Parametreyên bo hemû blokên di cih de. The çareseriyê hêsan e. Hacetê endamên çîna. Ji bo nimûne, cara yekem div class qebûl = 'red', duyem - class = 'blue', sêyem - class = 'kesk'. Niha ew dikarin bi bikaranîna maseyên CSS hilbijartin.

The syntax wiha ye: şanî xala ( "."), Li dû nivîsandina bi navê class. Ji bo bi rêvebirina beşa yekem, bikaranîna avakirina Fîdakirina. Duyemîn - .blue û da ser.

Girîng! Pêşniyara me ew e ku bikaranîna nirxên watedar ji taybetiyê ku çîna. Ev tê hesibandin form xerab bi kar transliteration (wek nimûne, krasiviy-blok) an combinations random ji tîpên / hejmara (ojfh834871). Di vê code, hûn bi girêdayî to get tevlihev, behsa zehmetiyên ku ew kesên ku dê di vê projeyê de piştî ku tu dergistî rû wê ne. Baştirîn alternatîf e - bi kar rêbaza, wek BEM.

Feyda - delîveya nisbeten bilind.

Dezawantajên - hêmanên piralî bibin yek û heman polê de, tê wê wateyê ku ew dê bi hev re tê weşandin. Pirsgirêk ne bi bikaranîna rêbazên weha wek mîras ji preprocessors çareserkirin. Be sure to get destên xwe kêmtir, sanscrit an hin Unix a din jî, ew pirr asan kar.

selector ID

Derbarê vê guhartoyê coders raya û bernamenûs, şêlû ne. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Hinek tutorials CSS do bikaranîna ID pêşniyar ne, ji ber ku di sepanê de bi dîrokeke ew dikarin pirsgirêkên bi mîrasa çewtiyan. Lê belê, gelek pispor çalak saz wan li seranserê layout. Tu bi xwe biriyarê. # »), затем имя блока. The syntax wiha ye: nîşana zêrî ( "#"), paşê bi navê block. #red. Ji bo nimûne, #red.

отличается от класса по нескольким параметрам. ID cuda, ji çîna bi gelek riyan e. ID. Yekem, rûpel ne dikare bibe du ID jî ne wek hevin. Ew bi navekî xweser rêdan. Ya duyemîn jî, weha a bijarker a pêşanî mezintir. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Ev tê wê wateyê ku heke tu class yekîneya sor diyar bike û diyar bike li maseyên CSS sor background color, û paşê para da jî bi eynî id şîn û diyar bike ku bi rengê şîn, li beşa wê şîn vegerin.

Feyda - tu hêmana taybet kontrol bike, styles ji tags û çînên tûne.

ID и class. Dezawantajên - hêsan e ku tev li hejmareke mezin ji ID û çîna ji dest da.

Girîng! ID вам, в общем-то, не нужны. Eger tu bi bikaranîna rêbaza BEM (an jî bi xwar- xwe), ID ji bo we, bi giştî, bi pêwîstî ne. Ev teknîka dimeşin bikaranîna layout dersên yekane ku gelek musaît e.

selector gerdûnî

{}. Hevoksaziyê: DivXfacTory nîşana ( "*") û deaktîv bike, yanî, {*} ...

Bikaranîn, ji peywirdarkirin, xerîbkirin, hin cih de hemû hêmanên rûpel. Dema ku ev nikare kêrhatî be? box-sizing: border-box. Ji bo nimûne, heger tu dixwazî ji bo danîna ser malê rûpel box-Sizing: border-box. div *{}. Ne bi tenê dikarî bê bikaranîn, ji bo birêvebirina hemû pêkhateyên a belgeyê de, di heman demê de jî ji bo hemû zarokên block diyarkirin, ji bo nimûne, div * {}.

Feyda - tu hejmareke mezin ji tomar di demekê de kontrol bike.

Humberto - ne bes bijare nerm. Li gel vê, bi bikaranîna vê polê de, di hin rewşan de bi derengî kar rûpel hene.

bi taybetmendiyên xwe

Bidin ku ji bo kontrolkirina element bi wesf taybet. Ji bo nimûne, tu hejmara tags input bi cureyeke cuda. Yek ji wan - text, ya duyem - şîfreya xwe, ya sisiyan - Hejmara. Bê guman, tu her class an ID danîn, lê ew her tim xweşkeys de ne. selectors CSS ji taybetiyên xwe bidin ku bi xwe diyar bike, nirxên ji bo tags hin bi herî zêde azmûn dike. Ji bo nimûne, wekî vê:

input [ 'text' type =] {}

Ev selector dê hemû taybetmendiyên xwe bi type of text input hilbijêrin.

The tool pir nerm e û dikare bi her yekî ji tags, li ku dibe ku bibe, taybetmendiyên xwe li wir tê bikaranîn. Lê belê, ji ber hemû ne! The specification CSS heye ku mirov bikaribe bi kontrol hêmanên bi rehetiya hê bêtir!

Bifikirin ku rûpel te input bi bêy bikarbar = "Enter a bi navê" û bêy input = "şîfreyê binivîse." Ew jî dikarin bi bikaranîna selector bên hilbijartin! Ji bo vê jî, bi kar tînin ji tevna jêr e:

input [bêy = "binivîse ya bi navê"] {} an input [bêy = "şîfreya xwe binivîse"]

Dibe ku xebata nerm û bi taybetmendiyên xwe. Werin, em dibêjin tu hejmara tags bi title taybetmendiyên xwe dişibin (ji bo nimûne, "Caspian" û "Caspian"). To hilbijêre hem, bi kar selections jêr e:

[Title * = "Kaspiysk"]

CSS dê hemû tomar di title yên ku sembolên "Caspian", ango. E., Û "Caspian" û "Caspian" li wir hilbijêre.

Tu dikarî tags ku dest bi hildide karektera hin hilbijêre:

[Title ^ = "karaktera hûn dixwazin"] {}

an jî, dawîlêanîna wan:

[$ Title = "karaktera mafê"] {}.

Feyda - herî zêde, nermbûneke. Tu dikarî hêmanên rûpel heyî bê serkirdeyên bi dersên hilbijêrî.

Dezawantajên - bikaranîn nisbeten kêm, tenê di rewşên taybetî de. Gelek îcrakar web tercîh metodolojiya, ji ber ku çîna xala hêsantir ji bo saz bikin gelek e bixemilînî û nîşanên "wekhev". Li gel vê, van selectors jî di Internet Explorer versions 7 û li jêr kar ne. Lê belê, ku niha pêwîstiya me bi Internet Explorer kevin?

selectors pseudo-class

Mînî a element pseudo-status. Ji bo nimûne ,: hover - tiştê ku diqewime ji beşek ji rûpel gava ku tu hover ,: ziyaret kir - the link ziyaret kir. Ev jî tê de hêmanên wek: yekem-zarok û: last-zarok.

Ev type hilbijêra çalak di layout modern tê bikaranîn, ji ber ku bi saya ew tu dikarî rûpel "live" bêyî bikaranîna JavaScript bikin. Ji bo nimûne, hûn dixwazin piştrast bikin ku gava ku tu li ser bişkojka hover bi çîna ji BTN rengê xwe guherand. Ji bo vê jî, em bi kar tînin de avahiya jêrîn:

.btn: hover {

background-color: red;

}

Beauty dikare di taybetmendiyên bingehîn ên li ser bişkoka, milk derbasbûna diyarkirin de, bo nimûne, 0.5s - di vê rewşê de, li ser bişkoka wê ne di cih de nixamt, û di nava nîv duyemîn.

Fezîlet - bi awayeke berfireh ji bo "hişyarbûna" of pages bikaranîn. Bikaranîna wê hêsan e.

Dezawantajên - ew in ne. Ev tool rastî handy e. Lê belê, dîzayner web bêtecrube dikarin di pirrbûna pseudo-çînên ji dest da. Pirsgirêk ne lêkolînê û pratîkê de çareser bibe.

pseudo-selectors

"Pseudo" - van beşên rûpel ên ku ne di HTML de ne jî hene, lê ew hê jî dikarin bên îdarekirin. Hûn fêm nekir? Ev çiqas bêtir bi hêsanî xuya dike. Ji bo nimûne, hûn dixwazin di nameyê de di destpêkê de di string mezin û sor, dev ji text biçûk û reş yên din. Bê guman, ew dikare bê wê encamê ku nameyek di span bi class hinek, lê belê ev dirêj û boring. Ev e, pir bi hêsanî hilbijêrin tevahiya paragraf û bikaranîna pseudo :: first-letter. Ev derfet ji bo kontrolkirina xuya nameya yekem dide.

ne pir hejmareke mezin ji pseudo-element hene. Lîsteya wan di gotara yek nayê kirin bo ku serkeftî ye. Hûn dikarin agahiyên têkildar in search engine favorite xwe bibînin.

Feyda - ne li delîveya bo kesanekirina sîmaya ya rûpel.

Dezawantajên - nû ji wan re gelek caran tevlihev in. Gelek ji vê type of kar bi tenê gerok hin selections.

Bi kurtî

Hilbijêr - alaveke bihêz ji bo kontrolkirina herikîna belge. Bi saya wî, tu her pêkhatek single ya rûpel hilbijêre (in, heta li wir bi tenê qismî). Hûn bawer bin ji bo hînbûna hemû vebijêrkên heyî, an jî ji wan re binivîsin. Ev yek bi taybetî girîng e, eger tu pages kompleks bi design modern û gelek hêmanên înteraktîf biafirîne.