CSS brûke om in ôfbylding oan 'e lofter kant te meitsjen fan in webside Layout
Sjoch op hast alle webside hjoed en jo sille in kombinaasje fan tekst en ôfbyldings sjen dy't de grutste fan dy siden meitsje. It is tige maklik om tekst en byldsjes oan in side ta te foegjen. De tekst is kodearre mei standert HTML-tags as paragrafen, listen en headings, wylst de ôfbyldings opnommen binne mei it elemint .
De fermogen om dizze tekst en dy bylden te meitsjen wurkje goed, wat makket geweldige webûntwerpers apart! Jo wolle net gewoan dat jo tekst en bylden ien nei 't oare ferskine, wat is dizze standert -eleminten standert standert. Nee, jo wolle in soad kontrôle oer hoe't de tekst en bylden gearwurkje yn wat jo lêst jo optreden fan jo webside wêze.
Mei in ôfbylding dy't oan 'e lofter kant fan in side rjochte is, wylst de tekst fan dy side flak omhinne is in mienskiplike ûntwerpbehanneling foar gedachte ûntwerp en ek foar websiden. Yn websiden wurdt dizze effekt bekend makke as it flotearjen fan it byld . Dizze styl wurdt berikt mei it CSS-eigenskip foar "float". Dizze eigenskip lit tekst trochblaze om it linker-alignige byld te rjochtsjen. (Of om in rjochtside ôfbylding oan syn lofter side). Litte wy nei sjen hoe't jo dizze fisuele effekt berikke.
Begjin mei HTML
It earste ding dat jo nedich meitsje moatte is wat HTML oan wurkje. Foar ús foarbyld skriuwe wy in paragraaf fan tekst en addt in plaatsje oan it begjin fan 'e paragraaf (foardat de tekst, mar nei de iepening
tag). Hjir sjogge jo wat HTML-markearring sa:
Standert stiet ús webside mei it byld boppe de tekst. Dit is omdat de ôfbyldings blokje-nivo-eleminten yn HTML binne. Dit betsjut dat de blêder sjen lit brekken foar en nei it ôfbyldel elemint standert. Wy sille dizze standertkaai feroarje troch te wikseljen nei CSS. Alderearst sille wy in klaswearde taheakje oan ús byld elemint . Dy klasse sil as in "hook" hannelje dat wy letter yn ús CSS brûke.
Tink derom dat dizze klasse fan "lofts" hielendal neat fan doel hat! Foar ús om ús winske styl te realisearjen, moatte wy CSS folgje.
CSS-stilen
Mei ús HTML yn plak, ynklusyf ús klasse attribút fan "left", kinne wy no nei CSS kieze. Wy hawwe in regel taheakke oan ús stylblêd dat soarget dat ôfbylding en ek in lytse padding taheakke kin, sadat de tekst, dy't úteinlik om it byld te wapjen, net te drukkerjen. Hjir is de CSS dy't jo skriuwe kinne:
.left {float: left; padding: 0 20px 20px; }Dizze styl ferpleatst datôfbylding nei it links en addt in lyts padding (mei help fan inkele CSS-stjoerder) nei rjochts en boaiem fan it byld.
As jo de side besjogge dy't dizze HTML yn in blêder befettet, soe de ôfbylding no fluch oan 'e lofterkant wurde en de tekst fan' e paragraaf soe op syn rjochter ferskine mei in passende tal ôfstân tusken de twa. Notysje fan 'e klasse wearde fan "lofts" dat wy brûkt hawwe is willekeurige. Wy kinne it alles neame, om't de term "lofts" neat op himsels docht. Dit moat in klasse attribute hawwe yn it HTML dat wurket mei in feant CSS-styl dat de fisuele feroarings docht dy't jo sykje om te meitsjen.
Alternative wizen om dizze stilen te realisearjen
Dizze oanpak fan it foto-elemint te jaan in klassenattribute en it brûken fan in algemien CSS-styl dy't it elemint is, is allinne ien manier dat jo dizze "loftspulde ôfbylding" sjen koenen. Jo kinne ek de klaswearde fan 'e ôfbylding nimme en styl mei CSS troch it skriuwen fan in spesifike seleksje. Bygelyks litte wy nei in foarbyld sjen wêr't it byld yn binnen in divyzje is mei in klasse wearde fan "main content".
Om dit ôfbylding te styl kinne jo dit CSS skriuwe:
.main-content img {float: left; padding: 0 20px 20px; }Yn dizze sceario soe ús ôfbylding oan 'e lofts ta rjochte wêze, mei de tekst dy't flak omhie, lykwols, mar wy moasten net in ekstra klasse wearde taheakje oan ús markearring. Dit dwaan by skaal kin helpe by it meitsjen fan in lytsere HTML-bestân, wat makliker makket en kinne ek helpe te ferbetterjen.
As lêste kinne jo de stilen direkt yn jo HTML-markearring taheakje, lykas dit:
Dizze metoade wurdt neamd " ynline styles ". It is net oan te rieden omdat it dúdlik de kombinaasje fan in elemint mei har struktureel markearring kombineert. Web best practices dictate dat de styl en de struktuer fan in side apart wurde bliuwe moatte. Dit is benammen nuttich as jo side har layout feroarje moat en sykje nei ferskate skermgrutte en apparaten mei in opfrege webside. Mei de styl fan 'e side dy't yn' e knop ferpleatst wurdt it makliker meitsje om autoriteit-query-artikels te meitsjen dy't jo side besjen as jo nedich binne foar de ferskate skermen.
Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 4/3/17.