Vlastnost CSS display je mocný nástroj pro webové designéry. Umožňuje vám ovládat rozvržení prvků webových stránek s minimálním stylem, s jednoduchými hodnotami, které jsou snadno zapamatovatelné.
Ale co každá z těchto hodnot dělá a jak fungují? Pojďme to zjistit.
Co je vlastnost zobrazení CSS?
Vlastnost display určuje typ vykreslení rámečku použitého pro prvky HTML na webové stránce. To má za následek různé chování, včetně toho, že se vůbec neobjeví. Tyto hodnoty můžete upravit na svém webu prostřednictvím šablony stylů nebo příslušných sekcí přizpůsobení CSS v CMS nástroje jako WordPress.
Udržujte prvky v souladu se zobrazením CSS: inline
Hodnoty šířky a výšky se nevztahují na prvek s vloženým zobrazením; obsah uvnitř nastavuje své rozměry. Vložené prvky HTML mohou sedět vedle sebe s jinými prvky a chovat se jako a. Display inline se nejčastěji používá pro text.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<styl>
.v souladu {
zobrazení: inline;
velikost písma: 3rem;
}
#inline-1 {
barva pozadí: žlutá;
odsazení: 10px 0px 10px 10px;
}
#inline-2 {
barva pozadí: světle zelená;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<tělo>
<h1>CSS Display Inline</h1>
<třída div="v souladu" id="inline-1">Toto je text</div>
<třída div="v souladu" id="inline-2">s inline hodnotou vlastnosti.</div>
</body>
</html>
Toto označení HTML a CSS výše slouží jako dobrý příklad zobrazené vložené hodnoty. Při společném použití se zobrazí jeden řádek textu vytvořený se dvěma různými prvky HTML.
Ovládání rozvržení webových stránek pomocí zobrazení CSS: blok
V některých ohledech je hodnota bloku zobrazení opakem vložené hodnoty. Rozměry výšky a šířky lze nastavit a prvky s touto hodnotou nemohou sedět vedle sebe. Výše uvedený příklad ukazuje dva prvky s hodnotou bloku. Prvky s hodnotou bloku se standardně zobrazují na maximální šířku jejich nadřazeného prvku.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<styl>
.blok {
displej: blok;
velikost písma: 3rem;
šířka: fit-content;
}
#block-1 {
barva pozadí: žlutá;
odsazení: 10px 10px 10px 10px;
}
#blok-2 {
barva pozadí: světle zelená;
odsazení: 10px 10px 10px 10px;
}
</style>
</head>
<tělo>
<h1>CSS Display Block</h1>
<třída div="blok" id="blok-1">Toto je text</div>
<třída div="blok" id="blok-2">s hodnotou vlastnosti bloku.</div>
</body>
</html>Na rozdíl od příkladu stylu inline tento příklad hodnoty bloku zobrazení rozděluje řádky textu na dva různé řádky. Hodnota fit-content width nastavuje šířku prvků tak, aby odpovídala délce textu.
Prvky HTML vedle sebe se zobrazením CSS: inline-block
Hodnota inline-block zobrazení CSS funguje stejně jako běžná vložená hodnota, pouze s možností přidat konkrétní dimenze. To umožňuje vytvářet rozvržení podobná mřížce, aniž byste museli mít rodičovské prvky. Vraťme se k předchozímu příkladu a přidání hodnoty inline-block umožňuje prvkům sedět vedle sebe.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<styl>
.inline-blok {
displej: inline-block;
velikost písma: 3rem;
šířka: fit-content;
}
#inline-block-1 {
barva pozadí: žlutá;
odsazení: 10px 10px 10px 10px;
}
#inline-block-2 {
barva pozadí: světle zelená;
odsazení: 10px 10px 10px 10px;
}
</style>
</head>
<tělo>
<h1>CSS Display Inline-Block (nastavená šířka)</h1>
<třída div="inline-blok" id="inline-blok-1">Toto je text</div>
<třída div="inline-blok" id="inline-blok-2">s vlastností inline-block
hodnota.</div>
</body>
</html>
Hodnota vloženého bloku se od vložené hodnoty příliš neliší. Je důležité poznamenat, že pomocí této hodnoty můžete nastavit rozměry prvků, což v určitých případech usnadňuje práci.
Nejjednodušší zobrazovaná hodnota je „žádná“. Tato hodnota skryje prvek a všechny podřízené prvky spolu s okraji a dalšími vlastnostmi mezer. Prvky s hodnotou CSS display none jsou stále viditelné v inspektorech prohlížeče.
Vytvářejte flexibilní a citlivé prvky pomocí zobrazení CSS: flex
Display flex je jedním z nejnovějších režimů rozvržení CSS. Když je flex zobrazení na nadřazeném prvku, všechny prvky v něm se stanou flexibilními prvky CSS. Nadřazeným prvkem v této konfiguraci je flexbox.
Flexboxy vytvářejí citlivé návrhy s předdefinovanými proměnnými, jako je šířka a výška. Stojí za to učení o HTML/CSS flexboxech než začnete.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<styl>
.flex {
displej: flex;
velikost písma: 3rem;
}
#flex-1 {
barva pozadí: žlutá;
šířka: 40 %;
výška: 100px;
}
#flex-2 {
barva pozadí: světle zelená;
šířka: 25 %;
výška: 100px;
}
#flex-3 {
barva pozadí: světle modrá;
šířka: 35 %;
výška: 100px;
}
</style>
</head>
<tělo>
<h1>CSS Display Flex</h1>
<třída div="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Umístění Flexboxů vedle sebe S displejem: inline-flex
Inline-flex se chová stejně jako běžný flexbox, s další výhodou prvku, který může sedět vedle jiných prvků.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<styl>
.inline-flex {
displej: inline-flex;
velikost písma: 3rem;
šířka: 49.8%;
}
#inline-flex-1 {
barva pozadí: žlutá;
šířka: 40 %;
výška: 100px;
}
#inline-flex-2 {
barva pozadí: světle zelená;
šířka: 25 %;
výška: 100px;
}
#inline-flex-3 {
barva pozadí: světle modrá;
šířka: 35 %;
výška: 100px;
}
</style>
</head>
<tělo>
<h1>CSS Display Inline-Flex</h1>
<třída div="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<třída div="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Vytvářejte složité tabulky s CSS zobrazením: tabulka
Hodnota zobrazované tabulky připomíná starší časy designu webových stránek. Zatímco většina webových stránek dnes nepoužívá tabulky pro svá rozvržení, stále jsou platné pro zobrazování dat a obsahu v čitelném formátu.
Přidání hodnoty tabulky do prvku HTML způsobí, že se bude chovat jako prvek tabulky, ale ke správnému fungování tabulky potřebujete další hodnoty.
CSS zobrazení: tabulka-buňka
Prvky s hodnotou buňky tabulky fungují jako samostatné buňky v hlavní tabulce. Hodnoty sloupců tabulky a řádku tabulky seskupují tyto jednotlivé buňky dohromady.
CSS zobrazení: tabulka-řádek
Hodnota řádku tabulky funguje stejně jako a
CSS zobrazení: tabulka-sloupec
Hodnota sloupce tabulky funguje podobně jako hodnota řádku tabulky, pouze tabulku nerozděluje. Místo toho můžete tuto hodnotu použít k přidání konkrétních pravidel CSS do různých sloupců, které již existují.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<styl>
.stůl {
displej: tabulka;
velikost písma: 3rem;
}
.záhlaví {
zobrazení: table-header-group;
velikost písma: 3rem;
}
#column-1 {
zobrazení: tabulka-sloupec-skupina;
barva pozadí: žlutá;
}
#column-2 {
zobrazení: tabulka-sloupec-skupina;
barva pozadí: světle zelená;
}
#column-3 {
zobrazení: tabulka-sloupec-skupina;
barva pozadí: světle modrá;
}
#row-1 {
zobrazení: tabulka-řádkový;
}
#row-2 {
zobrazení: tabulka-řádkový;
}
#row-3 {
zobrazení: tabulka-řádkový;
}
#buňka {
displej: tabulka-buňka;
odsazení: 10px;
šířka: 20 %;
}
</style>
</head>
<tělo>
<h1>Tabulka zobrazení CSS</h1>
<třída div="stůl">
<div id="sloupec-1"></div>
<div id="sloupec-2"></div>
<div id="sloupec-3"></div>
<třída div="záhlaví">
<div id="buňka">název</div>
<div id="buňka">Stáří</div>
<div id="buňka">Země</div>
</div>
<div id="řádek-1">
<div id="buňka">Jeffe</div>
<div id="buňka">21</div>
<div id="buňka">USA</div>
</div>
<div id="řádek-2">
<div id="buňka">Žalovat</div>
<div id="buňka">34</div>
<div id="buňka">Španělsko</div>
</div>
<div id="řádek-3">
<div id="buňka">Boris</div>
<div id="buňka">57</div>
<div id="buňka">Singapur</div>
</div>
</div>
</body>
</html>Vytvářejte vedle sebe tabulky se zobrazením CSS: vložená tabulka
Stejně jako ostatní inline varianty, na které jsme se již podívali, inline-table umožňuje umístit prvky tabulky vedle jiných prvků.
Vytvářejte responzivní rozvržení webových stránek pomocí zobrazení CSS: mřížka
Hodnota mřížky zobrazení CSS je podobná hodnotě tabulky, pouze sloupce a řádky mřížky mohou mít flexibilní velikost. Díky tomu jsou mřížky ideální pro vytváření hlavního rozvržení webových stránek. Nechávají prostor pro záhlaví a zápatí v plné šířce a zároveň umožňují mít oblasti obsahu různých velikostí.
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<styl>
.mřížka {
displej: mřížka;
velikost písma: 3rem;
oblasti šablony mřížky:
'hlavička hlavička hlavička hlavička'
'obsah levého postranního panelu obsah pravého postranního panelu'
'zápatí zápatí zápatí zápatí';
mezera: 10px;
}
#grid-1 {
grid-area: header;
barva pozadí: žlutá;
výška: 100px;
výplň: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
barva pozadí: světle zelená;
výška: 200px;
výplň: 20px;
text-align: center;
}
#grid-3 {
grid-area: obsah;
barva pozadí: světle modrá;
výška: 200px;
výplň: 20px;
text-align: center;
}
#grid-4 {
oblast mřížky: pravý boční panel;
barva pozadí: světle zelená;
výška: 200px;
výplň: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
barva pozadí: žlutá;
výška: 100px;
výplň: 20px;
text-align: center;
}
</style>
</head>
<tělo>
<h1>CSS Display Grid</h1>
<třída div="mřížka">
<div id="mřížka-1">Záhlaví</div>
<div id="mřížka-2">Levý postranní panel</div>
<div id="mřížka-3">Obsah</div>
<div id="mřížka-4">Pravý postranní panel</div>
<div id="mřížka-5">Zápatí</div>
</div>
</body>
</html>
Mřížky jsou podobné flexboxům, pouze mohou umístit prvky pod sebe a vedle sebe. Vlastnost grid-template-areas je pro to zásadní. Jak můžete vidět z kódu, naše záhlaví a zápatí zabírají čtyři místa v poli, protože mají plnou šířku. Postranní panely zabírají každý jeden slot, zatímco obsah zabírá dva, což efektivně rozděluje prostřední řádek mřížky na tři sloupce.
CSS zobrazení: inline-grid
Použití hodnoty inline-grid umožní, aby vaše mřížka seděla vedle jiných prvků, stejně jako ostatní vložené hodnoty v této příručce.
Použití CSS Display pro webový design
Vlastnost zobrazení CSS nabízí praktický způsob, jak upravit struktury prvků webu, aniž byste museli měnit označení HTML. To je ideální pro ty, kteří používají platformy pro doručování obsahu, jako je Shopify nebo WordPress, ale může být také užitečné pro obecný webový design.