A HTML-dokumentum blokkszintű eleme (például egy weboldal) sorrendben jelenik meg. Ha módosítani szeretné a rendelést ahhoz, hogy az oldal vonzóbbá váljon, vagy javíthassa annak hasznosságát, akkor blokkokat kell lefednie, beleértve a képeket is, hogy az oldal szövege áramlódjon körülötte.
A webes kifejezésekben ezt a hatást "lebegő" képnek nevezzük. Ez a stílus a "float" CSS tulajdonsággal érhető el. Ez a tulajdonság lehetővé teszi, hogy a szöveg a bal oldali kép körül jobbra forduljon. Vagy egy jobb oldali kép körül a bal oldalán.
Indítsa el a HTML-t
Az első dolog, amire szükséged van, van egy HTML-kód, amellyel dolgozni kell. Példánk esetén szövegrészet írunk és a bekezdés elejére felveszünk egy képet (a szöveg előtt, de a megnyitást követően
címke). Íme, amit a HTML-jelölés néz ki:
A bekezdés szövege itt olvasható. Ebben a példában egy fejfotófotóból álló képet kapunk, így ez a szöveg valószínűleg arról szól, hogy az a személy, akinek a headshot van.
Alapértelmezés szerint weboldalunk megjelenik a szöveg fölött lévő képen, mert a képek blokk szintű elemek a HTML-ben. Ez azt jelenti, hogy a böngésző alapértelmezés szerint a képelem előtt és után jeleníti meg a sortöréseket. Ezt az alapértelmezett nézetet megváltoztatjuk a CSS-re való váltással. Először is, hozzáadunk egy osztály értéket a képelemhez. Ez az osztály "horogként" fog működni, amelyet később a CSS-ben fogunk használni.
A bekezdés szövege itt olvasható. Ebben a példában egy fejfotófotóból álló képet kapunk, így ez a szöveg valószínűleg arról szól, hogy az a személy, akinek a headshot van.
Ne feledje, hogy ez a "bal" osztály semmit sem csinál önmagában. Számunkra a kívánt stílus eléréséhez a következő CSS-t kell használnunk.
CSS stílusok
A HTML-ben a helyükön (beleértve a "left" osztály-attribútumunkat) most CSS-re fordulhatunk. Hozzáadnánk egy szabályt a stíluslapunkhoz, amely lebegne a képen, és hozzá egy kis párnát is mellette, így a szöveg, amely végső soron a kép köré tekinti, nem szorítja túl szorosan. Íme a CSS, amelyet írhat:
.balra { balra lebeg; párnázottság: 0 20px 20px 0;}
Ez a stílus lefedi azt a képet balra, és hozzáad egy kis párnázatot (néhány CSS rövidítést használ) a kép jobb és alsó részéhez. Ha áttekintette a HTML-t tartalmazó oldalt böngészőben, akkor a kép most balra lesz igazítva, és a bekezdés szövege a jobb oldalán megfelelő mennyiségű távolsággal jelenik meg. Felhívjuk a figyelmet arra, hogy a "bal" osztály értéke önkényes. Bármit is nevezhettünk volna, mert a "baloldal" kifejezés önmagában nem tesz semmit. Bármelyik kifejezést is használnia kell egy olyan osztálytulajdonságnak a HTML-ben, amely olyan tényleges CSS-stílusgal működik, amely megköveteli a látható változásokat. Ez a megközelítés, hogy a képelemet osztály attribútumnak adja, majd egy olyan általános CSS-stílust használ, amely lebeg az elemet, csak egy módja annak, hogy ezt a "balra igazított képet" megjelenítheti. Akkor is kiválaszthatja az osztály értékét a képen, és stílusosabbá teheti a CSS-sel, ha egy konkrétabb választót ír. Például nézzünk egy példát, ahol a kép egy "fő tartalom" osztály értékű megosztottságon belül található. Ennek a képnek a stílusához írhatod ezt a CSS-t: .main-content img { balra lebeg; párnázottság: 0 20px 20px 0;}
Ebben a forgatókönyvben a képünket a bal oldali vonalhoz igazítanánk, és a szöveg lebegtetett, mint korábban, de nem kellett extra értéket hozzáadni a jelöléshez. Ez a méretezés segíthet egy kisebb HTML-fájl létrehozásában, amely könnyebben kezelhető, és javíthatja a teljesítményt is. Végül a stílusokat közvetlenül a HTML-jelölésbe is hozzáadhatja:
Ezt a módszert "inline stílusoknak" hívják. Nem ajánlott, mert egy elem stílusát és szerkezeti jelölését ötvözi. A webes legjobb gyakorlatok szerint az oldal stílusa és szerkezete külön kell maradnia. Ez a szegregáció különösen akkor hasznos, ha az oldalnak módosítania kell az elrendezését, és meg kell keresnie a különböző képernyőméreteket és eszközöket a reagáló weboldalon. Ha az oldal stílusa összefonódik a HTML-ben, sokkal nehezebbé teszi a szerzői médiakérdéseket, amelyek szükség szerint módosítják webhelye megjelenését a különböző képernyőkön. Alternatív módszerek ezek elérésére
A bekezdés szövege itt olvasható. Ebben a példában egy fejfotófotóból álló képet kapunk, így ez a szöveg valószínűleg arról szól, hogy az a személy, akinek a headshot van. Kerülje az inline stílust
A bekezdés szövege itt olvasható. Ebben a példában egy fejfotófotóból álló képet kapunk, így ez a szöveg valószínűleg arról szól, hogy az a személy, akinek a headshot van.
