Përzgjedhësit ngjitur css. Përzgjedhës të veçantë në CSS. Përzgjedhësit e atributeve fqinje, fëmijë, kontekstuale dhe të etiketave. Vlera e atributit përfundon me tekst specifik
Përshkrim
Elementet e një faqe në internet quhen fqinjë kur ata menjëherë ndjekin njëri-tjetrin në kodin e dokumentit.
Sintaksë
E + F (Përshkrimi i rregullave të stilit)
Për të kontrolluar stilin e elementeve ngjitur, përdorni karakterin plus (+) midis dy përzgjedhësve E dhe F. Hapësira rreth plusit janë opsionale. Ky stil zbatohet për elementin F, por vetëm nëse është ngjitur dhe menjëherë pas elementit E. Le të shohim disa shembuj.
Lorem ipsum dolor rri amet.
Etiketoj është një fëmijë i etiketës
Sepse është brenda kësaj ene. Përkatësisht
Vepron si prind .
Lorem ipsum dolor rri amet
Etiketat dhe nuk mbivendosen dhe përfaqësojnë elementet ngjitur. Fakti që ato ndodhen brenda kontejnerit Nuk ndikon në qëndrimin e tyre. Lorem ipsum dolor rri amet, kujdestar adipiscing elitare.
Etiketat janë ngjitur këtu dhe , dhe dhe ... Ku dhe elementet ngjitur nuk janë të lidhura për faktin se midis tyre ka një enë .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor rri amet, kujdestar elit adipiscing.
Lorem ipsum dolor ulet amet, kujdestar elit adipiscing.
Rezultati i këtij shembulli është treguar në Fig. 1
Figura: 1. Ngjyra e kuqe e tekstit për përzgjedhësit ngjitur
Shfletuesit
Internet Explorer 7 nuk bën stil nëse ekziston një koment (B + / * plus * / I) midis përzgjedhësve.
Vlad Merzhevich
Elementet e një faqe në internet quhen fqinjë kur ata menjëherë ndjekin njëri-tjetrin në kodin e dokumentit. Le të shohim disa shembuj të marrëdhënieve elemente.
Lorem ipsum dolor rri amet.
Në këtë shembull, etiketimi është një fëmijë i etiketës
Sepse është brenda kësaj ene. Përkatësisht
Vepron si prind .
Lorem ipsum dolor rri amet
Këtu etiketat dhe nuk mbivendosen dhe përfaqësojnë elementet ngjitur. Fakti që ato ndodhen brenda kontejnerit Nuk ndikon në qëndrimin e tyre në asnjë mënyrë. Lorem ipsum dolor rri amet, kujdestar adipiscing elitare.
Etiketat janë ngjitur këtu dhe , dhe dhe ... Ku dhe elementet ngjitur nuk janë të lidhura për faktin se midis tyre ka një enë .
Shenja plus (+) përdoret për të kontrolluar stilin e elementeve ngjitur, i cili vendoset midis dy përzgjedhësve. Sintaksa e përgjithshme është si më poshtë.
Përzgjedhësi 1 + Përzgjedhësi 2 (Përshkrimi i rregullave të stilit)
Hapësira përreth plus-it është opsionale, stili zbatohet në Selector 2, por vetëm nëse është ngjitur me Selector 1 dhe menjëherë pas tij.
Shembulli 11.1 tregon strukturën se si etiketat ndërveprojnë me njëri-tjetrin.
Shembulli 11.1. Përdorimi i përzgjedhësve ngjitur
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor rri amet, kujdestar elit adipiscing.
Lorem ipsum dolor ulet amet, kujdestar elit adipiscing.
Rezultati shembull është treguar në Fig. 11.1
Figura: 11.1 Theksimi i tekstit me ngjyra duke përdorur përzgjedhësit ngjitur
Ky shembull ndryshon ngjyrën e tekstit për përmbajtjen e kontejnerit. kur pozicionohet menjëherë pas kontejnerit ... Në paragrafin e parë, kjo situatë zbatohet, kështu që fjala "consectetuer" shfaqet me të kuqe në shfletuesin. Në paragrafin e dytë, megjithëse ekziston një etiketë por pa etiketë në vendin fqinj jo, kështu që nuk përdoret asnjë stilim në këtë enë.
Le të shohim një shembull më praktik. Shpesh është e nevojshme të përfshihen fusnota dhe shënime të ndryshme në tekstin e një artikulli. Zakonisht një klasë e stilit të ri krijohet për këtë qëllim dhe zbatohet në një paragraf, kështu që lehtë mund të ndryshoni pamjen e tekstit. Por ne do të shkojmë në anën tjetër dhe do të përdorim përzgjedhës fqinjë. Për të nxjerrë në pah komentet, krijoni një klasë të re, thirrni sic dhe zbatojeni atë në etiketë
... Paragrafi i parë pas një titulli të tillë theksohet me ngjyrën dhe sfondin e sfondit (shembulli 11.2). Pjesa tjetër e paragrafëve do të mbetet e pandryshuar.
Shembulli 11.2. Ndrysho stilin e paragrafit
HTML5 CSS 2.1 IE Cr Op Sa Fx
Metodat për kapjen e një luani në shkretëtirë
Metoda e kërkimit sekuencial
Le luani të ketë përmasat e përgjithshme L x W x H, ku L është gjatësia e luanit nga maja e hundës deri te furça e bishtit, W është gjerësia e luanit dhe H është lartësia e tij. Pastaj e ndajmë shkretëtirën në një numër drejtkëndëshash elementarë, madhësia e të cilave përkon me gjerësinë dhe gjatësinë e luanit. Duke marrë parasysh që luani nuk mund të jetë rreptësisht në një zonë të caktuar, por njëkohësisht në dy prej tyre, kafazi për peshkim duhet të bëhet nga një zonë e shtuar, përkatësisht 2L x 2W. Falë kësaj, ne do të shmangim gabimet kur vetëm gjysma e luanit ose, më keq, vetëm bishti i tij është kapur në kafaz.
Shënim i rëndësishëm
Për të thjeshtuar llogaritjet, bishti si një gabim i matjes mund të hidhet dhe të mos merret parasysh.
Rezultati i këtij shembulli është treguar në Fig. 11.2.
Figura: 11.2. Ndryshimi i pamjes së një paragrafi duke përdorur përzgjedhësit ngjitur
Në këtë shembull, teksti formatohet duke përdorur paragrafë (etiketë)
), por duke shkruar H2.sic + P vendos stilin vetëm për paragrafin e parë që ndjek etiketën
e cila ka shtuar një klasë me emrin sic.
Përzgjedhësit ngjitur janë të dobishëm për ato etiketime që indentohen automatikisht në mënyrë që të rregullojnë në mënyrë të pavarur sasinë e mbushjes. Për shembull, nëse ka etiketa në një rresht
dhe , atëherë distanca midis tyre është e lehtë për tu rregulluar vetëm me ndihmën e përzgjedhësve ngjitur. Situata është e ngjashme për etiketat radhazi. dhe
dhe
Dhe gjithashtu në raste të tjera të ngjashme. Shembulli 11.3 ndryshon sasinë e dhëmbëzimit ndërmjet etiketave të specifikuara në këtë mënyrë.
Shembulli 11.3. Dhëmbëzimet midis titujve dhe tekstit
HTML5 CSS 2.1 IE Cr Op Sa Fx
Titulli 1
Titulli 2
Paragraf!
Meqenëse gjatë përdorimit të përzgjedhësve ngjitur, stili zbatohet vetëm në elementin e dytë, madhësia e dhëmbëzimeve zvogëlohet duke përfshirë një vlerë negative për vetinë e margjinës. Në këtë rast, teksti ngrihet lart, më afër elementit të mëparshëm.
Pyetje për të kontrolluar
1. Cilat etiketa janë ngjitur në këtë kod?
Formula e acidit sulfurik:H 2KËSHTU QË 4
DHE
- dhe
- dhe
- dhe
- dhe
2. Ekziston kodi HTML i mëposhtëm:
Teorema e fundit e Fermat
X n + Y n
\u003d Z n
ku n është një numër i plotë\u003e 2
Cili tekst do të theksohet me të kuqe duke përdorur stilin SUP + SUP (ngjyra: e kuqe;)?
- "N" e dytë
- E dyta dhe e treta "n".
Mirëmbrëma, të dashur kolegë, sot do të studiojmë me ju edhe dy shtesë zgjedhësitë cilat quhen zgjedhësit e CSS për fëmijë dhe motër... Në një masë më të madhe, ju mund të bëni pa to, megjithatë, për zhvillimin tuaj ato duhet të mësohen, dhe nganjëherë të zbatohen në mënyrë që ato të mbeten në kujtesën tuaj. Prandaj, ne do të diskutojmë se cila përzgjedhësve janë ngjitur, dhe cilët fëmijë, dhe ne do të analizojmë me një shembull.
Përzgjedhësit e css të fëmijëve - elementet që ndodhen brenda elementit mëmë. Një shembull i kësaj mund të jetë si më poshtë. Ne kemi një bllok që përmban një paragraf, një bllok tjetër dhe një fotografi. Këto tre elementë janë fëmijë. Nëse blloku i fëmijëve përmban edhe elementë të tjerë, atëherë ata nuk janë më fëmijë të bllokut të parë, por janë fëmijë të bllokut në të cilin ndodhen drejtpërdrejt. Shpresoj ta kuptoni.
Përzgjedhësit ngjitur CSS - elementet e vendosura njëra pas tjetrës në kodin e dokumentit. Një shembull i kësaj është. Kemi një paragraf të ndjekur nga një etiketë shtrirje... Gjithçka është mjaft e qartë, por ne vetëm duhet ta bëjmë të gjithë këtë me shembuj të vërtetë.
Teksti në një paragraf
Teksti në hapësirë
Nuk ka më tekst për fëmijë në një paragraf
Përdorimi i stileve për të shtuar të njëjtin rezultat për etiketën shtrirje
Div \u003e hapësirë \u200b\u200b(
madhësia e shkronjave: 200%;
}
f + hapësira (
ngjyra: e kuqe;
}
Rezultati i ekzekutimit të kodit në të dy rastet do të zbatohet në etiketë shtrirjepasi që është një fëmijë i etiketës div dhe tjetri pas etiketës f... Prandaj, shkronja u bë dy herë më e madhe dhe e kuqe. Tani ne jemi marrë plotësisht përzgjedhës të fëmijëve dhe motrave në CSS, dhe ju vetëm duhet të forconi njohuritë tuaja në praktikë, shihemi së shpejti!
Përzgjedhësi i fqinjit zgjedh një element menjëherë pas një elementi tjetër të specifikuar në kodin e dokumentit. Le të marrim një pjesë të kodit html si shembull.
Paragrafi dhe në të yndyror element, dhe ja i prirur element
Ekzistojnë tre etiketa:
, dhe ... Etiketat dhe i vendosur në një enë
Ata janë fëmijë të tij. Por në lidhje me njëri-tjetrin, ata janë ngjitur.
Sintaksa për selektorin ngjitur është përzgjedhësi i elementit të mëparshëm, i ndjekur nga përzgjedhësi i elementit të zgjedhur. Le ta bëjmë zgjedhësin ngjitur të punojë:
Paragrafi dhe në të yndyror element, dhe ja i prirur element
Këtu yndyror dhe nënvizuar elemente, më shumë i prirur.
Në shembull, ju mund të shihni se përzgjedhësi i vëllait dhe motrës u shkaktua në paragrafin e parë. Këtu etiketat dhe shko njeri pas tjetrit. Dhe në paragrafin e dytë, etiketa është përdorur midis tyre , tani ka dy çifte të tjerë të afërt të etiketave: + dhe + .
Një gabim në këtë rast është etiketa ngjitur me etiketën
Këtu etiketo është një fëmijë i etiketës
Dhe ai, nga ana tjetër, është prindi .
Shembulli më poshtë nuk do të funksionojë:
Paragrafi dhe në të yndyror element, dhe ja i prirur element
Këtu yndyror dhe nënvizuar elemente, më shumë i prirur.
Një shembull më real në botë
Le të shohim se si funksionon përzgjedhësi ngjitur me një shembull më realist. Në artikuj të mëdhenj që përmbajnë seksione të shumta të etiketuara
, është e dëshirueshme të rritet marzhi i sipërm (marzhi i pronës-maja). Një dhëmbëzim prej 30 px do ta bëjë tekstin më të lexueshëm. Por në rast se etiketimi vjen menjëherë pas , dhe kjo mund të jetë në fillim të artikullit, paralajmërimi mbi etiketën do të jetë e tepërt. Ju mund ta zgjidhni këtë problem duke përdorur një zgjedhës të elementit ngjitur.
, dhe kjo mund të jetë në fillim të artikullit, paralajmërimi mbi etiketën do të jetë e tepërt. Ju mund ta zgjidhni këtë problem duke përdorur një zgjedhës të elementit ngjitur.
Këtu është kodi html për një shembull se si funksionon përzgjedhësi i fqinjit.
Përshëndetje!
Titulli H2
Titulli H2
Teksti i paragrafit ka të bëjë me aventura të pabesueshme.
Titulli H2
Teksti i paragrafit ka të bëjë me aventura të pabesueshme.
Titulli H2
Teksti i paragrafit ka të bëjë me aventura të pabesueshme.
Gjithashtu, duke përdorur mjetin ngjitës të zgjedhësit, është i përshtatshëm për të rregulluar dhëmbëzimin midis kreut dhe paragrafit të parë të seksionit, në shembullin tonë këto janë etiketa