Formatimi i një paragrafi HTML. Teoria dhe praktika

Përshkrim

Vendos gjerësinë e bllokut ose elementëve të zëvendësueshëm (këto, për shembull, përfshijnë etiketën ). Gjerësia nuk përfshin trashësinë e kufijve rreth elementit, vlerën e mbushjes dhe margjinat.

Shfletuesit funksionojnë ndryshe me gjerësinë, rezultati i shfaqjes varet nga përdorimi. Në tabelë. 1 janë dhënë opsionet e mundshme dhe gjerësia që rezulton.

Sintaksë

gjerësia: vlera | interesi | auto | trashëgojnë

vlerat

Vlerat pranojnë çdo njësi të gjatësisë CSS, si p.sh. pikselë (px), inç (in), pika (pt), etj. Kur përdorni shënimin e përqindjes, gjerësia e një elementi llogaritet bazuar në gjerësinë e elementit prind. Nëse prindi nuk është specifikuar në mënyrë eksplicite, atëherë dritarja e shfletuesit vepron si prind.

Auto Cakton gjerësinë bazuar në llojin dhe përmbajtjen e elementit. inherit Trashëgon vlerën e prindit.

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultati ky shembull siç duket në Shfletuesi Safari treguar në fig. 1.

Oriz. 1. Gjerësia e bllokut

Modeli i objektit

dokument.getElementById("elementID").style.gjerësia

Shfletuesit

Internet Explorer 6 nuk e përcakton saktë gjerësinë si min-width. Në modalitetin e çuditshëm, Internet Explorer deri dhe duke përfshirë versionin 8.0 llogarit gabimisht gjerësinë e një elementi pa shtuar mbushje, margjina dhe kufij në të.

Internet Explorer deri në versionin 7.0 nuk e mbështet vlerën trashëgimore.

Ky artikull voluminoz tutorial do të mbulojë tema të rëndësishme, qëllimi i të cilave është të zgjidhë metodat e punës me elementët e bllokut, t'i shpjegojë lexuesit se për çfarë përdoret ndryshimi në modelin e llogaritjes për gjerësinë dhe lartësinë e elementeve, si të kontrolloni tejmbushja e elementeve të bllokut dhe si të punohet me madhësi minimale dhe maksimale të elementeve.

Duke mësuar rreth modelit të kutisë CSS, mësuam se vetitë e gjerësisë dhe lartësisë përcaktojnë gjerësinë dhe lartësinë e zonës së brendshme të një elementi ( zona e përmbajtjes), i cili mund të përmbajë tekst, imazhe dhe elementë të tjerë.

Në modelin e kutisë CSS, ka një ndryshim midis vlerave të gjerësisë dhe lartësisë që i jepni një elementi dhe sasisë së hapësirës që rezervon shfletuesi për ta shfaqur atë. Gjerësia dhe lartësia totale e elementeve është zona e dritares së shfletuesit, e cila përbëhet nga gjerësia dhe lartësia e mbushjes, kufijve dhe vlerave të personalizuara të specifikuara për to.

Gjerësia totale e një elementi llogaritet duke përdorur formulën:

Në rastin tonë, kjo e shpëton situatën dhe nuk duhet të bëjmë asnjë llogaritje dhe në të ardhmen kemi frikë nga çdo ndryshim që mund të kërkohet për elementët tanë. Le t'i lëmë këto llogaritje të panevojshme në anën e shfletuesit dhe të shohim rezultatin e shembullit tonë:

Për të kuptuar përfundimisht këtë model për llogaritjen e gjerësisë dhe lartësisë së elementeve, le të konsolidojmë njohuritë e marra në shembullin e mëposhtëm:

Vlera e vetive content-box është vlera e paracaktuar dhe llogarit gjerësinë dhe lartësinë totale të elementit sipas skemës klasike. Për shembull gjerësi:

150px (gjerësia e personalizuar) + 10px (mbushja majtas) + 10px (mbushja djathtas) + 10px (kufiri majtas) + 10px (kufiri djathtas) = ​​190px.

Sa i përket elementit të dytë, për të cilin kemi aplikuar vetinë me vlerën border-box , vlera e personalizuar për gjerësinë dhe lartësinë e elementit tashmë përfshin përmbajtjen e elementit, kufijtë (border) dhe mbushjen (padding). Në shumicën e rasteve, përdorimi i një vetie me vlerën e kufirit preferohet në faqe, pasi e bën të dukshme madhësinë përfundimtare të elementit dhe shmang disa nga situatat e papritura të diskutuara më sipër.

Rezultati i shembullit tonë:

Kontrolloni tejmbushjen e elementeve të bllokut

Gjatë procesit të paraqitjes, do të keni situata ku përmbajtja e elementit do të shfaqet jashtë kufijve të elementit. Si parazgjedhje, shfletuesi shfaq një përmbajtje të tillë (shfaqet tejmbushja e elementit), e cila në disa raste çon në gabime vizuale. Vetia e tejmbushjes CSS është përgjegjëse për këtë sjellje të shfletuesit. Konsideroni vlerat e tij të mundshme:

Le të shohim shembullin e mëposhtëm:

Në këtë shembull, ne kemi vendosur katër blloqe me gjerësi dhe lartësi fikse, për të cilat u specifikuan vlera të ndryshme të vetive të tejmbushjes CSS:

• Blloku i parë(vlera e dukshme) – Përmbajtja shtrihet përtej kufijve të elementit (vlera e parazgjedhur).
• Blloku i dytë(vlera e fshehur ) - Përmbajtja që tejmbush elementin është prerë.
• Blloku i tretë(vlera e lëvizjes ) - Mbyllja është prerë, por shtohet një shirit lëvizës.
• Blloku i katërt(vlera është automatike) - si me lëvizjen e vlerës, vetëm shiriti i lëvizjes do të shtohet automatikisht nëse blloku derdhet përgjatë një aksi të caktuar ( x qoftë horizontale ose y- vertikal) në vend që të shfaqet përgjithmonë në faqe.

Rezultati i shembullit tonë.

Përshkrim

Për të ndryshuar përmasat e një imazhi duke përdorur HTML, jepen atributet lartësi dhe gjerësi. Ju mund të përdorni vlera në piksel ose përqindje. Nëse është vendosur shënimi i përqindjes, atëherë dimensionet e imazhit llogariten në lidhje me elementin prind - kontejnerin ku ndodhet etiketa . Nëse nuk ka kontejner prind, dritarja e shfletuesit vepron si kontejneri prind i saj. Me fjalë të tjera, width="100%" do të thotë që imazhi do të shtrihet në gjerësinë e plotë të faqes së internetit. Shtimi i vetëm një atributi gjerësi ose lartësi ruan raportin e pamjes dhe raportin e pamjes së imazhit. Shfletuesi më pas pret që imazhi të ngarkohet plotësisht në mënyrë që të përcaktojë lartësinë dhe gjerësinë e tij fillestare.

Sigurohuni që të përmasoni të gjitha imazhet në faqen e internetit. Kjo bën që faqja të ngarkohet pak më shpejt sepse shfletuesi nuk duhet të llogarisë madhësinë e çdo imazhi pasi të merret. Kjo deklaratë është veçanërisht e rëndësishme për imazhet e vendosura brenda një tabele.

Gjerësia dhe lartësia e figurës mund të ndryshohen si lart ashtu edhe poshtë. Sidoqoftë, kjo nuk ndikon në shpejtësinë e shkarkimit të figurës në asnjë mënyrë, pasi madhësia e skedarit mbetet e pandryshuar. Prandaj, zvogëloni imazhin me kujdes, sepse. kjo mund të shkaktojë konfuzion tek lexuesit, pse një vizatim kaq i vogël kërkon kaq shumë kohë për t'u ngarkuar. Por rritja e madhësisë çon në efektin e kundërt - madhësia e imazhit është e madhe, por skedari ngarkohet më shpejt në krahasim me imazhin me të njëjtën madhësi. Por cilësia e figurës po përkeqësohet.

Sintaksë

HTML
XHTML

vlerat

Çdo numër i plotë pozitiv në piksel ose përqindje.

Vlera e paracaktuar

Gjerësia origjinale e figurës.

HTML5 IE Cr Op Sa Fx

Përshkrim

Vendos lartësinë e bllokut ose elementëve të zëvendësueshëm (për shembull, etiketën ). Lartësia nuk përfshin trashësinë e kufijve rreth elementit, vlerën e mbushjes dhe margjinat.

Nëse përmbajtja e bllokut tejkalon lartësinë e specifikuar, atëherë lartësia e elementit do të mbetet e pandryshuar dhe përmbajtja do të shfaqet në krye të tij. Kjo veçori mund të bëjë që përmbajtja e elementit të mbivendoset kur elementët janë të njëpasnjëshëm në kodin HTML. Për të parandaluar që kjo të ndodhë, shtoni tejmbushjen : auto në stilin e elementit.

Sintaksë

lartësia: vlera | interesi | auto | trashëgojnë

vlerat

Vlerat pranojnë çdo njësi të gjatësisë CSS, si p.sh. pikselë (px), inç (in), pika (pt), etj. Kur përdorni shënimin e përqindjes, lartësia e një elementi llogaritet bazuar në lartësinë e elementit prind. Nëse prindi nuk është specifikuar në mënyrë eksplicite, atëherë dritarja e shfletuesit vepron si prind. automatikisht vendos lartësinë në bazë të përmbajtjes së elementit

HTML5 CSS2.1 IE Cr Op Sa Fx

Rezultati i këtij shembulli është paraqitur në Fig. 1.

Oriz. 1. Zbatimi i vetive të lartësisë

Modeli i objektit

dokument.getElementById("elementID").stili.lartësia

Shfletuesit

Internet Explorer 6 nuk e përcakton saktë lartësinë si min-lartësi.

Në modalitetin e çuditshëm, Internet Explorer deri dhe duke përfshirë versionin 8.0 llogarit gabimisht lartësinë e një elementi pa shtuar mbushje, margjina dhe kufij në të.

Internet Explorer deri në versionin 7.0 nuk e mbështet vlerën trashëgimore.

Si parazgjedhje, elementët e bllokut përdorin gjerësinë automatike. Kjo do të thotë që elementi do të shtrihet horizontalisht po aq sa është. hapesire e lire. Lartësia e elementeve të bllokut vendoset automatikisht si parazgjedhje, d.m.th. shfletuesi shtrin zonën e përmbajtjes në drejtim vertikal në mënyrë që të shfaqet e gjithë përmbajtja. Për të vendosur madhësi të personalizuara për zonën e përmbajtjes së një elementi, mund të përdorni vetitë e gjerësisë dhe lartësisë.

Vetia CSS width ju lejon të vendosni gjerësinë e zonës së përmbajtjes së një elementi dhe vetia height ju lejon të vendosni lartësinë e zonës së përmbajtjes:

Vini re se vetitë e gjerësisë dhe lartësisë përcaktojnë vetëm madhësinë e zonës së përmbajtjes, për të llogaritur gjerësinë totale të një elementi në nivel blloku, duhet të shtoni gjerësinë e zonës së përmbajtjes, mbushjen majtas dhe djathtas dhe gjerësinë e kufiri i majtë dhe i djathtë. E njëjta gjë vlen edhe për lartësinë e përgjithshme të elementit, vetëm të gjitha vlerat llogariten vertikalisht:

Për këtë paragraf, vendosni vetëm gjerësinë dhe lartësinë.

Ky paragraf përmban, përveç gjerësisë dhe lartësisë, një indent, një kufi dhe një dalje.

Shembulli tregon qartë se elementi i dytë zë më shumë hapësirë ​​se i pari. Nëse llogarisim sipas formulës sonë, atëherë dimensionet e paragrafit të parë janë 150x100 piksele, dhe dimensionet e paragrafit të dytë janë:

dmth 180x130 piksele.

vërshimi i elementit

Pasi të keni përcaktuar gjerësinë dhe lartësinë për elementin, duhet t'i kushtoni vëmendje një pike të rëndësishme - përmbajtja e vendosur brenda elementit mund të tejkalojë madhësinë e specifikuar të bllokut. Në këtë rast, një pjesë e përmbajtjes do të shkojë përtej kufijve të elementit, për të shmangur këtë moment të pakëndshëm, mund të përdorni veçorinë e mbingarkesës CSS. Vetia overflow i tregon shfletuesit se çfarë të bëjë nëse përmbajtja e bllokut tejkalon madhësinë e tij. Kjo pronë mund të marrë një nga katër vlerat:

• i dukshëm është vlera e paracaktuar e përdorur nga shfletuesi. Specifikimi i kësaj vlere do të ketë të njëjtin efekt si mos vendosja e vetive të tejmbushjes.
• lëviz - Shton shirita rrotullimi vertikal dhe horizontal në një element.
• automatik - Shton shirita lëvizës nëse është e nevojshme.
• fshehur - fsheh një pjesë të përmbajtjes që shkon përtej kufijve të elementit të bllokut.