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.
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="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím>CSS megjelenítési értékek</title>
<stílus>
.Sorban {
kijelző: inline;
betűméret: 3 rem;
}
#inline-1 {
háttérszín: sárga;
padding: 10px 0px 10px 10px;
}
#inline-2 {
háttérszín: világoszöld;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<test>
<h1>Beépített CSS-megjelenítés</h1>
<div class="Sorban" id="inline-1">Ez szöveg</div>
<div class="Sorban" id="inline-2">a belső tulajdonság értékével.</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.
<!DOCTYPE html>
<html lang="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím>CSS megjelenítési értékek</title>
<stílus>
.Blokk {
kijelző: blokk;
betűméret: 3 rem;
szélesség: illeszkedés-tartalom;
}
#block-1 {
háttérszín: sárga;
padding: 10px 10px 10px 10px;
}
#block-2 {
háttérszín: világoszöld;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<test>
<h1>CSS megjelenítési blokk</h1>
<div class="Blokk" id="blokk-1">Ez szöveg</div>
<div class="Blokk" id="blokk-2">a blokk tulajdonság értékével.</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="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím>CSS megjelenítési értékek</title>
<stílus>
.inline-block {
kijelző: inline-block;
betűméret: 3 rem;
szélesség: illeszkedés-tartalom;
}
#inline-block-1 {
háttérszín: sárga;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
háttérszín: világoszöld;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<test>
<h1>CSS Display Inline-Block (szélesség beállítva)</h1>
<div class="inline-blokk" id="inline-block-1">Ez szöveg</div>
<div class="inline-blokk" id="inline-block-2">az inline-block tulajdonsággal
érték.</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.
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="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím>CSS megjelenítési értékek</title>
<stílus>
.Flex {
kijelző: flex;
betűméret: 3 rem;
}
#flex-1 {
háttérszín: sárga;
szélesség: 40%;
magasság: 100 képpont;
}
#flex-2 {
háttérszín: világoszöld;
szélesség: 25%;
magasság: 100 képpont;
}
#flex-3 {
háttérszín: világoskék;
szélesség: 35%;
magasság: 100 képpont;
}
</style>
</head>
<test>
<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="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím>CSS megjelenítési értékek</title>
<stílus>
.inline-flex {
kijelző: inline-flex;
betűméret: 3 rem;
szélesség: 49.8%;
}
#inline-flex-1 {
háttérszín: sárga;
szélesség: 40%;
magasság: 100 képpont;
}
#inline-flex-2 {
háttérszín: világoszöld;
szélesség: 25%;
magasság: 100 képpont;
}
#inline-flex-3 {
háttérszín: világoskék;
szélesség: 35%;
magasság: 100 képpont;
}
</style>
</head>
<test>
<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, akkor 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 a
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.
<!DOCTYPE html>
<html lang="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím>CSS megjelenítési értékek</title>
<stílus>
.asztal {
kijelző: asztal;
betűméret: 3 rem;
}
.fejléc {
megjelenítés: táblázat-fejléc-csoport;
betűméret: 3 rem;
}
#oszlop-1 {
megjelenítés: táblázat-oszlop-csoport;
háttérszín: sárga;
}
#oszlop-2 {
megjelenítés: táblázat-oszlop-csoport;
háttérszín: világoszöld;
}
#column-3 {
megjelenítés: táblázat-oszlop-csoport;
háttérszín: világoskék;
}
#sor-1 {
kijelző: táblázat-sor;
}
#row-2 {
kijelző: táblázat-sor;
}
#row-3 {
kijelző: táblázat-sor;
}
#sejt {
kijelző: táblázat-cella;
padding: 10px;
szélesség: 20%;
}
</style>
</head>
<test>
<h1>CSS megjelenítési táblázat</h1>
<div class="asztal">
<div id="oszlop-1"></div>
<div id="oszlop-2"></div>
<div id="oszlop-3"></div>
<div class="fejléc">
<div id="sejt">Név</div>
<div id="sejt">Kor</div>
<div id="sejt">Ország</div>
</div>
<div id="sor-1">
<div id="sejt">Jeff</div>
<div id="sejt">21</div>
<div id="sejt">USA</div>
</div>
<div id="sor-2">
<div id="sejt">perel</div>
<div id="sejt">34</div>
<div id="sejt">Spanyolország</div>
</div>
<div id="sor-3">
<div id="sejt">Boris</div>
<div id="sejt">57</div>
<div id="sejt">Szingapúr</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="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím>CSS megjelenítési értékek</title>
<stílus>
.rács {
kijelző: rács;
betűméret: 3 rem;
rács-sablon-területek:
'fejléc fejléc fejléc fejléc'
'left-sidebar content content right-sidebar'
'lábléc lábléc lábléc lábléc';
rés: 10px;
}
#grid-1 {
grid-area: fejléc;
háttérszín: sárga;
magasság: 100 képpont;
padding: 20px;
szöveg igazítása: középre;
}
#grid-2 {
rács-terület: bal oldalsáv;
háttérszín: világoszöld;
magasság: 200 képpont;
padding: 20px;
szöveg igazítása: középre;
}
#grid-3 {
rács-terület: tartalom;
háttérszín: világoskék;
magasság: 200 képpont;
padding: 20px;
szöveg igazítása: középre;
}
#grid-4 {
grid-area: jobb oldali sáv;
háttérszín: világoszöld;
magasság: 200 képpont;
padding: 20px;
szöveg igazítása: középre;
}
#grid-5 {
grid-area: lábléc;
háttérszín: sárga;
magasság: 100 képpont;
padding: 20px;
szöveg igazítása: középre;
}
</style>
</head>
<test>
<h1>CSS Display Grid</h1>
<div class="rács">
<div id="rács-1">Fejléc</div>
<div id="rács-2">Bal oldalsáv</div>
<div id="rács-3">Tartalom</div>
<div id="rács-4">Jobb oldalsáv</div>
<div id="rács-5">Lábléc</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. Amint 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, csakúgy, mint 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.
