Blloku dhe etiketat inline. HTML - Elemente të brendshme dhe të bllokuara

20.04.2019 Këshilla

Në këtë kapitull:

Sintaksa e elementit

Elementi HTML është njësia bazë strukturore e një faqe interneti, e shkruar në Gjuha HTML. Imazhi më poshtë tregon sintaksën e elementit. Për shumicën e etiketave, sintaksa e elementit do të duket e njëjtë, me përjashtim të etiketave të vetme.

Të gjithë elementët në HTML ndjekin të njëjtin format:

Elementi fillon me një etiketë hapëse.
Elementi përfundon me një etiketë mbyllëse.
Përmbajtja e një elementi është gjithçka midis etiketave hapëse dhe mbyllëse.
Disa elementë nuk kanë përmbajtje (elemente boshe).
Shumica e elementeve mund të përmbajnë atribute

Shënim: mos harroni të vendosni simbolin " në etiketën mbyllëse / ", i tregon shfletuesit se elementi juaj ka përfunduar dhe se ajo që vjen pas tij është një element tjetër.

Elemente boshe

Ka disa elementë në HTML që nuk kanë një etiketë mbyllëse, si p.sh ose
. Elementë të tillë quhen bosh, sepse ato nuk përmbajnë asnjë përmbajtje dhe nuk kanë një etiketë mbyllëse.

Elementet e mbivendosur

Të gjitha dokumentet HTML përbëhen nga elementë të ndërthurur. Shumica e tyre ose mund të përmbajnë elementë të tjerë, ose mund të futen vetë brenda elementeve të tjerë, dhe thellësia e foleve të elementeve nuk është e kufizuar.

Shembulli i mëposhtëm përbëhet nga tre elementë, dy prej të cilëve janë të ndërthurur:

Paragrafi im i parë

Kur vendosni një element brenda një tjetri, duhet të jeni të kujdesshëm që të siguroheni që elementi i mbivendosur të fillojë dhe të përfundojë brenda të njëjtit element. Pra, shembulli i mëposhtëm është i pasaktë:

Kjo Shumë

Interesante

Elementet e bllokut dhe të linjës plotësojnë në mënyrë perfekte njëri-tjetrin gjatë paraqitjes, secili duke zënë vendin e vet specifik. Por lindin raste kur karakteristikat e këtyre elementeve janë qartësisht të pamjaftueshme. Galeria e fotove e paraqitur në Fig. 3.28 përbëhet nga seksione që përfshijnë një imazh me një titull, dhe seksionet janë rreshtuar horizontalisht, duke zënë të gjithë gjerësinë e disponueshme. Kur dritarja e shfletuesit bëhet më e vogël, seksionet kalojnë në një rresht tjetër.

Oriz. 3.28. Foto Galeria

Nëse përdorni etiketën për të formuar seksione

, si element blloku do të fillojë çdo herë në një linjë të re. Për elementët inline, nuk mund të vendosni ngjyrën e sfondit të të gjithë seksionit dhe të vendosni përmasat e tij. Zgjidhja më e njohur në raste të tilla është përdorimi vetitë notuese, e cila do të diskutohet në seksioni tjetër. Tani për tani, unë do të përqendrohem në elementët e blloqeve inline, të cilat kombinojnë avantazhet e elementeve inline dhe bllokut.

Nuk ka asnjë etiketë në HTML që i referohet elementeve të blloqeve inline; mund të përcaktohet duke vendosur vetinë e shfaqjes së elementit në "inline-block".

Div (ekrani: blloku i brendshëm; )

Karakteristikat e këtyre elementeve janë si më poshtë.

Është e lejuar vendosja e tekstit, elementeve inline ose bllokut brenda elementeve të blloqeve inline.
Lartësia e elementit llogaritet automatikisht nga shfletuesi bazuar në përmbajtjen e bllokut.
Gjerësia është e barabartë me përmbajtjen plus vlerat e mbushjes, kufirit dhe kufirit.
Disa elementë të njëpasnjëshëm vendosen në një rresht dhe transferohen në një linjë tjetër nëse është e nevojshme.
Mund të rreshtohet vertikalisht duke përdorur veçorinë vertikale-linjë.
Lejohet të vendoset gjerësia dhe lartësia.
Efekti i kolapsit të marzhit nuk funksionon.

Për të krijuar galerinë e treguar në Fig. 3.28 për etiketën

duhet të vendosni vlerën e ekranit në "inline-block" dhe të shtoni një imazh dhe titull brenda tij nëpërmjet një etikete

(shembulli 3.18).

Shembulli 3.18. Duke përdorur ekranin

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Galeri

Katedralja e Shën Sofisë

Kisha polake

Klubi i Tregtarëve

Monument i Shën Vladimirit

Meqenëse të gjitha fotografitë janë të së njëjtës madhësi, gjerësia e bllokut është vendosur në mënyrë eksplicite dhe e barabartë me 150 px, por lartësia nuk është e specifikuar, kështu që nëse mbishkrimi për fotografinë është i gjatë, lartësia e seksioneve do të ndryshojë (Fig. 3.29) .

Oriz. 3.29. Lartësi të ndryshme të seksioneve

Ky nuk është problem, pasi seksionet do të shfaqen gjithsesi në rreshta të rregullt, pavarësisht nga lartësitë e ndryshme. Në këtë rast, ju mund të ndryshoni llojin e shtrirjes përmes vertikal-align duke shtuar këtë veti në klasën e fotografive. Nëse specifikoni vlerën në krye , shfaqja e seksioneve do të ndryshojë (Fig. 3.30).

Oriz. 3.30. Rreshtimi në krye

Problemi kryesor është shfletuesi IE deri në versionin 7.0 përfshirës. Ky shfletues aplikon vetëm blloqe inline për elementët inline dhe nuk funksionon siç duhet me elementët e bllokut. Për ta bindur këtë shfletues që të shfaqë saktë shembullin tonë, duhet të përdorim vlerën inline në vend të inline-block dhe të vendosim veçorinë hasLayout. Shtimi i linjës do të prishë paraqitjen në shfletues të tjerë, kështu që vendimi i duhur do të përfitojnë komente të kushtëzuara(shembulli 3.19).

Shembulli 3.19. Stili për IE

Ndërtim nënkupton aplikimin e kodit të specifikuar për versionin 7.0 të shfletuesit IE dhe më poshtë. Shfletuesit e tjerë e trajtojnë atë si një koment dhe e injorojnë atë. Sa i përket veçorisë së zmadhimit, ajo është jo standarde dhe synon të vendosë veçorinë hasLayout, e cila nuk mund të vendoset drejtpërdrejt.

Është gjithashtu i përshtatshëm për të përdorur elementë blloku inline për katalogë të ndryshëm produktesh që gjenden në dyqanet online. Ato zakonisht shfaqen me një foto dhe një mbishkrim. E gjithë kjo është e ngjashme me galerinë e bërë më sipër, kështu që mbetet vetëm modifikimi i kodit të tij, duke marrë parasysh shtrirjen e lartësisë dhe sjelljen IE (shembulli 3.20).

Shembulli 3.20. Katalogu

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Katalogu

Video 1856

Foto 315

Pajisjet celulare 2109

Kompjuterë dhe pajisje zyre 4296

Pajisje shtëpiake 731

Rezultati ky shembull treguar në Fig. 3.31.

Oriz. 3.31. Katalogu

Për të mos pyetur çdo etiketë

, nga të cilat mund të ketë mjaft, klasa juaj është prezantuar në shembull

me katalogun identifikues dhe stili aplikohet në etiketat brenda tij.

Ekzistojnë dy kategori kryesore të elementeve HTML, të cilat korrespondojnë me llojet e përmbajtjes dhe sjelljen e tyre në strukturën e një faqe interneti - bllokoj Dhe elemente inline. Elementet e bllokut mund të përdoren për të krijuar strukturën e një faqe interneti; elementët inline përdoren për formatimin fragmente teksti(duke përjashtuar artikujt Dhe ).

Ndarja e elementeve në elemente bllok dhe inline përdoret në specifikimet HTML deri në versionin 4.01. Në HTML5, këto koncepte zëvendësohen nga një grup konceptesh më komplekse në të cilat çdo element HTML duhet të ndjekë rregullat që përcaktojnë se çfarë përmbajtje lejohet për të.

Modeli i formatimit vizual CSS

1. Modeli i formatimit vizual

Modeli i formatimit vizual CSS është një algoritëm që përpunon një dokument HTML dhe e shfaq atë në ekranin e pajisjes. Ky model transformon çdo element dokumenti në mënyrë që të gjenerojë zero ose më shumë kuti drejtkëndëshe sipas modelit të kutisë CSS. Pozicioni i këtyre kutive në faqe përcaktohet nga faktorët e mëposhtëm:
— madhësia e elementit (duke marrë parasysh nëse ato janë të specifikuara në mënyrë eksplicite apo jo);
— lloji i elementit (linja ose blloku);
— skema e pozicionimit (rrjedhje normale, elementë të pozicionuar ose lundrues);
— marrëdhëniet ndërmjet elementeve në DOM;
— dimensionet e brendshme të imazheve të përfshira;
— informacione të jashtme (për shembull, madhësitë e dritareve të shfletuesit).

Pozicioni dhe dimensionet e kutisë(eve) të çdo elementi llogariten në lidhje me skajet e kutisë drejtkëndore, të ashtuquajturat "blloku që përmban"(që përmban bllok). Madhësia e kutisë nuk kufizohet nga madhësia e bllokut që përmban, kështu që në kushte të caktuara mund të shtrihet përtej kufijve të saj.

2. Model blloku

Në modelin e kutisë, një element trajtohet si një enë drejtkëndore që ka një zonë përmbajtjeje dhe kufij dhe mbushje opsionale (të brendshme dhe të jashtme). Vetia e shfaqjes përcakton llojin e kontejnerit të elementit. Për çdo element ka një vlerë të paracaktuar të shfletuesit.

Oriz. 1. Model bllokimi i një elementi

Zona e përmbajtjesështë përmbajtja e elementit, si teksti ose imazhi.

dhëmbëzimiështë specifikuar nga vetia e mbushjes. Mbushja është distanca midis përmbajtjes kryesore dhe kufirit të saj (kornizës). Nëse vendosni një sfond për një element, ai do të zbatohet gjithashtu në fushat e elementit. Mbushja e brendshme nuk mund të marrë vlera negative, ndryshe nga mbushja e jashtme.

Marzhi specifikohet nga vetia e marzhit. Ai shton distancën në pjesën e jashtme të një elementi nga kufiri i jashtëm i kornizës tek elementët ngjitur, duke ndarë kështu elementët në faqe. Margjinat mbeten gjithmonë transparente dhe sfondi i elementit prind është i dukshëm përmes tyre.

Vlerat e mbushjes dhe marzhit vendosen në rendin e mëposhtëm: lart, djathtas, poshtë dhe majtas.

Kufiri, ose kufiri i një elementi, specifikohet duke përdorur veçorinë kufi. Nëse nuk specifikohet asnjë ngjyrë kufiri, ajo merr ngjyrën e përmbajtjes kryesore të elementit, siç është teksti. Nëse korniza ka thyerje, sfondi i elementit do të shfaqet përmes tyre.

Mbushja, mbushja dhe kufiri i një elementi janë opsionale; vlera e tyre e paracaktuar është zero. Sidoqoftë, disa shfletues shtojnë vlera pozitive të paracaktuara në këto veti bazuar në fletët e stilit të tyre. Ju mund të pastroni stilet e shfletuesit për të gjithë elementët duke përdorur një përzgjedhës universal:

* (diferencë: 0; mbushje: 0; )

3. Blloko elementet dhe bllokon kontejnerët

Elementet e bllokut— elementë të nivelit të lartë që janë të formatuar vizualisht si blloqe, të pozicionuara vertikalisht në faqe në dritaren e shfletuesit. Shfaqni vlerat e vetive të tilla si blloku, artikulli i listës dhe tabela që bëjnë elemente të bllokut të elementeve. Elementet e bllokut gjenerojnë një bllok kryesor që përmban vetëm bllokun e elementit. Elementet me shfaqjen e vlerës: artikulli i listës gjenerojnë kuti shtesë për shënuesit që janë të pozicionuar në lidhje me kutinë kryesore.