Wizigje tekst fan in ôfbylding

Sjoch op elke webside en jo sille in kombinaasje fan tekstynhâld en foto's sjen. Beide fan dizze eleminten binne essinsjeel yngrediïnten yn it sukses fan in webside. Tekstynhâld is wat lokaasjedriuwen lêze en wat sykmasjines brûke as part fan har ranglistalgorithmen. Ofbyldings sjogge fisueel belang oan de side en helpe de tekstynhâld te aksintearjen.

It tafoegjen fan tekst en bylden nei websiden is maklik. Tekst wurdt tafoege mei standert HTML-tags as paragrafen, kopteksten en listen, wylst ôfbyldings op in side pleatst wurde mei it elemint . As jo ​​in ôfbylding oan jo webside oanbean hawwe, kinne jo lykwols wolle dat de tekst fluch njonken it byld hat, mar net as it hjirûnder te rjochtsjen (wat is de standert wize wêrop in ôfbylding taheakke wurdt by it HTML-koade sil yn 'e browser ferwidere). Tekentich binne der twa wizen dy't jo dit soarte berikke kinne, troch te brûken CSS (oanrikkemandearre) of troch de tafoeglike ynstruksjes direkt yn it HTML te foegjen (net oan te rekkenjen, omdat jo de ôfsûndering fan styl en struktuer foar jo webside bewarje wolle).

CSS brûke

De korrekte manier om de wize wêrop in side fan tekst en ôfbyldings fan in side te wizigjen en hoe't har fisuele stilen yn 'e browser ferskine, is mei CSS . Tink derom, om't wy praat oer in fisuele feroaring op 'e side (it meitsjen fan tekstfolle om in ôfbylding), betsjut dit dat it domein fan Cascading Style Sheets is.

1. Eerst tafoegje jo ôfbylding oan jo webside. Tink derom dat jo alle fisuele eigenskippen (lykas breedte- en hichte-wearden) fanút dat HTML útsette. Dit is wichtich, benammen foar in opfrege webside wêr't de ôfbyldingsgrutte op basis fan 'e browser feroaret. Guon software, lykas Adobe Dreamweaver, sille breed- en hichte-ynformaasje taheakje oan ôfbyldings dy't mei dit tool ynfoege wurde, dus bepale dat dizze ynformaasje fan 'e HTML-koade fuortsmite! Doch der wis fan om algemiene tekst alt te wurden . Hjir is in foarbyld fan hoe't jo HTML-koade sjen kin:
2. Foar styling kinst ek in klasse taheakje oan in byld. Dizze klasse wearde is wat wy brûke yn ús CSS-bestân. Tink derom dat de wearde dy't wy hjir brûke, is willekeurich, hoewol, foar dizze bepaalde styl ha wy de wearden fan "lofts" of "rjochts" brûke, ôfhinklik fan hokker wize wolle wy ús byld te rjochtsjen. Wy fine dat ienfâldige syntaksoarten goed wurkje en maklik wêze foar oaren dy't miskien in site yn 'e takomst beheare kinne om te begripen, mar jo kinne jo dizze wearde jaan dy't jo wolle.
   2. Mei himsels sil dizze klasse wearde neat dwaan. De ôfbylding sil automatysk net lofts fan 'e tekst rjochtsje. Hjirfoar moatte wy no nei ús CSS bestân werjaan.

1. Yn jo stylblêd kinne jo no de folgjende styl taheakje:
   1. .links {
   2. float: lofts;
   3. padding: 0 20px 20px;
   4. }
   5. Wat jo hjir dien hawwe, is it CSS "float" eigenskip gebrûk fan 'e gewoane ôfbylding fan' e normale dokumintflater (de wize wêrop dat ôfbylding normaal werjûn sil, mei de tekst dy't hjirboppe hinne rjochte is) en it sil it ljocht oan syn kontener rjochtsje . De tekst dy't der nei komt yn it HTML-markearring mei no wrap it om. Wy hawwe ek in oantal padding-wearden tafoege sadat dizze tekst net allinich direkte tsjin it byld hat. Ynstee dêrfan sil it in soad moaie ôfstân hawwe dat sjochfolle oanwêzich wêze sil yn it ûntwerp fan 'e side. Yn it CSS-skerm foar padding hawwe wy 0 wearden oan de boppekant en loftside fan it byld tafoege, en 20 piksels nei lofts en boppe. Tink deroan dat jo de rjochterkant fan in loftspulde ôfbylding tafoegje moatte. In rjochts opljochte byld (dy't wy op in momint sjogge) soe padding hawwe oan 'e linker kant tapast.
2. As jo ​​jo webside besjogge yn in blêder, moatte jo no sjogge dat jo ôfbylding oan 'e lofter side fan' e side rjochte is en de tekst goed omkeart. In oare manier om dit te sizzen dat it byld is "flak nei de linker".

1. As jo ​​dizze ôfbylding wizigje wolle om rjochts te rjochtsjen (lykas yn it bybyldbyldbyld dy't dit artikel begeliedt), soe it ienfâldich wêze. Earst moatte jo derfoar soargje dat, neist de styl, just oan ús CSS tafoegje foar de klasse wearde fan "lofts", hawwe wy ek ien foar rjochtsnigings. It soe sa sjen:
   1. .rjochts {
   2. float: rjocht;
   3. padding: 0 0 20px 20px;
   4. }
   5. Jo kinne sjen dat dit hast identyk is mei de earste CSS dy't wy skreaun hawwe. It iennichste ferskil is de wearde dy't wy brûke foar it "float" eigendom en de padding wearden wy brûke (tafoegje guon nei de linkerside fan ús byld ynstee fan it rjocht).
2. As lêste, jo wizigje de wearde fan 'e ôfbylding fan' e klasse fan "lofts" oant "rjochts" yn jo HTML:
3. Sjoch op jo side yn 'e browser, en jo ôfbylding moat rjochte wêze oan' e rjochterkant mei de tekst dy't it gewoane omkeare. Wy leauwe de beide stilen, "lofts" en "rjocht" oan alle stijlblêden, sadat wy dizze fisuele stilen sa nedich brûke kinne as wy websteeën meitsje. Dizze twa stilen wurde lekker, werneamde funksjes dy't wy kinne oanpasse as wy gebrûk meitsje fan ôfbyldings mei tekst om har hinne.

HTML brûke ynstee fan CSS (en wêrom't jo dit dwaan moatte)

Hoewol it mooglik is om tekst te meitsjen om in byld te meitsjen mei HTML, webstands befetsje dat CSS (en de hjirboppe presintearre stappen) de manier is om te gean sadat wy in ôfdieling fan struktuer (HTML) en styl (CSS) bewarje kinne. Dit is foaral wichtich as jo beskôgje dat, foar guon apparaten en layouts, dizze tekst net nedich wêze om it byld te rinnen. Foar lytsere skermen kin in reageare webstee yn 'e layout beweartelje dat de tekst tawiisd ûnder it byld makket en dat it byld de folsleine breedte fan it skerm útsette. Dit kin maklik mei media-queries dwaan as jo stilen apart binne fan jo HTML-markearring. Yn hjoeddeiske multi-apparaatwrâld wêr't bylden en tekst ferskillend ferskine foar ferskate besikers en op ferskate skermen, is dizze skieding essensjele foar it langduorjende súkses en behear fan in webside.