Home-theater-designers
A CSS-megjelenítési tulajdonság hatékony eszköz a webes tervezők számára. Lehetővé teszi a webhelyelemek elrendezésének vezérlését minimális stílussal, egyszerű, könnyen megjegyezhető értékekkel.
De mit tesznek ezek az értékek, és hogyan működnek? Találjuk ki.
MAKEUSEOF A NAP VIDEÓJA
Mi a CSS-kijelző tulajdonsága?
A megjelenítési tulajdonság megadja a weboldal HTML-elemeihez használt doboz-megjelenítés típusát. Ez sokféle viselkedést eredményez, beleértve azt is, hogy egyáltalán nem jelenik meg. Ezeket az értékeket szerkesztheti webhelyén a stíluslapon vagy a megfelelő CSS testreszabási szakaszokon keresztül CMS-eszközök, például a WordPress .
Tartsa az elemeket egy vonalban CSS-kijelzővel: inline
A szélesség és magasság értékek nem vonatkoznak a beépített kijelzővel rendelkező elemekre; a benne lévő tartalom határozza meg a méreteit. A soron belüli HTML elemek egymás mellett helyezkedhetnek el más elemekkel, és úgy viselkedhetnek, mint a . A szövegközi megjelenítést leggyakrabban szöveghez használják.
<!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>
Ez a fenti HTML-jelölés és CSS jó példa a soron belüli megjelenítési értékre. Együtt használva egyetlen sornyi szöveget jelenít meg két különböző HTML-elemből.
Weboldal-elrendezések vezérlése CSS-kijelzővel: blokk
Bizonyos szempontból a megjelenítési blokk értéke ellentétes a soron belüli értékkel. A magassági és szélességi méretek beállíthatók, és az ilyen értékű elemek nem helyezkedhetnek el egymás mellett. A fenti példa két blokkértékű elemet mutat be. Azok az elemek, amelyeknek a blokk megjelenítési értéke alapértelmezett, a szülőelemük maximális szélességében.
hogyan kell gyorsbillentyűket csinálni az iPhone -on
<!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>A szövegközi stíluspéldától eltérően ez a megjelenítési blokkérték-példa két különböző sorra osztja fel a szövegsorokat. Az illesztési tartalomszélesség érték az elemek szélességét a szöveg hosszához igazítja.
Egymás melletti HTML-elemek CSS-kijelzővel: inline-block
A CSS megjelenített soron belüli blokkérték ugyanúgy működik, mint egy normál soron belüli érték, csak adott dimenziók hozzáadásának lehetőségével. Ez lehetővé teszi rácsszerű elrendezések létrehozását anélkül, hogy szülőelemek lennének a helyükön. Visszatérve az előző példához, az inline-block érték hozzáadásával az elemek egymás mellett helyezkedhetnek el.
<!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>
Az inline-block értéke nem sokban különbözik a soron belüli értéktől. Fontos megjegyezni, hogy ezzel az értékkel beállíthatja az elemek méreteit, ami bizonyos esetekben megkönnyíti a munkát.
Webhelyelemek elrejtése CSS-megjelenítéssel: nincs
A legegyszerűbb megjelenítési érték a „nincs”. Ez az érték elrejti az elemet és az összes gyermekelemet, valamint a margókat és egyéb térköztulajdonságokat. A CSS nem jelenít meg értéket tartalmazó elemek továbbra is láthatók a böngésző ellenőrzőiben.
Rugalmas és érzékeny elemek létrehozása CSS-kijelzővel: flex
A Display flex az egyik legújabb CSS-elrendezési mód. Ha a display flex egy szülőelemen van, akkor a benne lévő összes elem rugalmas CSS-elemmé válik. Ebben a konfigurációban a szülőelem egy flexbox.
A Flexboxok érzékeny mintákat hoznak létre előre meghatározott változókkal, például szélességgel és magassággal. Megéri HTML/CSS flexboxok megismerése mielőtt belekezdesz.
<!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> Flexboxok elhelyezése egymás mellett Kijelzővel: inline-flex
Az Inline-flex ugyanúgy viselkedik, mint egy normál flexbox, azzal a plusz előnnyel, hogy az elem más elemek mellett is elhelyezhető.
<!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>Összetett táblázatok létrehozása CSS-kijelzővel: táblázat
A megjelenítési táblázat értéke a webhelytervezés régebbi napjaira emlékeztet. Bár a legtöbb webhely ma nem használ táblázatokat az elrendezéshez, ezek továbbra is érvényesek az adatok és a tartalom olvasható formátumban történő megjelenítésére.
Ha hozzáadja a táblázat értékét egy HTML-elemhez, az táblázatelemként fog működni, de további értékekre van szükség a táblázat megfelelő működéséhez.
CSS kijelző: táblázat-cella
A táblázatcella értékkel rendelkező elemek a főtáblán belül külön cellákként működnek. És a táblázat oszlop és sor értékei csoportosítják ezeket az egyes cellákat.
CSS megjelenítés: táblázat-sor
A táblázatsor értéke ugyanúgy működik, mint egy
CSS kijelző: táblázat-oszlop
A táblázat oszlop értéke hasonlóan működik, mint a táblázat sor értéke, csak nem osztja fel a táblázatot. Ehelyett ezt az értéket használhatja speciális CSS-szabályok hozzáadásához a már létező különböző oszlopokhoz.
hogyan készítsünk egyedi kártyákat asztali szimulátorban
<!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>Egymás melletti táblázatok létrehozása CSS-kijelzővel: soron belüli táblázat
A többi beágyazott változathoz hasonlóan, amelyet már megvizsgáltunk, az inline-table lehetővé teszi a táblázatelemek más elemek mellé helyezését.
Reszponzív webhely-elrendezések létrehozása CSS-kijelzővel: rács
A CSS megjelenítési rács értéke hasonló a táblázat értékéhez, csak a rács oszlopainak és sorainak lehet rugalmas mérete. Ez ideálissá teszi a rácsokat a weboldalak fő elrendezésének létrehozásához. Helyet hagynak a teljes szélességű fejlécek és láblécek számára, ugyanakkor lehetővé teszik a különböző méretű tartalomterületek létrehozását.
<!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>
A rácsok hasonlóak a flexboxokhoz, csak az elemeket egymás alá és mellé helyezhetik el. A grid-template-areas tulajdonság ehhez elengedhetetlen. Ahogy a kódból látható, a fejlécünk és a láblécünk négy helyet foglal el a tömbben, mivel teljes szélességűek. Az oldalsávok egy-egy helyet foglalnak el, míg a tartalom kettőt, gyakorlatilag három oszlopra osztva a rács középső sorát.
CSS kijelző: inline-grid
A soron belüli rácsérték használatával lehetővé teszi, hogy a rács más elemek mellett helyezkedjen el, akárcsak az útmutató többi soron belüli értéke.
CSS-kijelző használata webdesignhoz
A CSS-megjelenítési tulajdonság praktikus módot kínál a webhelyelem-struktúrák módosítására anélkül, hogy módosítani kellene a HTML-jelölést. Ez ideális azok számára, akik olyan tartalomszolgáltató platformokat használnak, mint a Shopify vagy a WordPress, de hasznos lehet általános webdesignhoz is.