CSS svojstvo prikaza moćan je alat za web dizajnere. Omogućuje vam kontrolu izgleda elemenata web stranice s minimalnim stilom, s jednostavnim vrijednostima koje je lako zapamtiti.
Ali što svaka od ovih vrijednosti radi i kako funkcioniraju? Hajde da vidimo.
Što je CSS svojstvo prikaza?
Svojstvo prikaza određuje vrstu prikaza okvira koji se koristi za HTML elemente na web stranici. To rezultira različitim ponašanjima, uključujući i nepojavljivanje uopće. Ove vrijednosti možete urediti na svojoj web stranici putem lista stilova ili odgovarajućih odjeljaka za prilagodbu CSS-a CMS alati poput WordPressa.
Držite elemente u liniji s CSS prikazom: inline
Vrijednosti širine i visine ne odnose se na element s umetnutim prikazom; sadržaj iznutra postavlja njegove dimenzije. Ugrađeni HTML elementi mogu sjediti jedan pored drugog s drugim elementima, ponašajući se kao. Display inline se najčešće koristi za tekst.
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula>Prikaz vrijednosti CSS-a
</title>
<stil>
.u redu {
prikaz: inline;
veličina fonta: 3rem;
}
#inline-1 {
boja pozadine: žuta;
padding: 10px 0px 10px 10px;
}
#inline-2 {
boja pozadine: svijetlozelena;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<tijelo>
<h1>Umetnuti CSS prikaz</h1>
<div klasa="u redu" id="inline-1">Ovo je tekst</div>
<div klasa="u redu" id="inline-2">s ugrađenom vrijednošću svojstva.</div>
</body>
</html>
Ovo HTML označavanje i CSS gore služe kao dobar primjer ugrađene vrijednosti prikaza. Kada se koristi zajedno, ovo će prikazati jedan redak teksta napravljen s dva različita HTML elementa.
Upravljajte izgledom web stranice s CSS prikazom: blok
Na neki način, vrijednost bloka prikaza je suprotna od ugrađene vrijednosti. Moguće je postaviti dimenzije visine i širine, a elementi s ovom vrijednošću ne mogu sjediti jedan pored drugog. Gornji primjer prikazuje dva elementa s blok vrijednošću. Elementi sa zadanom vrijednosti prikaza bloka imaju najveću širinu nadređenog elementa.
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula>Prikaz vrijednosti CSS-a</title>
<stil>
.blok {
prikaz: blok;
veličina fonta: 3rem;
širina: fit-sadržaj;
}
#block-1 {
boja pozadine: žuta;
padding: 10px 10px 10px 10px;
}
#block-2 {
boja pozadine: svijetlozelena;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<tijelo>
<h1>Blok prikaza CSS-a</h1>
<div klasa="blok" id="blok-1">Ovo je tekst</div>
<div klasa="blok" id="blok-2">s vrijednošću svojstva bloka.</div>
</body>
</html>Za razliku od primjera umetnutog stila, ovaj primjer vrijednosti bloka prikaza dijeli retke teksta u dva različita retka. Vrijednost fit-content width postavlja širinu elemenata tako da odgovara duljini teksta.
Usporedni HTML elementi s CSS prikazom: inline-block
Inline-block vrijednost prikaza CSS-a funkcionira kao i obična ugrađena vrijednost, samo uz mogućnost dodavanja specifičnih dimenzija. To omogućuje stvaranje rasporeda nalik mreži bez postavljanja nadređenih elemenata. Vraćajući se na prethodni primjer, dodavanje vrijednosti inline-block omogućuje elementima da sjednu jedan pored drugog.
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula>Prikaz vrijednosti CSS-a</title>
<stil>
.umetnuti blok {
prikaz: inline-block;
veličina fonta: 3rem;
širina: fit-sadržaj;
}
#inline-block-1 {
boja pozadine: žuta;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
boja pozadine: svijetlozelena;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<tijelo>
<h1>CSS Display Inline-Block (postavljena širina)</h1>
<div klasa="inline-blok" id="inline-block-1">Ovo je tekst</div>
<div klasa="inline-blok" id="inline-block-2">sa svojstvom inline-block
vrijednost.</div>
</body>
</html>
Inline-block vrijednost se ne razlikuje mnogo od inline vrijednosti. Važno je napomenuti da s ovom vrijednošću možete postaviti dimenzije elemenata, što olakšava rad u određenim slučajevima.
Najjednostavniji prikaz vrijednosti je "ništa". Ova vrijednost skriva element i sve podređene elemente, zajedno s marginama i drugim svojstvima razmaka. Elementi s vrijednošću CSS display none i dalje su vidljivi unutar preglednika preglednika.
Stvorite fleksibilne i osjetljive elemente pomoću CSS prikaza: flex
Display flex je jedan od najnovijih CSS načina izgleda. Kada se display flex nalazi na nadređenom elementu, svi elementi unutar njega postaju fleksibilni CSS elementi. Nadređeni element u ovoj konfiguraciji je flexbox.
Flexboxovi stvaraju responzivne dizajne s unaprijed definiranim varijablama, poput širine i visine. Vrijedi učenje o HTML/CSS flexboxovima prije nego počnete.
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula>Prikaz vrijednosti CSS-a</title>
<stil>
.savijati {
zaslon: savitljiv;
veličina fonta: 3rem;
}
#flex-1 {
boja pozadine: žuta;
širina: 40%;
visina: 100px;
}
#flex-2 {
boja pozadine: svijetlozelena;
širina: 25%;
visina: 100px;
}
#flex-3 {
boja pozadine: svijetloplava;
širina: 35%;
visina: 100px;
}
</style>
</head>
<tijelo>
<h1>CSS Display Flex</h1>
<div klasa="savijati">
<div id="savijati-1"></div>
<div id="savijati-2"></div>
<div id="savijati-3"></div>
</div>
</body>
</html>Postavite Flexboxove jednu pored druge sa zaslonom: inline-flex
Inline-flex ponaša se kao obični flexbox, s dodatnom pogodnošću što element može sjediti pokraj drugih elemenata.
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula>Prikaz vrijednosti CSS-a</title>
<stil>
.inline-flex {
zaslon: inline-flex;
veličina fonta: 3rem;
širina: 49.8%;
}
#inline-flex-1 {
boja pozadine: žuta;
širina: 40%;
visina: 100px;
}
#inline-flex-2 {
boja pozadine: svijetlozelena;
širina: 25%;
visina: 100px;
}
#inline-flex-3 {
boja pozadine: svijetloplava;
širina: 35%;
visina: 100px;
}
</style>
</head>
<tijelo>
<h1>CSS prikaz Inline-Flex</h1>
<div klasa="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div klasa="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Stvorite složene tablice s CSS prikazom: tablica
Prikaz vrijednosti tablice podsjeća na starije dane dizajna web stranica. Iako većina web stranica danas ne koristi tablice za svoje izglede, one su još uvijek važeće za prikazivanje podataka i sadržaja u čitljivom formatu.
Dodavanje vrijednosti tablice HTML elementu učinit će da se ponaša kao element tablice, ali potrebne su vam dodatne vrijednosti da bi vaša tablica ispravno radila.
CSS prikaz: tablica-ćelija
Elementi s vrijednošću ćelije tablice djeluju kao pojedinačne ćelije unutar glavne tablice. A vrijednosti stupca tablice i redaka tablice grupiraju ove pojedinačne ćelije zajedno.
CSS prikaz: tablica-red
Vrijednost reda tablice funkcionira kao a
CSS prikaz: tablica-stupac
Vrijednost stupca tablice funkcionira slično kao vrijednost retka tablice, samo što ne dijeli vašu tablicu. Umjesto toga, ovu vrijednost možete koristiti za dodavanje određenih CSS pravila u različite stupce koji već postoje.
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula>Prikaz vrijednosti CSS-a</title>
<stil>
.stol {
prikaz: stol;
veličina fonta: 3rem;
}
.Zaglavlje {
prikaz: tabela-zaglavlje-grupa;
veličina fonta: 3rem;
}
#column-1 {
prikaz: tablica-stupac-grupa;
boja pozadine: žuta;
}
#column-2 {
prikaz: tablica-stupac-grupa;
boja pozadine: svijetlozelena;
}
#column-3 {
prikaz: tablica-stupac-grupa;
boja pozadine: svijetloplava;
}
#row-1 {
prikaz: tablica-redak;
}
#row-2 {
prikaz: tablica-redak;
}
#row-3 {
prikaz: tablica-redak;
}
#cell {
prikaz: tablica-ćelija;
ispuna: 10px;
širina: 20%;
}
</style>
</head>
<tijelo>
<h1>Prikaz CSS tablice</h1>
<div klasa="stol">
<div id="stupac-1"></div>
<div id="stupac-2"></div>
<div id="stupac-3"></div>
<div klasa="Zaglavlje">
<div id="ćelija">Ime</div>
<div id="ćelija">Dob</div>
<div id="ćelija">Zemlja</div>
</div>
<div id="red-1">
<div id="ćelija">Jeff</div>
<div id="ćelija">21</div>
<div id="ćelija">SAD</div>
</div>
<div id="red-2">
<div id="ćelija">Tužiti</div>
<div id="ćelija">34</div>
<div id="ćelija">Španjolska</div>
</div>
<div id="red-3">
<div id="ćelija">Borise</div>
<div id="ćelija">57</div>
<div id="ćelija">Singapur</div>
</div>
</div>
</body>
</html>Napravite usporedne tablice s CSS prikazom: inline-table
Kao i druge inline varijante koje smo već pogledali, inline-table omogućuje postavljanje elemenata tablice pored drugih elemenata.
Izradite responzivne izglede web stranica s CSS prikazom: rešetka
Vrijednost CSS rešetke za prikaz slična je vrijednosti tablice, samo stupci i retci mreže mogu imati fleksibilnu veličinu. Zbog toga su mreže idealne za izradu glavnog izgleda za web stranice. Ostavljaju prostor za zaglavlja i podnožja pune širine, a istovremeno omogućuju područja sadržaja različitih veličina.
<!DOCTYPE html>
<html lang="hr">
<glavu>
<meta charset="utf-8">
<titula>Prikaz vrijednosti CSS-a</title>
<stil>
.mreža {
prikaz: rešetka;
veličina fonta: 3rem;
područja predloška mreže:
'zaglavlje zaglavlje zaglavlje zaglavlje'
'lijeva bočna traka content content desna bočna traka'
'podnožje podnožje podnožje podnožje';
razmak: 10px;
}
#grid-1 {
grid-area: zaglavlje;
boja pozadine: žuta;
visina: 100px;
ispuna: 20px;
poravnanje teksta: središte;
}
#grid-2 {
mrežno područje: lijeva bočna traka;
boja pozadine: svijetlozelena;
visina: 200px;
ispuna: 20px;
poravnanje teksta: središte;
}
#grid-3 {
grid-area: sadržaj;
boja pozadine: svijetloplava;
visina: 200px;
ispuna: 20px;
poravnanje teksta: središte;
}
#grid-4 {
mrežno područje: desna bočna traka;
boja pozadine: svijetlozelena;
visina: 200px;
ispuna: 20px;
poravnanje teksta: središte;
}
#grid-5 {
grid-area: podnožje;
boja pozadine: žuta;
visina: 100px;
ispuna: 20px;
poravnanje teksta: središte;
}
</style>
</head>
<tijelo>
<h1>CSS mreža za prikaz</h1>
<div klasa="rešetka">
<div id="rešetka-1">Zaglavlje</div>
<div id="rešetka-2">Lijeva bočna traka</div>
<div id="rešetka-3">Sadržaj</div>
<div id="rešetka-4">Desna bočna traka</div>
<div id="rešetka-5">Podnožje</div>
</div>
</body>
</html>
Gridovi su slični flexbox-ovima, samo što mogu postavljati elemente jedan ispod i pored drugog. Svojstvo grid-template-areas je vitalno za ovo. Kao što možete vidjeti iz koda, naše zaglavlje i podnožje zauzimaju četiri mjesta u nizu, jer su pune širine. Bočne trake zauzimaju po jedno mjesto, dok sadržaj zauzima dva, učinkovito dijeleći srednji red rešetke u tri stupca.
CSS prikaz: inline-grid
Korištenje vrijednosti umetnute rešetke omogućit će vašoj mreži da sjedi pored drugih elemenata, baš kao i druge umetnute vrijednosti u ovom vodiču.
Korištenje CSS prikaza za web dizajn
CSS svojstvo prikaza nudi praktičan način za prilagodbu strukture elemenata web stranice bez potrebe za mijenjanjem HTML oznaka. Ovo je idealno za one koji koriste platforme za isporuku sadržaja kao što su Shopify ili WordPress, ali također može biti zgodno za opći web dizajn.
