Postavljanje stavki na web stranici je od suštinskog značaja za njegov ukupan dizajn. Iako postoje drugi načini utjecanja na izgled, kao što je korištenje tabela ( što ne preporučujemo ), najbolje je koristiti CSS .
U nastavku ćemo pogledati kako koristiti jednostavnu CSS stil svojstvene slike za poravnavanje slika, tabela, paragrafa i još mnogo toga.
Napomena: Ovi isti metodi se mogu koristiti i na spoljnim listovima stilova , ali pošto se one odnose na pojedinačne stavke i vjerovatno treba da ostanete na taj način, najbolje je koristiti styling u liniji kao što je navedeno u nastavku.
Poravnajte stavke teksta
Oznaka paragrafa je prvo mjesto za pokretanje vaše web stranice. Otvori za otvaranje i zatvaranje izgledaju ovako:
Podrazumevano poravnanje teksta u paragrafu je na levoj strani stranice, ali takođe možete poravnati stavke na desno i na sredini.
Upotreba funkcije float vam omogućava da poravnate stavke desno ili levo od roditeljskog elementa. Svi drugi elementi unutar tog roditeljskog elementa će teći oko plivajućeg elementa.
Da biste dobili najbolji efekat sa paragrafom, najbolje je postaviti širinu na paragrafu koji je manji od elementa kontejnera (roditelja).
Poravnajte tekst unutar stavova
Moguće je da je najzanimljivije prilagođavanje tekstu pasusa "opravdati", što govori pretraživaču da prikaže poravnati tekst, u suštini, i na desnoj i levoj strani prozora.
Da biste opravdali tekst u paragrafu, koristili biste tekstualno podešavanje svojstva.
Takođe možete da poravnate ceo tekst unutar stavka sa desne strane ili leve strane (podrazumevano), koristeći svojstvo za poravnavanje teksta.
Tekstualno prilagođavanje svojstva će poravnati tekst unutar elementa. Tehnički, ne bi trebalo da poravna slike koje se nalaze unutar pasusa ili drugog elementa, ali većina pretraživača tretira slike kao inline za ovu osobinu.
Poravnavanje slika
Korišćenjem svojstva float na oznaci slike možete odrediti postavljanje slika na stranici i kako će se tekst okrenuti oko njih.
Kao i gore navedeni paragraf, svojstvo plavog stila u oznaci slike će pozicionirati vašu sliku na stranici i objasniti pregledaču kako da protiče tekst i druge elemente oko te slike.
Tekst koji sledi gornjem slikovnom oznaku će se kretati oko slike na desno dok se slika prikazuje levo od ekrana.
Ako želim da se tekst zaustavi oko slike, koristim jasno svojstvo:
Poravnanje više od stavova
Međutim, šta ako želite da uskladite više od paragrafa ili slike? Možete jednostavno staviti svojstvo stila u svaki pasus, ali postoji oznaka koju možete koristiti što je efikasnije:
Jednostavno okružite tekst i slike (uključujući HTML oznake ) s oznakom i svojstvima stila (float ili poravnavanje teksta) i sve u toj podeli će biti usklađeno kako biste to voleli.
Imajte na umu da će poravnanja dodate paragrafima ili slikama u okviru odeljenja biti počašćena, prevladavajući oznaku.