Postavljanje stavki na web stranicu neophodno je za njegov cjelokupni dizajn. Iako postoje i drugi načini za utjecaj na raspored, kao što je korištenje tablica ( koje ne preporučujemo ), najbolje je koristiti CSS .
U nastavku ćemo pogledati kako upotrebljavati jednostavni entitet CSS stila u liniji kako biste poravnali slike, tablice, odlomke i još mnogo toga.
Napomena: te iste metode mogu se koristiti i na vanjskim stilskim listovima, ali budući da se one odnose na pojedinačne stavke i vjerojatno će trebati ostati na taj način, najbolje je upotrebljavati on-line stil kao što je navedeno u nastavku.
Poravnajte tekstne stavke
Oznaka odlomka prvo je mjesto za početak postavljanja vaše web stranice. Otvaranje i zatvaranje oznaka izgleda ovako:
Zadana poravnavanje teksta u odlomku nalazi se na lijevoj strani stranice, ali možete poravnati svoje odlomke desno i središte.
Upotreba značajke Float omogućuje vam poravnavanje odlomaka desno ili lijevo od roditeljskog elementa. Bilo koji drugi elementi unutar tog elementa roditelja teče oko plutajućeg elementa.
Da biste dobili najbolji učinak stavkom, najbolje je postaviti širinu na stavku koji je manji od elementa spremnika (roditelja).
Poravnajte stavke unutar teksta
Najvjerojatnije je najzanimljivije poravnanje teksta odlomka "opravdanje", što govori pregledniku da prikaže tekst koji je bitno usmjeren na desnu i lijevu stranu prozora.
Da biste opravdali tekst u stavku, upotrijebili biste tekstualni entitet.
Također možete poravnati sav tekst unutar stavke na desnu ili lijevu stranu (zadani) pomoću alata za podešavanje teksta.
Tekstno usklađivanje svojstava poravnava tekst unutar elementa. Tehnički, ne bi trebalo poravnati slike koje su sadržane u paragrafu ili nekom drugom elementu, ali većina preglednika tretira slike kao inline za ovaj entitet.
Poravnavanje slika
Pomoću značajke plutajuće slike na oznaci slike možete odrediti položaj slika na stranici i kako će se tekst zaglaviti oko njih.
Baš kao i gornji stavci, svojstvo plutajućeg stila u oznaci slike postavit će vašu sliku na stranicu i govori pregledniku kako protječe tekst i druge elemente oko te slike.
Tekst koji slijedi gore navedenu oznaku slika će teći oko slike prema desnoj strani dok se slika prikazuje na lijevoj strani zaslona.
Ako želim da tekst prestane zamotati sliku, koristim jasno svojstvo:
jasno: lijevo / /
Usklađivanje više od stavaka
Međutim, što ako želite poravnati više od teksta ili slike? Jednostavno biste stavili svojstvo stila u svaki odlomak, ali postoji oznaka koju možete upotrijebiti da je učinkovitija:
Jednostavno okružujte tekst i slike (uključujući HTML oznake ) oznakom i svojstvom stila (plutaju ili tekstualno poravnajte), a sve u toj odjeljku bit će poravnato kako biste ga htjeli.
Imajte na umu da će poravnanja dodana stavkama ili slikama unutar odjeljka biti poštovana, nadjačavajući oznaku.