Siit saate teada, kuidas panna tekst CSS-i abil ümber hõljutatud pildi.
Selleks, et tekst jääks ümber parempoolse pildi, nagu see on seda artiklit tutvustaval fotol, kasutage sellist CSS-i reeglit:
Ujuv: vasak reegel paneb pildi liikuma vasakule veerisele. Parema polsterduse reegel hoiab ära teksti põrkumise otse vastu pildi paremat külge. Kui sellele pildile lisada ääris, tuleks pildi ja äärise vahele polster. Äärisega pildiga töötamiseks vaadake jaotist 2.
Järgmisena lisage pildi keskele vasakule ja paremale veerised. Vasaku ja parema veerise õige väärtus millegi tsentreerimiseks on automaatne.
Paksu raamitaolise äärise loomiseks sooneääristuse stiili abil saab kasutada sellist reeglit:
Teised ääriste stiilid on ühetaolised, punktiirjooned, katkendlikud, topelt-, rihvel-, sise- ja algusäärised. Laiust saab väljendada pikslites, ems või protsentides.
Ääriseid saab valikuliselt rakendada pildi üla-, paremale-, ala- ja vasakule küljele. Nende teadmiste abil saate luua efekti nagu varju.
Kui kasutate 2 halli varjundiga ühtlast äärist paremal ja alumisel äärisel, saate varjuefekti.
img { float: vasak; ääris-parem-stiil: tahke; ääris-parem-laius: 8 pikslit; ääris-parem-värv: #CCCCCC; border-bottom-style: solid; ääris-ala laius: 8 pikslit; ääris-alumine-värv: #999999; veeris-parem: 1em; veeris-alumine: 1em; }
Näpunäide
Kui teil on pilte rohkem kui ühes lehe jaotises (div), kasutage nende individuaalseks stiiliks järglaste valijaid. Võimalikud valijad: #content img, #sidebar img, #feature img.
