De CSS-weergave-eigenschap is een krachtig hulpmiddel voor webontwerpers. Hiermee kunt u de lay-outs van website-elementen beheren met minimale styling, met eenvoudige waarden die gemakkelijk te onthouden zijn.
Maar wat doen elk van deze waarden en hoe werken ze? Laten we het uitzoeken.
Wat is de CSS-weergave-eigenschap?
De eigenschap display specificeert het type boxweergave dat wordt gebruikt voor HTML-elementen op een webpagina. Dit resulteert in een verscheidenheid aan gedrag, waaronder helemaal niet komen opdagen. U kunt deze waarden op uw website bewerken via het stijlblad of de juiste CSS-aanpassingssecties in CMS-tools zoals WordPress.
Houd elementen in lijn met CSS-weergave: inline
Breedte- en hoogtewaarden zijn niet van toepassing op een element met inline-weergave; de inhoud binnenin bepaalt zijn afmetingen. Inline HTML-elementen kunnen naast andere elementen staan en zich gedragen als a. Inline weergeven wordt het meest gebruikt voor tekst.
<!DOCTYPE html>
<html lang="en">
<hoofd
>
<meta-tekenset="utf-8">
<titel>CSS-weergavewaarden</title>
<stijl>
.in lijn {
weergave: inline;
lettergrootte: 3rem;
}
#inline-1 {
achtergrondkleur: geel;
opvulling: 10px 0px 10px 10px;
}
#inline-2 {
achtergrondkleur: lichtgroen;
opvulling: 10px 10px 10px 0px;
}
</style>
</head>
<lichaam>
<h1>CSS-weergave inline</h1>
<div klasse="in lijn" id="inline-1">Dit is tekst</div>
<div klasse="in lijn" id="inline-2">met de inline eigenschapswaarde.</div>
</body>
</html>
Deze HTML-opmaak en CSS hierboven dienen als een goed voorbeeld van de inline-waarde voor weergave. Wanneer ze samen worden gebruikt, wordt een enkele regel tekst weergegeven die is gemaakt met twee verschillende HTML-elementen.
Beheer websitelay-outs met CSS-weergave: blok
In sommige opzichten is de weergaveblokwaarde het tegenovergestelde van de inline-waarde. Hoogte- en breedtematen kunnen worden ingesteld en elementen met deze waarde kunnen niet naast elkaar zitten. Het bovenstaande voorbeeld toont twee elementen met de blokwaarde. Elementen met de blokweergavewaarde standaard op de maximale breedte van hun bovenliggende element.
<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="utf-8">
<titel>CSS-weergavewaarden</title>
<stijl>
.blok {
weergave: blok;
lettergrootte: 3rem;
breedte: pasvorm-inhoud;
}
#blok-1 {
achtergrondkleur: geel;
opvulling: 10px 10px 10px 10px;
}
#blok-2 {
achtergrondkleur: lichtgroen;
opvulling: 10px 10px 10px 10px;
}
</style>
</head>
<lichaam>
<h1>CSS-weergaveblok</h1>
<div klasse="blok" id="blok-1">Dit is tekst</div>
<div klasse="blok" id="blok-2">met de blokeigenschapswaarde.</div>
</body>
</html>In tegenstelling tot het inline-stijlvoorbeeld, splitst dit voorbeeld van de weergaveblokwaarde de tekstregels in twee verschillende regels. De fit-content width waarde stelt de breedte van de elementen in op de lengte van de tekst.
Side-by-side HTML-elementen met CSS-weergave: inline-block
De CSS-weergave inline-blokwaarde werkt net als een normale inline-waarde, alleen met de mogelijkheid om specifieke dimensies toe te voegen. Dit maakt het mogelijk om rasterachtige lay-outs te maken zonder dat er bovenliggende elementen aanwezig zijn. Terugkerend naar het vorige voorbeeld, door de inline-block-waarde toe te voegen, kunnen de elementen naast elkaar zitten.
<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="utf-8">
<titel>CSS-weergavewaarden</title>
<stijl>
.inline-blok {
weergave: inline-blok;
lettergrootte: 3rem;
breedte: pasvorm-inhoud;
}
#inline-blok-1 {
achtergrondkleur: geel;
opvulling: 10px 10px 10px 10px;
}
#inline-blok-2 {
achtergrondkleur: lichtgroen;
opvulling: 10px 10px 10px 10px;
}
</style>
</head>
<lichaam>
<h1>CSS Display Inline-Block (breedte ingesteld)</h1>
<div klasse="inline-blok" id="inline-blok-1">Dit is tekst</div>
<div klasse="inline-blok" id="inline-blok-2">met de eigenschap inline-block
waarde.</div>
</body>
</html>
De inline-blokwaarde lijkt niet veel anders te zijn dan de inline-waarde. Het is belangrijk op te merken dat u de afmetingen van elementen met deze waarde kunt instellen, waardoor het in bepaalde gevallen gemakkelijker is om mee te werken.
De eenvoudigste weergavewaarde is "geen". Deze waarde verbergt het element en eventuele onderliggende elementen, samen met marges en andere spatiëringseigenschappen. Elementen met de CSS-waarde Geen zijn nog steeds zichtbaar in browserinspecteurs.
Creëer flexibele en responsieve elementen met CSS-weergave: flex
Display flex is een van de nieuwste CSS-lay-outmodi. Wanneer display flex zich op een bovenliggend element bevindt, worden alle elementen erin flexibele CSS-elementen. Het bovenliggende element in deze configuratie is een flexbox.
Flexboxen creëren responsieve ontwerpen met vooraf gedefinieerde variabelen, zoals breedte en hoogte. Het is waard leren over HTML/CSS flexboxen voordat u aan de slag gaat.
<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="utf-8">
<titel>CSS-weergavewaarden</title>
<stijl>
.buigen {
weergave: flexibel;
lettergrootte: 3rem;
}
#flex-1 {
achtergrondkleur: geel;
breedte: 40%;
hoogte: 100px;
}
#flex-2 {
achtergrondkleur: lichtgroen;
breedte: 25%;
hoogte: 100px;
}
#flex-3 {
achtergrondkleur: lichtblauw;
breedte: 35%;
hoogte: 100px;
}
</style>
</head>
<lichaam>
<h1>CSS Display Flex</h1>
<div klasse="buigen">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Positie Flexboxen Side-by-Side Met display: inline-flex
Inline-flex gedraagt zich net als een gewone flexbox, met als bijkomend voordeel dat het element naast andere elementen kan zitten.
<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="utf-8">
<titel>CSS-weergavewaarden</title>
<stijl>
.inline-flex {
weergave: inline-flex;
lettergrootte: 3rem;
breedte: 49.8%;
}
#inline-flex-1 {
achtergrondkleur: geel;
breedte: 40%;
hoogte: 100px;
}
#inline-flex-2 {
achtergrondkleur: lichtgroen;
breedte: 25%;
hoogte: 100px;
}
#inline-flex-3 {
achtergrondkleur: lichtblauw;
breedte: 35%;
hoogte: 100px;
}
</style>
</head>
<lichaam>
<h1>CSS Display Inline-Flex</h1>
<div klasse="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div klasse="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Maak complexe tabellen met CSS-weergave: tabel
De weergavetabelwaarde doet denken aan de vroegere dagen van website-ontwerp. Hoewel de meeste websites tegenwoordig geen tabellen gebruiken voor hun lay-outs, zijn ze nog steeds geldig voor het weergeven van gegevens en inhoud in een leesbaar formaat.
Door de tabelwaarde aan een HTML-element toe te voegen, gedraagt het zich als een tabelelement, maar u hebt aanvullende waarden nodig om uw tabel goed te laten werken.
CSS-weergave: tabelcel
Elementen met de waarde tabelcel fungeren als afzonderlijke cellen in de hoofdtabel. En de tabelkolom- en tabelrijwaarden groeperen deze afzonderlijke cellen samen.
CSS-weergave: tabelrij
De tabelrijwaarde werkt net als a
CSS-weergave: tabelkolom
De tabelkolomwaarde werkt op dezelfde manier als de tabelrijwaarde, alleen wordt uw tabel niet opgesplitst. In plaats daarvan kunt u deze waarde gebruiken om specifieke CSS-regels toe te voegen aan de verschillende kolommen die al bestaan.
<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="utf-8">
<titel>CSS-weergavewaarden</title>
<stijl>
.tafel {
weergave: tafel;
lettergrootte: 3rem;
}
.header {
weergave: tabelkopgroep;
lettergrootte: 3rem;
}
#kolom-1 {
weergave: tabelkolomgroep;
achtergrondkleur: geel;
}
#kolom-2 {
weergave: tabelkolomgroep;
achtergrondkleur: lichtgroen;
}
#kolom-3 {
weergave: tabelkolomgroep;
achtergrondkleur: lichtblauw;
}
#rij-1 {
weergave: tafelrij;
}
#rij-2 {
weergave: tafelrij;
}
#rij-3 {
weergave: tafelrij;
}
#cel {
weergave: tabelcel;
opvulling: 10px;
breedte: 20%;
}
</style>
</head>
<lichaam>
<h1>CSS-weergavetabel</h1>
<div klasse="tafel">
<div id="kolom-1"></div>
<div id="kolom-2"></div>
<div id="kolom-3"></div>
<div klasse="koptekst">
<div id="cel">Naam</div>
<div id="cel">Leeftijd</div>
<div id="cel">Land</div>
</div>
<div id="rij-1">
<div id="cel">Jeff</div>
<div id="cel">21</div>
<div id="cel">Verenigde Staten van Amerika</div>
</div>
<div id="rij-2">
<div id="cel">Sue</div>
<div id="cel">34</div>
<div id="cel">Spanje</div>
</div>
<div id="rij-3">
<div id="cel">Boris</div>
<div id="cel">57</div>
<div id="cel">Singapore</div>
</div>
</div>
</body>
</html>Maak zij-aan-zij-tabellen met CSS-weergave: inline-tabel
Net als de andere inline varianten die we al hebben bekeken, maakt inline-table het mogelijk om tafelelementen naast andere elementen te plaatsen.
Responsieve websitelay-outs bouwen met CSS-weergave: raster
De CSS-weergaverasterwaarde is vergelijkbaar met de tabelwaarde, alleen de kolommen en rijen van een raster kunnen een flexibele grootte hebben. Dit maakt rasters ideaal voor het maken van de hoofdlay-out voor webpagina's. Ze laten ruimte voor kop- en voetteksten over de volledige breedte en maken het ook mogelijk om inhoudsgebieden van verschillende groottes te hebben.
<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="utf-8">
<titel>CSS-weergavewaarden</title>
<stijl>
.rooster {
weergave: raster;
lettergrootte: 3rem;
raster-sjabloon-gebieden:
'kop kop kop kop kop'
'inhoud linkerzijbalk inhoud rechterzijbalk'
'voettekst voettekst voettekst voettekst';
tussenruimte: 10px;
}
#raster-1 {
rastergebied: kop;
achtergrondkleur: geel;
hoogte: 100px;
opvulling: 20px;
tekst uitlijnen: midden;
}
#rooster 2 {
rastergebied: linkerzijbalk;
achtergrondkleur: lichtgroen;
hoogte: 200px;
opvulling: 20px;
tekst uitlijnen: midden;
}
#raster-3 {
rastergebied: inhoud;
achtergrondkleur: lichtblauw;
hoogte: 200px;
opvulling: 20px;
tekst uitlijnen: midden;
}
#raster-4 {
rastergebied: rechterzijbalk;
achtergrondkleur: lichtgroen;
hoogte: 200px;
opvulling: 20px;
tekst uitlijnen: midden;
}
#raster-5 {
rastergebied: voettekst;
achtergrondkleur: geel;
hoogte: 100px;
opvulling: 20px;
tekst uitlijnen: midden;
}
</style>
</head>
<lichaam>
<h1>CSS-weergaveraster</h1>
<div klasse="rooster">
<div id="raster-1">kop</div>
<div id="rooster 2">Linker zijbalk</div>
<div id="raster-3">Inhoud</div>
<div id="raster-4">Rechter zijbalk</div>
<div id="rooster-5">voettekst</div>
</div>
</body>
</html>
Grids zijn vergelijkbaar met flexboxen, alleen kunnen ze elementen onder en naast elkaar plaatsen. Hiervoor is de eigenschap grid-template-area essentieel. Zoals je aan de code kunt zien, nemen onze kop- en voettekst vier spaties in de array in beslag, omdat ze de volledige breedte hebben. De zijbalken nemen elk één slot in beslag, terwijl de inhoud er twee in beslag neemt, waardoor de middelste rij van het raster in feite in drie kolommen wordt gesplitst.
CSS-weergave: inline-raster
Door de inline-rasterwaarde te gebruiken, kan uw raster naast andere elementen staan, net als de andere inline-waarden in deze handleiding.
CSS-weergave gebruiken voor webdesign
De CSS-weergave-eigenschap biedt een handige manier om de structuur van website-elementen aan te passen zonder de HTML-opmaak te hoeven wijzigen. Dit is ideaal voor mensen die content delivery-platforms zoals Shopify of WordPress gebruiken, maar het kan ook handig zijn voor algemeen webdesign.