Sèvi ak CSS pou aliyen yon imaj sou bò gòch la nan yon Layout Paj Web
Gade nan prèske nenpòt paj entènèt jodi a, epi ou pral wè yon konbinezon de tèks ak imaj ki fè moute anpil nan paj sa yo. Li trè fasil pou ajoute tèks ak imaj nan yon paj . Se tèks la kode lè l sèvi avèk estanda HTML Tags tankou paragraf, lis, ak tit, pandan y ap imaj yo enkli lè l sèvi avèk eleman nan .
Kapasite nan fè tèks sa a ak imaj sa yo travay byen ansanm se sa ki kouche konsèpteur entènèt gwo apa! Ou pa jis vle tèks ou ak imaj yo parèt youn apre lòt, ki se ki jan eleman sa yo blòk-nivo pral layout pa default. Non, ou vle kèk kontwòl sou ki jan tèks la ak imaj koule ansanm nan sa ki pral finalman dwe konsepsyon vizyèl sit entènèt ou a.
Èske w gen yon imaj ki aliyen ak bò gòch nan yon paj pandan ke tèks la nan paj sa a ap koule bò kote li se yon tretman konsepsyon komen pou enprime konsepsyon ak tou pou paj wèb. Nan tèm wèb, sa a se efè li te ye tankou k ap flote imaj la . Sa a se style reyalize ak pwopriyete a CSS pou "flote". Pwopriyete sa a pèmèt tèks koule alantou imaj la bò gòch-aliyen sou bò dwat li yo. (Oswa alantou yon imaj dwat ki aliyen pou bò gòch li.) Ann pran yon gade nan fason pou reyalize efè vizyèl sa a.
Kòmanse ak HTML
Premye bagay ou pral bezwen fè se gen kèk HTML nan travay avèk yo. Pou egzanp nou an, nou pral ekri yon paragraf nan tèks epi ajoute yon imaj nan kòmansman an nan paragraf la (anvan tèks la, men apre ouvèti a
tag). Isit la se sa ki marke HTML sanble:
Pa default, Paj Web nou an ta montre ak imaj la pi wo a tèks la. Sa a se paske imaj yo se eleman blòk-nivo nan HTML. Sa vle di ke navigatè a montre liy repo anvan ak apre eleman nan imaj pa default. Nou pral chanje gade sa a default pa vire CSS. Premyèman, sepandan, nou pral ajoute yon valè klas nan eleman imaj nou an . Klas sa a ap aji kòm yon "zen" ke nou pral itilize nan CSS nou pita.
Remake byen ke klas sa a nan "kite" fè anyen nan tout sou pwòp li yo! Pou nou reyalize style vle nou an, nou bezwen sèvi ak CSS kap vini an.
CSS Styles
Ak HTML nou an nan plas, ki gen ladan atribi klas nou an nan "kite", nou kapab kounye a ale nan CSS. Nou ta ajoute yon règ nan Stylesheet nou an ki ta flote imaj sa a epi ajoute yon ti kras padding tou pre li pou ke tèks la ki pral finalman vlope otou imaj la pa bou moute kont li twò pre. Isit la se CSS ou ka ekri:
.left {flote: gòch; padding: 0 20px 20px 0; }}Sa a style flote imaj sa a sou bò gòch la epi ajoute yon ti kras padding (lè l sèvi avèk kèk sten CSS) sou bò dwat la ak anba nan imaj la.
Si ou revize paj ki gen HTML sa a nan yon navigatè, yo pral imaj la kounye a sou bò gòch la ak tèks la nan paragraf la ta parèt dwa li yo ak yon kantite ki apwopriye nan espas ant de la. Remake valè klas la nan "kite" ke nou itilize se abitrè. Nou te ka te rele li anyen paske tèm "gòch la" pa fè anyen sou pwòp li yo. Sa a bezwen gen yon atribi klas nan HTML la ki travay ak yon style CSS aktyèl ki dikte chanjman yo vizyèl ou ap chèche fè.
Fason altènatif yo reyalize sa yo Styles
Apwòch sa a bay eleman nan imaj yon atribi klas ak Lè sa a, lè l sèvi avèk yon style CSS jeneral ki flote eleman an se yon sèl fason ou ta ka akonpli sa a "kite imaj aliyen" gade. Ou kapab tou pran valè klas la nan imaj la ak style li ak CSS pa ekri yon selektè pi espesifik. Pa egzanp, ann gade nan yon egzanp kote imaj la anndan yon divizyon ki gen yon valè klas "prensipal kontni".
Pou estil sa a imaj, ou ta ka ekri sa a CSS:
.main-content img {float: left; padding: 0 20px 20px 0; }}Nan sa a sceario, imaj nou ta dwe aliyen sou bò gòch la, ak tèks la k ap flote ozalantou li tankou anvan, men nou pa t 'bezwen ajoute yon valè klas siplemantè nan markeup nou an. Fè sa a nan echèl ka ede kreye yon pi piti dosye HTML, ki pral pi fasil jere epi li ka ede tou amelyore pèfòmans.
Finalman, ou ta ka menm ajoute estil yo dirèkteman nan marke HTML ou a, tankou sa a:
Metòd sa a rele " inline styles ". Li pa rekòmande paske li klèman konbine style la nan yon eleman ak markup estriktirèl li yo. Pratik pi bon sit entènèt dikte ke style la ak estrikti nan yon paj yo ta dwe rete separe. Sa a se espesyalman itil lè paj ou bezwen chanje Layout li yo epi gade pou gwosè ekran diferan ak aparèy ki gen yon sit entènèt reponn. Èske w gen style la nan paj an mare nan HTML a pral fè li pi difisil nan otè demand medya ki pral ajiste gade sit ou a jan sa nesesè pou sa yo ekran diferan.
Original atik pa Jennifer Krynin. Edited pa Jeremy Girard sou 4/3/17.