Përdorimi i CSS për të lidhur një imazh në anën e majtë të një faqosje të faqeve
Shikoni pothuajse çdo faqe web sot dhe do të shihni një kombinim të tekstit dhe imazheve që përbëjnë shumicën e atyre faqeve. Është shumë e lehtë për të shtuar tekste dhe imazhe në një faqe . Teksti është koduar duke përdorur etiketat standarde të HTML si paragrafët, listat dhe titujt, ndërsa imazhet përfshihen duke përdorur elementin .
Aftësia për ta bërë atë tekst dhe ato imazhe të funksionojnë mirë së bashku është ajo që përcakton dizajnerët e mrekullueshëm të internetit! Ju nuk dëshironi vetëm që teksti dhe imazhet tuaja të shfaqen njëri pas tjetrit, kështu që elementët e nivelit të bllokut do të paraqiten në mënyrë të paracaktuar. Jo, ju doni një kontroll mbi mënyrën se si teksti dhe imazhet rrjedhin së bashku në atë që në fund do të jetë dizajni vizual i faqes suaj.
Duke pasur një imazh që është në linjë me anën e majtë të një faqe, ndërsa teksti i asaj faqe rrjedh rreth tij është një trajtim i zakonshëm i dizajnit për dizajn të shtypur dhe gjithashtu për faqet e internetit. Në terma web, ky efekt njihet si lundrues i imazhit . Ky stil është arritur me pronën CSS për "noton". Kjo pronë lejon tekstin të rrjedhë rreth imazhit të linjës së majtë në anën e djathtë. (Ose rreth një imazhi në të djathtë drejt anës së majtë.) Le të hedhim një vështrim se si të arrijmë këtë efekt vizual.
Filloni me HTML
Gjëja e parë që do t'ju duhet të bëni është të keni disa HTML për të punuar me të. Për shembull, ne do të shkruajmë një paragraf të tekstit dhe do të shtojmë një imazh në fillim të paragrafit (para tekstit, por pas tagit
hapjes). Këtu është ajo që duket si shenjë HTML:
By default, faqja jonë do të shfaqet me imazhin mbi tekstin. Kjo është për shkak se imazhet janë elemente të nivelit të bllokut në HTML. Kjo do të thotë se shfletuesi shfaq rreshtin e vijave para dhe pas elementit të imazhit sipas parazgjedhjes. Ne do të ndryshojmë pamjen e parazgjedhur duke u kthyer te CSS. Së pari, megjithatë, ne do të shtojmë një vlerë të klasës në elementin tonë të imazhit . Kjo klasë do të veprojë si një "goditje" që do të përdorim në CSS tonë më vonë.
Vini re se kjo klasë e "majtë" nuk bën aspak të vetën! Për ne për të arritur stilin tonë të dëshiruar, ne duhet të përdorim CSS tjetër.
Stilet CSS
Me HTML-in tonë në vend, duke përfshirë atributin tonë të klasës "left", tani mund të kthehemi në CSS. Ne do të shtonim një rregull në fletën e stilit tonë që do të notonte atë imazh dhe gjithashtu do të shtonte një mbushje të vogël pranë tij, në mënyrë që teksti që përfundimisht do të mbështesë imazhin, nuk do të mbështesë atë shumë afër. Këtu është CSS ju mund të shkruani:
.left {float: left; mbushje: 0 20px 20px 0; }Ky stil gjithandej atë imazh në të majtë dhe shton një mbushje të vogël (duke përdorur disa stenografi CSS) në të djathtë dhe në fund të imazhit.
Nëse keni rishikuar faqen që përmban këtë HTML në një shfletues, imazhi tani do të përafrohet në të majtë dhe teksti i paragrafit do të shfaqet në të drejtën e tij me një hapësirë të përshtatshme ndërmjet dy. Vini re se vlera e klasës "e majtë" që kemi përdorur është arbitrare. Ne mund ta kishim quajtur atë gjë, sepse termi "majtas" nuk bën asgjë më vete. Kjo duhet të ketë një atribut të klasës në HTML që punon me një stil të CSS aktuale që dikton ndryshimet vizuale që po kërkoni të bëni.
Mënyrat alternative për të arritur këto stile
Kjo qasje e dhënies së elementit të imazhit një atribut të klasës dhe pastaj përdorimi i një stili të përgjithshëm CSS që lundron elementin është vetëm një mënyrë që mund të arrini këtë pamje të "imazhit të majtë të radhës". Ju gjithashtu mund të hiqni vlerën e klasës nga imazhi dhe ta stiloni atë me CSS duke shkruar një përzgjedhës më specifik. Për shembull, le të shohim një shembull ku ajo imazh është brenda një ndarjeje me një vlerë të klasës së "përmbajtjes kryesore".
Për ta stilizuar këtë imazh, mund të shkruanit këtë CSS:
.main-content img {float: majtas; mbushje: 0 20px 20px 0; }Në këtë sceario, imazhi ynë do të përafrohet në të majtë, me tekstin që lundron rreth tij si më parë, por nuk duhej të shtonim një vlerë shtesë të klasës në shenjën tonë. Të bësh këtë në shkallë mund të ndihmojë në krijimin e një skedari më të vogël HTML, i cili do të jetë më i lehtë për t'u menaxhuar dhe gjithashtu mund të ndihmojë në përmirësimin e performancës.
Së fundi, mund të shtoni edhe stilet drejtpërdrejt në HTML-in tuaj, si kjo:
Kjo metodë quhet " stile inline ". Nuk është e këshillueshme, sepse në mënyrë të qartë kombinon stilin e një elementi me shënimin e saj strukturor. Praktikat më të mira në internet diktojnë që stili dhe struktura e një faqe duhet të mbeten të ndara. Kjo është veçanërisht e dobishme kur faqja juaj duhet të ndryshojë paraqitjen e saj dhe të kërkojë madhësi dhe pajisje të ndryshme të ekranit me një faqe interneti të përgjegjshme. Duke pasur stilin e faqes të ndërthurur në HTML do ta bëjë shumë më të vështirë për autorin e pyetjeve të medias që do të përshtasin pamjen e sitit tuaj sipas nevojës për ato ekranet e ndryshëm.
Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 4/3/17.