Lastnost prikaza CSS je močno orodje za spletne oblikovalce. Omogoča vam nadzor postavitev elementov spletnega mesta z minimalnim slogom in preprostimi vrednostmi, ki si jih je enostavno zapomniti.
Toda kaj počne vsaka od teh vrednosti in kako delujejo? Pa ugotovimo.
Kaj je lastnost prikaza CSS?
Lastnost prikaza določa vrsto upodabljanja polja, ki se uporablja za elemente HTML na spletni strani. Posledica tega je različno vedenje, vključno s tem, da se sploh ne prikažejo. Te vrednosti lahko uredite na svojem spletnem mestu prek slogovnega lista ali ustreznih razdelkov za prilagajanje CSS v CMS orodja, kot je WordPress.
Ohranite elemente v skladu s prikazom CSS: v vrstici
Vrednosti širine in višine ne veljajo za element z vgrajenim prikazom; vsebina v notranjosti določa njegove razsežnosti. Vgrajeni elementi HTML lahko stojijo drug ob drugem in se obnašajo kot. Prikaz v vrstici se najpogosteje uporablja za besedilo.
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov>Prikazne vrednosti CSS
</title>
<stil>
.v vrsti {
prikaz: v vrstici;
velikost pisave: 3rem;
}
#inline-1 {
barva ozadja: rumena;
oblazinjenje: 10px 0px 10px 10px;
}
#inline-2 {
barva ozadja: svetlo zelena;
oblazinjenje: 10px 10px 10px 0px;
}
</style>
</head>
<telo>
<h1>Prikaz CSS v vrstici</h1>
<razred div="v vrsti" id="inline-1">To je besedilo</div>
<razred div="v vrsti" id="inline-2">z vgrajeno vrednostjo lastnosti.</div>
</body>
</html>
Ta oznaka HTML in zgornji CSS služita kot dober primer prikazane vrednosti v vrstici. Če se uporabljata skupaj, bo prikazana ena vrstica besedila, narejena z dvema različnima elementoma HTML.
Nadzirajte postavitve spletnih mest s prikazom CSS: blok
V nekaterih pogledih je vrednost bloka prikaza nasprotna vrednosti v vrstici. Mere višine in širine je mogoče nastaviti, elementi s to vrednostjo pa ne morejo sedeti drug poleg drugega. Zgornji primer prikazuje dva elementa z vrednostjo bloka. Elementi s privzeto vrednostjo prikaza bloka imajo največjo širino nadrejenega elementa.
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov>Prikazne vrednosti CSS</title>
<stil>
.blokiraj {
zaslon: blok;
velikost pisave: 3rem;
širina: fit-vsebina;
}
#block-1 {
barva ozadja: rumena;
oblazinjenje: 10px 10px 10px 10px;
}
#block-2 {
barva ozadja: svetlo zelena;
oblazinjenje: 10px 10px 10px 10px;
}
</style>
</head>
<telo>
<h1>Prikazni blok CSS</h1>
<razred div="blok" id="blok-1">To je besedilo</div>
<razred div="blok" id="blok-2">z vrednostjo lastnosti bloka.</div>
</body>
</html>Za razliko od primera sloga v vrstici ta primer vrednosti bloka prikaza razdeli vrstice besedila v dve različni vrstici. Vrednost širine prileganja vsebine nastavi širino elementov tako, da ustreza dolžini besedila.
Elementi HTML drug ob drugem s prikazom CSS: blok v vrstici
Vrednost vstavljenega bloka prikaza CSS deluje tako kot običajna vstavljena vrednost, le z možnostjo dodajanja določenih dimenzij. To omogoča ustvarjanje mrežnih postavitev brez nadrejenih elementov. Če se vrnemo k prejšnjemu primeru, dodajanje vrednosti inline-block omogoča, da elementi sedijo drug poleg drugega.
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov>Prikazne vrednosti CSS</title>
<stil>
.inline-block {
zaslon: inline-block;
velikost pisave: 3rem;
širina: fit-vsebina;
}
#inline-block-1 {
barva ozadja: rumena;
oblazinjenje: 10px 10px 10px 10px;
}
#inline-block-2 {
barva ozadja: svetlo zelena;
oblazinjenje: 10px 10px 10px 10px;
}
</style>
</head>
<telo>
<h1>CSS Display Inline-Block (nastavljena širina)</h1>
<razred div="inline-block" id="inline-block-1">To je besedilo</div>
<razred div="inline-block" id="inline-block-2">z lastnostjo inline-block
vrednost.</div>
</body>
</html>
Vrednost inline-block se ne zdi veliko drugačna od vrednosti inline. Pomembno je omeniti, da lahko nastavite dimenzije elementov s to vrednostjo, kar olajša delo v nekaterih primerih.
Najenostavnejša prikazana vrednost je »brez«. Ta vrednost skrije element in vse podrejene elemente, skupaj z robovi in drugimi lastnostmi razmika. Elementi z vrednostjo CSS display none so še vedno vidni v inšpektorjih brskalnika.
Ustvarite prilagodljive in odzivne elemente z zaslonom CSS: flex
Display flex je eden najnovejših načinov postavitve CSS. Ko je display flex na nadrejenem elementu, vsi elementi v njem postanejo prilagodljivi elementi CSS. Nadrejeni element v tej konfiguraciji je flexbox.
Flexboxi ustvarjajo odzivne dizajne z vnaprej določenimi spremenljivkami, kot sta širina in višina. Vredno je spoznavanje HTML/CSS flexboxov preden začnete.
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov>Prikazne vrednosti CSS</title>
<stil>
.flex {
zaslon: flex;
velikost pisave: 3rem;
}
#flex-1 {
barva ozadja: rumena;
širina: 40 %;
višina: 100 slikovnih pik;
}
#flex-2 {
barva ozadja: svetlo zelena;
širina: 25 %;
višina: 100 slikovnih pik;
}
#flex-3 {
barva ozadja: svetlo modra;
širina: 35 %;
višina: 100 slikovnih pik;
}
</style>
</head>
<telo>
<h1>CSS Display Flex</h1>
<razred div="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Postavite Flexboxe vzporedno z zaslonom: inline-flex
Inline-flex se obnaša tako kot navaden flexbox, z dodatno prednostjo, da lahko element sedi poleg drugih elementov.
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov>Prikazne vrednosti CSS</title>
<stil>
.inline-flex {
zaslon: inline-flex;
velikost pisave: 3rem;
premer: 49.8%;
}
#inline-flex-1 {
barva ozadja: rumena;
širina: 40 %;
višina: 100 slikovnih pik;
}
#inline-flex-2 {
barva ozadja: svetlo zelena;
širina: 25 %;
višina: 100 slikovnih pik;
}
#inline-flex-3 {
barva ozadja: svetlo modra;
širina: 35 %;
višina: 100 slikovnih pik;
}
</style>
</head>
<telo>
<h1>Prikaz CSS Inline-Flex</h1>
<razred div="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<razred div="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Ustvarite kompleksne tabele s prikazom CSS: tabela
Prikaz vrednosti tabele spominja na starejše čase oblikovanja spletnih strani. Medtem ko večina spletnih mest danes ne uporablja tabel za svoje postavitve, so še vedno veljavne za prikaz podatkov in vsebine v berljivi obliki.
Če elementu HTML dodate vrednost tabele, bo deloval kot element tabele, vendar potrebujete dodatne vrednosti, da bo vaša tabela pravilno delovala.
Prikaz CSS: celica tabele
Elementi z vrednostjo celice tabele delujejo kot posamezne celice v glavni tabeli. In vrednosti tabele-stolpca in tabele-vrstice združujejo te posamezne celice skupaj.
Prikaz CSS: tabela-vrstica
Vrednost vrstice tabele deluje tako kot a
Prikaz CSS: tabela-stolpec
Vrednost stolpca tabele deluje podobno kot vrednost vrstice tabele, le da ne razdeli vaše tabele. Namesto tega lahko uporabite to vrednost za dodajanje določenih pravil CSS v različne stolpce, ki že obstajajo.
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov>Prikazne vrednosti CSS</title>
<stil>
.miza {
zaslon: tabela;
velikost pisave: 3rem;
}
.glava {
prikaz: tabela-glava-skupina;
velikost pisave: 3rem;
}
#column-1 {
prikaz: tabela-stolpec-skupina;
barva ozadja: rumena;
}
#column-2 {
prikaz: tabela-stolpec-skupina;
barva ozadja: svetlo zelena;
}
#column-3 {
prikaz: tabela-stolpec-skupina;
barva ozadja: svetlo modra;
}
#row-1 {
prikaz: tabela-vrstica;
}
#row-2 {
prikaz: tabela-vrstica;
}
#row-3 {
prikaz: tabela-vrstica;
}
#celica {
prikaz: tabela-celica;
oblazinjenje: 10px;
širina: 20 %;
}
</style>
</head>
<telo>
<h1>Prikaz tabele CSS</h1>
<razred div="tabela">
<div id="stolpec-1"></div>
<div id="stolpec-2"></div>
<div id="stolpec-3"></div>
<razred div="glava">
<div id="celica">Ime</div>
<div id="celica">Starost</div>
<div id="celica">Država</div>
</div>
<div id="vrstica-1">
<div id="celica">Jeff</div>
<div id="celica">21</div>
<div id="celica">ZDA</div>
</div>
<div id="vrstica-2">
<div id="celica">Sue</div>
<div id="celica">34</div>
<div id="celica">Španija</div>
</div>
<div id="vrstica-3">
<div id="celica">Boris</div>
<div id="celica">57</div>
<div id="celica">Singapur</div>
</div>
</div>
</body>
</html>Ustvarite vzporedne tabele s prikazom CSS: inline-table
Tako kot druge inline različice, ki smo si jih že ogledali, inline-table omogoča postavitev elementov tabele poleg drugih elementov.
Ustvarite odzivne postavitve spletnega mesta s prikazom CSS: mreža
Mrežna vrednost prikaza CSS je podobna vrednosti tabele, le stolpci in vrstice mreže imajo lahko prilagodljivo velikost. Zaradi tega so mreže idealne za ustvarjanje glavne postavitve spletnih strani. Puščajo prostor za glave in noge polne širine, hkrati pa omogočajo vsebinska področja različnih velikosti.
<!DOCTYPE html>
<html lang="en">
<glavo>
<meta charset="utf-8">
<naslov>Prikazne vrednosti CSS</title>
<stil>
.mreža {
prikaz: mreža;
velikost pisave: 3rem;
območja-mrežne predloge:
'glava glava glava glava'
'leva stranska vrstica vsebina desna stranska vrstica'
'noga noga noga noga';
vrzel: 10px;
}
#grid-1 {
mrežno območje: glava;
barva ozadja: rumena;
višina: 100 slikovnih pik;
oblazinjenje: 20px;
poravnava besedila: sredina;
}
#grid-2 {
mrežno območje: leva stranska vrstica;
barva ozadja: svetlo zelena;
višina: 200px;
oblazinjenje: 20px;
poravnava besedila: sredina;
}
#grid-3 {
mrežno območje: vsebina;
barva ozadja: svetlo modra;
višina: 200px;
oblazinjenje: 20px;
poravnava besedila: sredina;
}
#grid-4 {
mrežno območje: desna stranska vrstica;
barva ozadja: svetlo zelena;
višina: 200px;
oblazinjenje: 20px;
poravnava besedila: sredina;
}
#grid-5 {
mrežno območje: noga;
barva ozadja: rumena;
višina: 100 slikovnih pik;
oblazinjenje: 20px;
poravnava besedila: sredina;
}
</style>
</head>
<telo>
<h1>Prikazna mreža CSS</h1>
<razred div="mreža">
<div id="mreža-1">Glava</div>
<div id="mreža-2">Leva stranska vrstica</div>
<div id="mreža-3">Vsebina</div>
<div id="mreža-4">Desna stranska vrstica</div>
<div id="mreža-5">Noga</div>
</div>
</body>
</html>
Mreže so podobne flexboxom, le da lahko postavljajo elemente pod in enega poleg drugega. Lastnost grid-template-areas je ključnega pomena za to. Kot lahko vidite iz kode, naša glava in noga zavzameta štiri prostore v matriki, saj sta polne širine. Stranske vrstice zavzamejo vsaka eno režo, medtem ko vsebina zavzame dve, tako da se srednja vrstica mreže dejansko razdeli na tri stolpce.
Prikaz CSS: inline-grid
Uporaba vrednosti vstavljene mreže bo vaši mreži omogočila, da sedi poleg drugih elementov, tako kot druge vstavljene vrednosti v tem priročniku.
Uporaba zaslona CSS za spletno oblikovanje
Lastnost prikaza CSS ponuja priročen način za prilagajanje struktur elementov spletnega mesta, ne da bi morali spremeniti oznako HTML. To je idealno za tiste, ki uporabljajo platforme za dostavo vsebin, kot sta Shopify ali WordPress, lahko pa je tudi priročno za splošno spletno oblikovanje.
