Imazhet e qendrës, elementet e tekstit dhe bllokun kur ndërtohen faqet e internetit
Nëse po mësoni se si të ndërtoni faqet e internetit , një nga truket më të zakonshme që do të duhet të zotëroni është se si t'i vendosni ato në dritaren e shfletuesit. Kjo mund të nënkuptojë përqëndrimin e një imazhi në faqe, ose mund të jetë teksti që justifikon qendrën si titujt si pjesë e dizajnit.
Mënyra e duhur për të përmbushur këtë pamje vizuale të imazheve të qendrës ose tekstit ose madje edhe të gjithë webfaqes tuaj është duke përdorur Cascading Style Sheets (CSS) . Shumica e pronave për qendërzim kanë qenë në CSS që nga versioni 1.0, dhe ata punojnë shumë me CSS3 dhe shfletuesit e internetit modern.
Ashtu si shumë aspekte të dizajnit të uebit, ka mënyra të shumta për të përdorur CSS për të elementët e qendrës në një faqe interneti. Le të hedhim një vështrim në disa mënyra të ndryshme për të përdorur CSS për të arritur këtë pamje vizuale.
Në Përmbledhjen e Përdorimit të CSS tek Elementet e Qendrës në HTML
Qendrimi me CSS mund të jetë një sfidë për fillimin e web designers sepse ka kaq shumë mënyra të ndryshme për të arritur këtë stil vizual. Ndërkohë që shumëllojshmëria e metodave mund të jenë zhvillues të mirë ose të admiruar të web-it, të cilët e dinë se jo të gjitha teknikat funksionojnë në çdo element, kjo mund të jetë shumë sfiduese për profesionistët më të rinj të internetit, meqenëse shumëllojshmëri metodash nënkuptojnë se duhet të dinë se kur duhet të përdorin qasjen. Gjëja më e mirë për të bërë është të fitosh një kuptim të disa qasjeve. Ndërsa filloni t'i përdorni ato, do të mësoni se cila metodë funksionon më së miri në cilat raste.
Në një nivel të lartë, ju mund të përdorni CSS për të:
- Teksti i qendrës
- Qendroni një element të nivelit të bllokut (si një ndarje)
- Qendro një imazh
- Qendër vertikalisht një bllok ose një imazh
Shumë (shumë) vjet më parë, web designers mund të përdorin elementin
Qendërzimi i tekstit me CSS
Gjëja më e lehtë për të përqendruar në një faqe është teksti. Ekziston vetëm një pronë stilesh që duhet të dini për ta bërë këtë: text-align. Merrni stilin CSS më poshtë, për shembull:
p.center {text-align: center; }
Me këtë linjë të CSS, çdo paragraf i shkruar me klasën e qendrës do të jetë në qendër horizontalisht brenda elementit të tij mëmë. Për shembull, nëse paragrafi ishte brenda një divizioni, që do të thotë se ishte një fëmijë i kësaj ndarjeje, do të ishte në qendër horizontalisht brenda
Ja një shembull i kësaj klase të aplikuar në dokumentin HTML:
Ky tekst është i përqendruar.
Kur të përqendrosh tekstin me pronën e alokimit të tekstit, mos harroni se do të përqendrohet brenda elementit të tij përmbajtës dhe jo domosdoshmërisht të përqëndrohet brenda vetë faqes së plotë. Gjithashtu mbani mend se teksti i justifikuar nga qendra mund të jetë i vështirë për t'u lexuar për blloqe të mëdha të përmbajtjes, prandaj përdorni këtë stil me masë. Titujt dhe blloqet e vogla të tekstit, si një tekst për një artikull ose përmbajtje tjetër, shpesh janë të lehta për tu lexuar dhe gjobë kur përqendrohen, por blloqet më të mëdha të tekstit, si vetë artikulli i plotë, do të ishin të vështira për të konsumuar nëse përmbajtja ishte tërësisht në qendër justifikuar. Mos harroni, lexueshmëria është gjithmonë çelësi kur vjen puna te teksti i faqes!
Përcaktimi i blloqeve të përmbajtjes me CSS
Blocks janë çdo element në faqen tuaj që kanë një gjerësi të përcaktuar dhe janë themeluar si element i nivelit të bllokut. Shpesh, këto blloqe krijohen duke përdorur elementin HTML
div.center {
margjina: 0 auto;
gjerësia: 80em;
}
Ky stenograf i CSS për pronën e diferencës do të vendoste kufijtë kryesorë dhe të poshtëm në një vlerë prej 0, ndërsa e majta dhe e djathta do të përdorin "auto". Kjo në thelb merr çdo hapësirë që është në dispozicion dhe e ndan atë në mënyrë të barabartë midis dy anëve të dritares së dritares së shikimit, duke e përqendruar në mënyrë efektive elementin në faqe.
Këtu është aplikuar në HTML:
por teksti brenda tij është lënë i shtrirë.
Për sa kohë që blloku juaj ka një gjerësi të përcaktuar, ajo do të përqëndrohet brenda elementit që përmbajnë. Teksti i përmbajtjes në atë bllok nuk do të përqendrohet brenda tij, por do të lihet i justifikuar. Kjo është sepse teksti është i justifikuar në të parazgjedhur në shfletuesit e internetit. Nëse dëshironi të përqendroheni në tekst, mund të përdorni strukturën e tekstit-alokimit që mbuluam më parë në lidhje me këtë metodë për të përqendruar ndarjen.
Imazhet e Qendrës me CSS
Ndërkohë që shumica e shfletuesve do të shfaqin imazhe të përqendruara duke përdorur të njëjtën pronë të rreshtimit të tekstit, ne kemi shikuar tashmë për paragrafin, nuk është një ide e mirë të mbështetemi në atë teknikë pasi nuk rekomandohet nga W3C . Meqenëse nuk rekomandohet, ekziston gjithmonë një shans që versionet e ardhshme të shfletuesve të mund të zgjedhin të injorojnë këtë metodë.
Në vend që të përdorni tekst-align për të përqëndruar një imazh, duhet t'i tregoni në mënyrë eksplicite shfletuesit se imazhi është një element i nivelit të bllokut. Në këtë mënyrë, mund ta përqendrosh atë ashtu si do të bllokonit. Këtu është CSS për ta bërë këtë të ndodhë:
img.center {
shfaq: bllok;
margjina-majtas: auto;
kufiri i djathtë: auto;
}
Dhe këtu është HTML që për imazhin që ne do të donim të përqendroheshim:
Ju gjithashtu mund të përqëndroni objektet duke përdorur CSS in-line (shih më poshtë), por kjo qasje NUK rekomandohet pasi që shton stilet vizuale në shenjën tuaj HTML. Mos harroni, ne duam të ndajmë stilin dhe strukturën, kështu që duke shtuar stilet e CSS në kodin tuaj HTML me atë ndarje dhe si të tillë duhet të shmanget sa herë që të jetë e mundur.
Eleminimi i elementëve vertikalisht me CSS
Objektet e qendrës vertikale gjithmonë kanë qenë sfiduese në dizajnimin e web-it, por me lirimin e modulit CSS Flexible Box Layout në CSS3, tani ekziston një mënyrë për ta bërë këtë.
Shtrirja vertikale punon në mënyrë të ngjashme me shtrirjen horizontale të mbuluar më sipër. Prona CSS është vertikale-lidhur me vlerën e mesme.
.vcenter {
vertikale-align: mes;
}
Dobësitë në këtë qasje janë se jo të gjithë shfletuesit mbështesin CSS FlexBox, megjithëse gjithnjë e më shumë po vijnë në këtë metodë të re të paraqitjes së CSS! Në fakt, të gjithë shfletuesit modern sot e mbështesin këtë stil të CSS. Kjo do të thotë që shqetësimet tuaja të vetme me Flexbox do të ishte versioni më i vjetër i shfletuesit.
Nëse keni probleme me shfletuesit më të vjetër, W3C rekomandon që tekstin e qendrës vertikalisht të vendosni në një enë duke përdorur metodën e mëposhtme:
- Vendosni elementet që të jenë të përqendruara brenda një elementi përmbajtës, si p.sh. një div.
- Vendosni një lartësi minimale në elementin që përmban.
- Deklaro elementin që përmban si një qelizë tabele.
- Vendosni shtrirjen vertikale në "mes".
Për shembull, këtu është CSS:
.vcenter {
min-lartësia: 12em;
shfaq: qeliza tabelore;
vertikale-align: mes;
}
Dhe këtu është HTML:
Ky tekst është vertikalisht i përqendruar në kutinë.
Qendra vertikale dhe versionet e vjetra të Internet Explorer
Ka disa mënyra për të detyruar Internet Explorer (IE) të përqëndrohet dhe pastaj të përdorë komente të kushtëzuara në mënyrë që vetëm IE të shohë stilet, por ato janë paksa të bardha dhe të shëmtuara. Lajm i mirë është se me vendimin e fundit të Microsoft për të hequr mbështetjen për versionet më të vjetra të IE, ato shfletues që nuk mbështeten duhet të dalin së shpejti, duke e bërë më të lehtë për web designers të përdorin qasje moderne të layout si CSS FlexBox i cili do të bëjë të gjithë paraqitjen CSS, jo vetëm përqendrimi, më lehtë për të gjithë web designers.