Kaskadni stilski listovi (CSS) predstavljaju jezik za oblikovanje koji služi za opisivanje vizuelnog prikaza HTML i XML dokumenata. Uz pomoć CSS-a, programeri imaju kontrolu nad stilom, izgledom i rasporedom elemenata na web stranicama, omogućavajući im da ih prilagode svojim potrebama.
Na primer, moguće je promeniti fontove, boje, pozadinu, dodati efekte prelaska mišem, pa čak i postići da web stranice budu responzivne, prilagođavajući se različitim veličinama ekrana i uređajima. Osim toga, CSS pruža mogućnost brendovima i programerima da jednostavno kreiraju web stranice sa doslednim stilovima, usklađenim sa vizuelnim identitetom brenda.
Kada se inicijalno kreira HTML dokument, elementi će se prikazati onim redosledom kojim su navedeni u izvornom kodu. Ovaj način prikaza se naziva normalan tok.
U normalnom toku, kada se izgled HTML elemenata ne menja, možemo ih svrstati u dve osnovne kategorije, zavisno od načina na koji se prikazuju na stranici.
Te kategorije su linijski elementi i blok elementi. U nastavku ćemo detaljnije objasniti karakteristike svake od ovih grupa, radi boljeg razumevanja prikaza HTML elemenata.
Za praktičan prikaz, kreirajte novu fasciklu i unutar nje datoteke index.html i app.css. Imena datoteka mogu biti po vašem izboru, ali ekstenzije moraju biti .html i .css.
Otvorite HTML datoteku u uređivaču koda i umetnite sledeći kod:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Property</title>
<link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css">
</head>
<body>
</body>
</html>
Navedeni kod stvara osnovni HTML šablon, odnosno kostur za izradu web stranica. On takođe povezuje index.html sa app.css datotekom, omogućavajući promenu i kontrolu prikaza HTML elemenata putem CSS-a.
Sav HTML kod koji će biti predstavljen kasnije u ovom članku biće dodat unutar <body></body> oznaka. CSS datoteka će u početku biti prazna.
Blok Elementi
Blok elementi su oni elementi koji zauzimaju sav raspoloživi horizontalni prostor, kreirajući novi red pre i posle samog elementa. Takođe, oni zauzimaju vertikalnu visinu koja odgovara visini njihovog sadržaja, čime formiraju blokove.
Neki primeri blok elemenata uključuju: <div>, <p>, <ul>, <ol>, <li> i naslove kao što su <h1>, <h2>, <h3> itd.
Primer prikaza blok elemenata dat je u nastavku:
<body>
<h1>techblog.co.rs</h1>
<p>techblog.co.rs je online publikacija koja objavljuje kvalitetne članke o tehnologiji, biznisu i finteku, s ciljem da pomogne preduzećima i pojedincima da napreduju. Neke od obrađenih tema su:</p>
<p>Neke od tema koje pokriva techblog.co.rs uključuju:</p>
<ul>
<li>Programiranje</li>
<li>Sajber bezbednost</li>
<li>Digitalna forenzika</li>
<li>Produktivnost</li>
<li>Gejming</li>
</ul>
</body>
Kada otvorite HTML dokument u web pregledaču, rezultat će biti prikazan na sledeći način:
Može se primetiti da element <h1>, koji sadrži naslov, zauzima celokupan raspoloživ horizontalni prostor, a paragraf koji sledi je prebačen u naredni red. Ovo je osnovno ponašanje blok elemenata.
Linijski Elementi
Linijski elementi su elementi koji se postavljaju uz ostale elemente u istom redu i zauzimaju samo onoliko prostora koliko je potrebno za prikaz njihovog sadržaja. Linijski elementi ne počinju u novom redu i ne prebacuju ostale elemente u novi red.
Linijski elementi ne prekidaju tok sadržaja, već se uključuju u njega bez formiranja posebnih blokova. Primeri linijskih elemenata uključuju: <span>, <a>, <input> i <time>, između ostalih.
Pogledajte sledeći kod, koji je modifikacija prethodnog, sada sa ubačenim linijskim elementima:
<body>
<h1>techblog.co.rs</h1>
<p>techblog.co.rs <span>JA SAM SPAN ELEMENT</span> je online publikacija koja objavljuje kvalitetne članke o tehnologiji, biznisu i finteku, s ciljem da pomogne preduzećima i pojedincima da napreduju. Neke od <a href="https://wilku.top/which-css-display-style-is-best-for-you/techblog.co.rs.com">tema</a> koje se obrađuju su:</p>
<p>Neke od tema koje pokriva techblog.co.rs uključuju:</p>
<ul>
<li>Programiranje</li>
<li>Sajber bezbednost</li>
<li>Digitalna forenzika</li>
<li>Produktivnost</li>
<li>Gejming</li>
</ul>
</body>
Rezultat prikaza nove HTML stranice u pregledaču izgleda ovako:
Obratite pažnju na to kako se element <span> uklapa u isti red sa ostalim sadržajem, ne prekidajući njegov tok. Ovo je karakteristika linijskih elemenata.
Svojstvo Prikaza
Kao što smo videli, HTML elementi su po svojoj prirodi ili blok ili linijski elementi, što utiče na njihov prikaz i na njihov uticaj na normalan tok sadržaja u HTML dokumentu.
Kao web programer, ponekad je potrebno promeniti ovo osnovno ponašanje HTML elemenata. Na primer, da se element koji je blok element tretira kao linijski i obrnuto. Na primer, možete želeti da <h1>, koji je po prirodi blok element, postane linijski, ili da <span>, koji je po prirodi linijski element, postane blok element.
Da bismo promenili osnovno ponašanje blok i linijskih elemenata, koristimo svojstvo `display`. Ovo svojstvo je CSS svojstvo koje omogućava da se element tretira ili kao linijski ili kao blok element.
Koristeći `display`, možete promeniti element koji je po prirodi blok element u linijski i obrnuto.
Da biste ovo videli na delu, dodajte sledeći kod u CSS datoteku koju ste kreirali i osvežite HTML stranicu u web pregledaču:
h1 {
display: inline;
background-color: paleturquoise;
}
p {
display: inline;
background-color: palevioletred;
}
span {
display: block;
background-color: darkolivegreen;
}
ul {
background-color: yellow;
}
Gornji CSS kod menja elemente <h1> i <p>, koji su po prirodi blok elementi, u linijske. Takođe menja element <span>, koji je linijski element, u blok element. Dodate su i različite pozadinske boje kako bi se elementi lakše razlikovali. Konačni HTML dokument, nakon izmena u CSS datoteci, prikazan je na sledeći način:
Može se primetiti da element <h1>, koji je ranije zauzimao ceo blok, sada deli isti red sa elementom <p>, koji je takođe zauzimao ceo blok. Element <span> sa tamnozelenom pozadinskom bojom sada zauzima ceo blok, iako je njegovo standardno ponašanje da se uklapa u isti red sa ostalim elementima.
Važna razlika između linijskih i blok elemenata
Pored razlike u uticaju na normalan tok sadržaja stranice, postoji još jedna važna razlika između linijskih i blok elemenata.
Kod linijskih elemenata, ukoliko element ima svojstvo širine i/ili visine, ova svojstva će biti ignorisana. To znači da ne možete menjati širinu i visinu linijskog elementa.
Takođe, ako linijskom elementu dodate marginu, ona će se primeniti samo horizontalno. Vertikalna margina linijskog elementa se ignoriše.
Ukoliko dodate padding linijskom elementu, on se takođe primenjuje samo horizontalno. Vertikalni padding se prikazuje, ali ostali elementi ga ne poštuju, što znači da padding neće poremetiti raspored elemenata iznad ili ispod linijskog elementa.
Da biste videli ovo na delu, izbrišite ili komentarišite sav kod u CSS datoteci i dodajte sledeći:
span {
height: 500px;
width: 400px;
margin: 20px;
background-color: darkolivegreen;
}
a {
padding: 20px;
border: 1px solid black;
}
Rezultat prikaza HTML stranice je sledeći:
Vidimo da uprkos tome što element <span> ima postavljena svojstva visine i širine, te vrednosti se ne primenjuju. Dodatna margina oko <span> elementa se primenjuje samo horizontalno.
Kod elementa <a>, padding koji je dodat oko njega utiče samo na elemente u istom redu. Elementi iznad i ispod njega nisu izmenjeni.
Kod blok elemenata se poštuju svojstva širine i visine. Margine i padding dodati blok elementima se takođe poštuju i imaju efekat u svim pravcima.
Da biste ovo videli na delu, dodajte sledeći kod u postojeću CSS datoteku:
h1 {
height: 50px;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 35px;
background-color: aquamarine;
}
Rezultat prikaza HTML stranice je prikazan ispod:
Može se primetiti da su širina, visina, margina i padding, dodati elementu <h1>, koji je blok element, primenjeni u svim pravcima.
Na osnovu razlike u načinu primene širine, visine, margine i paddinga na linijske i blok elemente, dolazi treća moguća vrednost svojstva prikaza, a to je `inline-block`.
Inline-Block Elementi
Inline-block element se ponaša kao linijski element, što znači da se uklapa uz ostale elemente u istom redu, bez prebacivanja elemenata u sledeći red. Međutim, za razliku od linijskih elemenata, širina, visina, margina i padding inline-block elemenata se poštuju.
Dakle, inline-block opcija se koristi kada želite da se element ponaša kao linijski, ali da istovremeno omogućava dodavanje širine, visine, margine i paddinga, koji će se primeniti na element kao da je blok element. To jest, svojstva će se primenjivati u svim pravcima.
Da biste videli ovo na delu, izbrišite ili komentarišite sav kod u CSS datoteci i dodajte sledeći:
span {
display: inline-block;
background-color: darkolivegreen;
height: 50px;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
CSS kod iznad postavlja svojstvo prikaza elementa <span> na `inline-block`. Element <span> je po prirodi linijski element. Zatim se dodaju svojstva širine, visine, margine i paddinga elementu <span>. Rezultat je prikazan u nastavku:
Važno je napomenuti da su širina, visina, margina i padding, dodati elementu <span>, primenjeni, a element <span> je i dalje prikazan kao linijski element.
Ovo je ponašanje inline-block elemenata. Ranije smo pokušali da dodamo ista svojstva elementu <span>, ali ona nisu bila primenjena jer je <span> tada bio linijski element.
Linijski vs. Inline-Block
Razlike između linijskih i inline-block elemenata su prikazane u tabeli ispod:
| Karakteristika | Linijski | Inline-Block |
| Ponašanje prikaza | Zavisi od visine linije | Poštuje horizontalne margine i padding |
| Širina i Visina | Ignoriše svojstva širine i visine | Poštuje svojstva širine i visine |
| Margine i Padding | Ignoriše horizontalne margine i padding | Teče unutar sadržaja, ne počinje u novom redu |
| Visina Linije | Visina linije zavisi od svojstva visine linije | Visina linije zavisi od svojstva visine linije |
| Horizontalni raspored | Ignoriše svojstva poravnanja teksta i stilizovanja teksta | Prilagođava se svojstvima poravnanja i stilizovanja teksta |
Kao što se može videti, linijski i inline-block elementi se razlikuju po načinu na koji se ponašaju određena CSS svojstva kada se primene na njih.
Kada Koristiti Linijski i Inline-Block
Kao programer, opciju `inline` koristite kada želite da sadržaj HTML-a teče unutar istog reda, bez izazivanja preloma u redu. Na primer, kada radite sa elementima kao što su <a>, <strong> i <span>, koji se nalaze u tekstu, ima smisla koristiti inline opciju, jer je to njihovo osnovno ponašanje.
S druge strane, `inline-block` koristite kada želite da se element ponaša kao blok element, ali da istovremeno teče unutar sadržaja, bez izazivanja preloma reda i prebacivanja ostalog sadržaja u nove redove. To jest, koristite `inline-block` ako želite kontrolu nad širinom, visinom, marginom i paddingom elementa, ali da i dalje bude deo linijskog toka.
Zaključak
CSS nudi `inline`, `block` i `inline-block` opcije prikaza, koje se mogu koristiti za promenu ili kontrolu načina na koji se elementi prikazuju na web stranici. Svojstvo `display` se koristi za postavljanje elementa kao linijskog, blok ili inline-block elementa.
Za web programera, razumevanje razlike između linijskih, blok i inline-block elemenata je veoma važno. Koristite ovaj članak da biste se upoznali sa njima i počnite da koristite svojstvo prikaza u vašim projektima radi sticanja prakse.
Možete takođe istražiti neke CSS Grid generatore kako biste vizuelno pravili složene rasporede.