Dio elementa na razini bloka u HTML dokumentu (npr., Web-stranica) pojavljuje se u slijednom redoslijedu. Da biste promijenili red kako bi stranica izgledala privlačnije ili poboljšala njezinu korisnost, trebate obložiti blokove, uključujući slike, tako da tekst te stranice teče oko nje.
U web uvjetima, ovaj efekt poznat je kao "plutajući" slika. Ovaj stil postiže se CSS svojstvom za "float". Ova svojstva omogućuju da tekst prođe oko lijeve linije do desne strane. Ili oko slike desno usmjerene na lijevu stranu.
Počnite s HTML-om
Prva stvar koju trebate učiniti je imati neki HTML koji će raditi. Za naš primjer napisat ćemo tekst odlomka i dodati sliku na početku stavka (prije teksta, ali nakon otvaranja
označiti). Evo što izgleda HTML oznaka:
Tekst odlomka ide ovdje. U ovom primjeru imamo sliku glavne fotografije, pa bi se ovaj tekst vjerojatno odnosio na osobu za koju je glavni snimak.
Prema zadanim postavkama, naša će se web-stranica prikazivati uz sliku iznad teksta, jer su slike elemente na razini bloka u HTML-u. To znači da preglednik prikazuje prekidne linije prije i poslije elementa slike prema zadanim postavkama. Ovakav zadani izgled promijenit ćemo pretvaranjem u CSS. Prvo ćemo, međutim, dodati vrijednost klase našem elementu slike. Ta klasa će djelovati kao "kuka" koju ćemo kasnije koristiti u našem CSS-u.
Tekst odlomka ide ovdje. U ovom primjeru imamo sliku glavne fotografije, pa bi se ovaj tekst vjerojatno odnosio na osobu za koju je glavni snimak.
Imajte na umu da ova klasa "lijevo" ništa ne podnosi samostalno. Da bismo postigli željeni stil, moramo upotrijebiti sljedeći CSS.
CSS stilovi
S našim HTML mjestom (uključujući naš atribut klase "lijevo") sada se možemo obratiti CSS-u. Dodali bi pravilo na naš stilski stil koji će plutajuću tu sliku i također dodati malo podloge pokraj njega, tako da tekst koji će se konačno zaokrenuti oko slike ne briše se previše tijesno. Ovdje je CSS koji možete napisati:
.left { plutaju: lijevo; padding: 0 20px 20px 0;}
Ovaj stil lebdi tu sliku lijevo i dodaje malo padding (pomoću nekog CSS stenograma) na desno i dno slike. Ako ste pregledali stranicu koja sadrži ovaj HTML u pregledniku, slika će sada biti poravnata s lijeve strane, a tekst odlomka će se pojaviti na desnoj strani s odgovarajućom količinom razmaka između njih. Napominjemo da je klasa vrijednost "lijevo" koju smo koristili proizvoljna. Možda smo to nazvali jer izraz "lijevo" ne radi ništa sam. Koji termin koji upotrebljavate mora imati atribut klase u HTML-u koji funkcionira s stvarnim CSS stilom koji diktira vizualne promjene koje želite napraviti. Ovaj pristup davanja elementu slike elementu klase, a zatim upotrebom općeg CSS stila koji pluta element je samo jedan od načina na koji možete postići izgled ove "lijevo poravnate slike". Možete izuzeti i vrijednost klase iz slike i stilizirati je s CSS-om pisanjem specifičnijeg izbornika. Na primjer, pogledajmo primjer gdje je ta slika unutar dijeljenja s "glavnim sadržajem" klase vrijednosti. Da biste stilizirali ovu sliku, mogli biste napisati ovaj CSS: .main-content img { plutaju: lijevo; padding: 0 20px 20px 0;}
U ovom scenariju, naša će slika biti poravnata s lijeve strane, s tekstom koji lebdi oko nje kao i prije, ali nismo trebali dodati dodatnu vrijednost klase na našu oznaku. Na taj način možete napraviti manju HTML datoteku koja će vam biti jednostavnija za upravljanje i također može poboljšati performanse. Konačno, čak možete dodati stilove izravno u HTML oznaku, ovako:
Ta se metoda naziva "inline stilovi". Nije preporučljivo jer kombinira stil elementa sa strukturnim oznakama. Najbolje prakse na webu diktiraju da stil i struktura stranice moraju ostati odvojene. Ova segregacija je osobito korisna kada vaša stranica treba promijeniti izgled i tražiti različite veličine zaslona i uređaje s responzivnim web stranicama. Nakon što se stil stranice isprepliće u HTML-u, mnogo će teže autorizirati medijske upite koji će prilagoditi vašu web-lokaciju kao što je potrebno za te različite zaslone. Alternativni načini za postizanje tih stilova
Tekst odlomka ide ovdje. U ovom primjeru imamo sliku glavne fotografije, pa bi se ovaj tekst vjerojatno odnosio na osobu za koju je glavni snimak. Izbjegavajte inline stilove
Tekst odlomka ide ovdje. U ovom primjeru imamo sliku glavne fotografije, pa bi se ovaj tekst vjerojatno odnosio na osobu za koju je glavni snimak.
