Home-theater-designers
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.
kako saznati kome pripada telefonski broj
Ali što svaka od ovih vrijednosti radi i kako funkcioniraju? Hajde da vidimo.
MAKEUSEOF VIDEO DANA
Š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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.
Sakrij elemente web stranice s CSS prikazom: nema
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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="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
najbolja kalendarska aplikacija za Windows 10
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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</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="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</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.