Vlastnosť CSS display je výkonný nástroj pre web dizajnérov. Umožňuje vám ovládať rozloženia prvkov webovej stránky s minimálnym štýlom, s jednoduchými hodnotami, ktoré si ľahko zapamätáte.
Čo však každá z týchto hodnôt robí a ako fungujú? Poďme zistiť.
Čo je vlastnosť zobrazenia CSS?
Vlastnosť display určuje typ vykresľovania rámčeka použitého pre prvky HTML na webovej stránke. To má za následok rôzne správanie, vrátane toho, že sa vôbec neobjaví. Tieto hodnoty môžete upraviť na svojej webovej lokalite prostredníctvom šablóny štýlov alebo príslušných sekcií prispôsobenia CSS v CMS nástroje ako WordPress.
Udržujte prvky v súlade so zobrazením CSS: vložené
Hodnoty šírky a výšky sa nevzťahujú na prvok s vloženým zobrazením; obsah vo vnútri určuje jeho rozmery. Vložené prvky HTML môžu sedieť vedľa seba s inými prvkami a správať sa ako a. Display inline sa najčastejšie používa pre text.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<štýl
>
.v rade {
zobrazenie: inline;
veľkosť písma: 3rem;
}
#inline-1 {
farba pozadia: žltá;
padding: 10px 0px 10px 10px;
}
#inline-2 {
farba pozadia: svetlozelená;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<telo>
<h1>CSS Display Inline</h1>
<trieda div="v rade" id="inline-1">Toto je text</div>
<trieda div="v rade" id="inline-2">s inline hodnotou vlastnosti.</div>
</body>
</html>
Toto označenie HTML a CSS uvedené vyššie slúžia ako dobrý príklad zobrazenej vnorenej hodnoty. Pri spoločnom použití sa zobrazí jeden riadok textu s dvoma rôznymi prvkami HTML.
Ovládanie rozloženia webových stránok pomocou zobrazenia CSS: blok
V niektorých ohľadoch je hodnota bloku zobrazenia opakom vloženej hodnoty. Rozmery výšky a šírky je možné nastaviť a prvky s touto hodnotou nemôžu sedieť vedľa seba. Vyššie uvedený príklad ukazuje dva prvky s hodnotou bloku. Prvky so zobrazenou hodnotou bloku majú predvolenú maximálnu šírku svojho nadradeného prvku.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<štýl>
.blok {
displej: blok;
veľkosť písma: 3rem;
šírka: fit-content;
}
#block-1 {
farba pozadia: žltá;
padding: 10px 10px 10px 10px;
}
#block-2 {
farba pozadia: svetlozelená;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<telo>
<h1>CSS Display Block</h1>
<trieda div="blokovať" id="blok-1">Toto je text</div>
<trieda div="blokovať" id="blok-2">s hodnotou vlastnosti bloku.</div>
</body>
</html>Na rozdiel od príkladu vloženého štýlu tento príklad hodnoty bloku zobrazenia rozdeľuje riadky textu na dva rôzne riadky. Hodnota fit-content width nastavuje šírku prvkov tak, aby zodpovedala dĺžke textu.
Prvky HTML vedľa seba so zobrazením CSS: inline-block
Hodnota inline-block zobrazenia CSS funguje rovnako ako bežná vložená hodnota, iba s možnosťou pridať konkrétne dimenzie. To umožňuje vytvárať rozloženia podobné mriežke bez toho, aby boli na mieste nadradené prvky. Ak sa vrátime k predchádzajúcemu príkladu, pridanie hodnoty inline-block umožňuje, aby prvky sedeli vedľa seba.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<štýl>
.inline-blok {
displej: inline-block;
veľkosť písma: 3rem;
šírka: fit-content;
}
#inline-block-1 {
farba pozadia: žltá;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
farba pozadia: svetlozelená;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<telo>
<h1>CSS Display Inline-Block (nastavená šírka)</h1>
<trieda div="inline-blok" id="inline-block-1">Toto je text</div>
<trieda div="inline-blok" id="inline-block-2">s vlastnosťou inline-block
hodnotu.</div>
</body>
</html>
Hodnota vloženého bloku sa nezdá byť príliš odlišná od vloženej hodnoty. Je dôležité poznamenať, že pomocou tejto hodnoty môžete nastaviť rozmery prvkov, čím sa v určitých prípadoch uľahčí práca.
Najjednoduchšia zobrazená hodnota je „žiadna“. Táto hodnota skryje prvok a všetky podradené prvky spolu s okrajmi a inými vlastnosťami medzier. Prvky s hodnotou CSS display none sú stále viditeľné v rámci inšpektorov prehliadača.
Vytvárajte flexibilné a citlivé prvky s CSS displejom: flex
Display flex je jedným z najnovších režimov rozloženia CSS. Keď je ohyb zobrazenia na nadradenom prvku, všetky prvky v ňom sa stanú flexibilnými prvkami CSS. Nadradeným prvkom v tejto konfigurácii je flexbox.
Flexboxy vytvárajú responzívne návrhy s preddefinovanými premennými, ako je šírka a výška. Stojí to za to učenie o HTML/CSS flexboxoch než začnete.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<štýl>
.flex {
displej: flex;
veľkosť písma: 3rem;
}
#flex-1 {
farba pozadia: žltá;
šírka: 40 %;
výška: 100px;
}
#flex-2 {
farba pozadia: svetlozelená;
šírka: 25 %;
výška: 100px;
}
#flex-3 {
farba pozadia: svetlomodrá;
šírka: 35 %;
výška: 100px;
}
</style>
</head>
<telo>
<h1>CSS Display Flex</h1>
<trieda div="flex">
<div id="flex-1"></div>
<div id="ohyb-2"></div>
<div id="ohyb-3"></div>
</div>
</body>
</html>Umiestnenie Flexboxov vedľa seba S displejom: inline-flex
Inline-flex sa správa rovnako ako bežný flexbox, s ďalšou výhodou prvku, ktorý môže sedieť vedľa iných prvkov.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<štýl>
.inline-flex {
displej: inline-flex;
veľkosť písma: 3rem;
šírka: 49.8%;
}
#inline-flex-1 {
farba pozadia: žltá;
šírka: 40 %;
výška: 100px;
}
#inline-flex-2 {
farba pozadia: svetlozelená;
šírka: 25 %;
výška: 100px;
}
#inline-flex-3 {
farba pozadia: svetlomodrá;
šírka: 35 %;
výška: 100px;
}
</style>
</head>
<telo>
<h1>CSS Display Inline-Flex</h1>
<trieda div="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<trieda 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árajte komplexné tabuľky s CSS zobrazením: tabuľka
Hodnota zobrazovanej tabuľky pripomína staršie časy dizajnu webových stránok. Zatiaľ čo väčšina webových stránok dnes nepoužíva tabuľky pre svoje rozloženia, stále sú platné na zobrazenie údajov a obsahu v čitateľnom formáte.
Pridaním hodnoty tabuľky do prvku HTML bude fungovať ako prvok tabuľky, ale na správne fungovanie tabuľky potrebujete ďalšie hodnoty.
CSS zobrazenie: tabuľka-bunka
Prvky s hodnotou bunky tabuľky fungujú ako samostatné bunky v hlavnej tabuľke. Hodnoty stĺpca tabuľky a riadka tabuľky zoskupujú tieto jednotlivé bunky.
CSS zobrazenie: table-row
Hodnota riadka tabuľky funguje rovnako ako a
CSS zobrazenie: tabuľka-stĺpec
Hodnota stĺpca tabuľky funguje podobne ako hodnota riadka tabuľky, len vašu tabuľku nerozdeľuje. Namiesto toho môžete túto hodnotu použiť na pridanie konkrétnych pravidiel CSS do rôznych stĺpcov, ktoré už existujú.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<štýl>
.stôl {
displej: tabuľka;
veľkosť písma: 3rem;
}
.hlavička {
zobrazenie: table-header-group;
veľkosť písma: 3rem;
}
#column-1 {
zobrazenie: tabuľka-stĺpec-skupina;
farba pozadia: žltá;
}
#column-2 {
zobrazenie: tabuľka-stĺpec-skupina;
farba pozadia: svetlozelená;
}
#column-3 {
zobrazenie: tabuľka-stĺpec-skupina;
farba pozadia: svetlomodrá;
}
#row-1 {
zobrazenie: riadok tabuľky;
}
#row-2 {
zobrazenie: riadok tabuľky;
}
#row-3 {
zobrazenie: riadok tabuľky;
}
#bunka {
displej: tabuľka-bunka;
výplň: 10px;
šírka: 20 %;
}
</style>
</head>
<telo>
<h1>Zobrazovacia tabuľka CSS</h1>
<trieda div="tabuľky">
<div id="stĺpec-1"></div>
<div id="stĺpec-2"></div>
<div id="stĺpec-3"></div>
<trieda div="hlavička">
<div id="bunka">názov</div>
<div id="bunka">Vek</div>
<div id="bunka">Krajina</div>
</div>
<div id="riadok-1">
<div id="bunka">Jeff</div>
<div id="bunka">21</div>
<div id="bunka">USA</div>
</div>
<div id="riadok-2">
<div id="bunka">Sue</div>
<div id="bunka">34</div>
<div id="bunka">Španielsko</div>
</div>
<div id="riadok-3">
<div id="bunka">Boris</div>
<div id="bunka">57</div>
<div id="bunka">Singapur</div>
</div>
</div>
</body>
</html>Vytvárajte tabuľky vedľa seba so zobrazením CSS: vložená tabuľka
Rovnako ako ostatné inline varianty, na ktoré sme sa už pozreli, inline-table umožňuje umiestniť prvky tabuľky vedľa iných prvkov.
Vytvárajte responzívne rozloženia webových stránok s CSS zobrazením: mriežka
Hodnota zobrazovanej mriežky CSS je podobná hodnote tabuľky, iba stĺpce a riadky mriežky môžu mať flexibilnú veľkosť. Vďaka tomu sú mriežky ideálne na vytváranie hlavného rozloženia webových stránok. Nechávajú priestor pre hlavičky a päty s plnou šírkou a zároveň umožňujú mať oblasti obsahu rôznych veľkostí.
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<meta znaková sada="utf-8">
<titul>Zobrazované hodnoty CSS</title>
<štýl>
.mriežka {
displej: mriežka;
veľkosť písma: 3rem;
oblasti šablóny mriežky:
'hlavička hlavička hlavička hlavička'
'obsah ľavého bočného panela obsah pravého bočného panela'
'päta päta päta päta';
medzera: 10px;
}
#grid-1 {
grid-area: header;
farba pozadia: žltá;
výška: 100px;
výplň: 20px;
text-align: center;
}
#grid-2 {
oblasť mriežky: ľavá bočná lišta;
farba pozadia: svetlozelená;
výška: 200px;
výplň: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
farba pozadia: svetlomodrá;
výška: 200px;
výplň: 20px;
text-align: center;
}
#grid-4 {
oblasť mriežky: pravý bočný panel;
farba pozadia: svetlozelená;
výška: 200px;
výplň: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
farba pozadia: žltá;
výška: 100px;
výplň: 20px;
text-align: center;
}
</style>
</head>
<telo>
<h1>CSS Display Grid</h1>
<trieda div="mriežka">
<div id="mriežka-1">Hlavička</div>
<div id="mriežka-2">Ľavý bočný panel</div>
<div id="mriežka-3">Obsah</div>
<div id="mriežka-4">Pravý bočný panel</div>
<div id="mriežka-5">Päta</div>
</div>
</body>
</html>
Mriežky sú podobné ako flexboxy, len môžu umiestniť prvky pod seba a vedľa seba. Vlastnosť grid-template-areas je na to životne dôležitá. Ako môžete vidieť z kódu, naša hlavička a päta zaberajú štyri medzery v poli, pretože majú celú šírku. Bočné panely zaberajú každý jeden slot, zatiaľ čo obsah zaberá dva, čo efektívne rozdeľuje stredný riadok mriežky na tri stĺpce.
CSS zobrazenie: inline-grid
Použitie hodnoty vloženej mriežky umožní, aby vaša mriežka sedela vedľa iných prvkov, rovnako ako ostatné vložené hodnoty v tejto príručke.
Použitie CSS Display pre webový dizajn
Vlastnosť CSS display ponúka praktický spôsob, ako upraviť štruktúry prvkov webových stránok bez toho, aby ste museli meniť označenie HTML. To je ideálne pre tých, ktorí používajú platformy na doručovanie obsahu, ako sú Shopify alebo WordPress, ale môže to byť užitočné aj pre všeobecný webový dizajn.
