Home-theater-designers
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.
kako narediti mod za minecraft 1.12.2
Toda kaj počne vsaka od teh vrednosti in kako delujejo? Pa ugotovimo.
MAKEUSEOF VIDEO DNEVA
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">
<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>
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">
<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 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">
<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>
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.
Skrij elemente spletnega mesta s prikazom CSS: brez
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">
<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 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">
<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>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 element HTML
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">
<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>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">
<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>
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.
kako nekomu poslati dm na youtube
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.