Plokitaseme elemendid Veebilehel kuvatakse järjestuses. Lehe välimuse või kasulikkuse parandamiseks saate seda järjestust muuta, pakkides plokid, sealhulgas pildid, nii tekst voolab piltide ümber.
Veebikujunduses on see efekt tuntud kui pildi hõljumine. See saavutatakse CSS-i varaujuk, mis võimaldab tekstil liikuda vasakule joondatud pildi ümber paremale (või paremale joondatud pildi ümber vasakule).
Alustage HTML-ist
See näide lisab pildi lõigu algusesse (enne teksti, kuid pärast avamist
silt). Siin on esialgne HTML-i märgistus:
Lõigu tekst läheb siia. Selles näites on meil pilt peavõtte fotost, nii et see tekst võib kirjeldada päises olevat inimest.
Vaikimisi kuvatakse leht koos pildiga teksti kohal, kuna pildid on HTML-is plokitaseme elemendid. See tähendab, et brauser kuvab pildielemendi ees ja järel vaikimisi reavahet. Selle vaikevaate muutmiseks CSS-i abil lisage klassi väärtus (vasakule) pildielemendi külge, et olla konks, mille külge saab omadusi kinnitada.
Lõigu tekst läheb siia. Selles näites on meil pilt peavõtte fotost, nii et see tekst võib kirjeldada päises olevat inimest.
Pange tähele, et see klass ei tee ise midagi. CSS saavutab soovitud stiili.
CSS-stiilide lisamine
Lisage see reegel saidi omadesse stiilileht:
.left {
ujuk: vasak;
polster: 0 20px 20px 0;
}
See stiil hõljub klassiga kõike vasakule lehest vasakule ja lisab natuke polsterdus pildi paremale ja allservale, nii et tekst ei põrkaks selle vastu.
Brauseris oleks pilt nüüd joondatud vasakule; tekst tunduks paremal, nende kahe vahel oleks tühik.
Klassi väärtus . vasakule siin kasutatud on meelevaldne. Võite seda nimetada ükskõik milliseks, sest see ei tee midagi ise. Kuid te ei tohiks ka seda, et mis tahes CSS-is muudetud väärtus peaks kajastuma ka HTML-is.
Muud viisid nende stiilide saavutamiseks
Võite ka pildilt klassi väärtuse maha võtta ja CSS-iga stiilida, kirjutades täpsema valija. Allolevas näites on pilt jaotusega a põhisisu klassi väärtus.
Lõigu tekst läheb siia. Selles näites on meil pilt peavõtte fotost, nii et see tekst võib kirjeldada päises olevat inimest.
Selle pildi kujundamiseks kirjutage see CSS:
.main-content img {
ujuk: vasak;
polster: 0 20px 20px 0;
}
Selle stsenaariumi korral on pilt joondatud vasakule, tekst hõljub selle ümber nagu varem, kuid ilma lisaklassi väärtuseta märgistuses. Selle ulatuslik tegemine võib aidata luua väiksema HTML-faili, mida on lihtsam hallata ja mis võib parandada jõudlust.
Vältige siseseid stiile
Lõpuks võiksite kasutada sisesed stiilid:
Lõigu tekst läheb siia. Selles näites on meil pilt peavõtte fotost, nii et see tekst võib kirjeldada päises olevat inimest.
See pole siiski soovitatav, kuna see ühendab elemendi stiili oma struktuurilise märgistusega. Parimad tavad nõuavad, et lehe stiil ja struktuur jääksid lahus. See eraldamine on eriti kasulik, kui peate muutma lehe paigutust ja otsima reageeriva veebisaidiga erinevaid ekraanisuurusi ja seadmeid.
Lehe stiili põimimine HTML-iga muudab meediapäringute kirjutamine saidi kohandamine erinevate ekraanide jaoks on palju keerulisem.