CSS-visningsegenskapen er et kraftig verktøy for webdesignere. Den lar deg kontrollere nettstedelementoppsett med minimal stil, med enkle verdier som er enkle å huske.
Men hva gjør hver av disse verdiene, og hvordan fungerer de? La oss finne det ut.
Hva er CSS-visningsegenskapen?
Visningsegenskapen spesifiserer typen boksgjengivelse som brukes for HTML-elementer på en nettside. Dette resulterer i en rekke atferd, inkludert å ikke dukke opp i det hele tatt. Du kan redigere disse verdiene på nettstedet ditt gjennom stilarket eller de aktuelle CSS-tilpasningsdelene i CMS-verktøy som WordPress.
Hold elementer på linje med CSS-visning: inline
Bredde- og høydeverdier gjelder ikke for et element med innebygd visning; innholdet inni setter sine dimensjoner. Innebygde HTML-elementer kan sitte side om side med andre elementer, og oppføre seg som en. Display inline brukes oftest for tekst.
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel>CSS-visningsverdier</title>
<stil>
.på linje {
display: inline;
skriftstørrelse: 3rem;
}
#inline-1 {
bakgrunnsfarge: gul;
polstring: 10px 0px 10px 10px;
}
#inline-2 {
bakgrunnsfarge: lysegrønn;
polstring: 10px 10px 10px 0px;
}
</style>
</head>
<kropp>
<h1>CSS Display Inline</h1>
<div klasse="på linje" id="inline-1">Dette er tekst</div>
<div klasse="på linje" id="inline-2">med den innebygde eiendomsverdien.</div>
</body>
</html>
Denne HTML-markeringen og CSS-en ovenfor fungerer som et godt eksempel på den innebygde visningsverdien. Når det brukes sammen, vil dette vise en enkelt linje med tekst laget med to forskjellige HTML-elementer.
Kontroller nettstedsoppsett med CSS-visning: blokk
På noen måter er visningsblokkverdien motsatt av den innebygde verdien. Høyde- og breddedimensjoner kan angis, og elementer med denne verdien kan ikke sitte ved siden av hverandre. Eksemplet ovenfor viser to elementer med blokkverdien. Elementer med blokkvisningsverdien er standard ved maksimal bredde på overordnet element.
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel>CSS-visningsverdier</title>
<stil>
.blokkere {
display: blokk;
skriftstørrelse: 3rem;
bredde: passform-innhold;
}
#block-1 {
bakgrunnsfarge: gul;
polstring: 10px 10px 10px 10px;
}
#blokk-2 {
bakgrunnsfarge: lysegrønn;
polstring: 10px 10px 10px 10px;
}
</style>
</head>
<kropp>
<h1>CSS-skjermblokk</h1>
<div klasse="blokkere" id="blokk-1">Dette er tekst</div>
<div klasse="blokkere" id="blokk-2">med blokkegenskapsverdien.</div>
</body>
</html>I motsetning til eksemplet med innebygd stil, deler dette eksemplet med visningsblokkverdier tekstlinjene i to forskjellige linjer. Tilpasningsinnholdsbreddeverdien setter elementenes bredde til å matche lengden på teksten.
Side-by-side HTML-elementer Med CSS-visning: inline-block
CSS-visningen av inline-blokkverdien fungerer akkurat som en vanlig innebygd verdi, bare med muligheten til å legge til spesifikke dimensjoner. Dette gjør det mulig å lage rutenettlignende oppsett uten å ha overordnede elementer på plass. Går tilbake til det forrige eksemplet, ved å legge til inline-blokkverdien kan elementene sitte ved siden av hverandre.
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel>CSS-visningsverdier</title>
<stil>
.inline-block {
display: inline-blokk;
skriftstørrelse: 3rem;
bredde: passform-innhold;
}
#inline-block-1 {
bakgrunnsfarge: gul;
polstring: 10px 10px 10px 10px;
}
#inline-block-2 {
bakgrunnsfarge: lysegrønn;
polstring: 10px 10px 10px 10px;
}
</style>
</head>
<kropp>
<h1>CSS Display Inline-Block (breddesett)</h1>
<div klasse="inline-blokk" id="inline-block-1">Dette er tekst</div>
<div klasse="inline-blokk" id="inline-block-2">med inline-block-egenskapen
verdi.</div>
</body>
</html>
Den innebygde blokkverdien ser ikke mye forskjellig ut fra den innebygde verdien. Det er imidlertid viktig å merke seg at du kan angi dimensjonene til elementer med denne verdien, noe som gjør det lettere å jobbe med i visse tilfeller.
Den enkleste visningsverdien er "ingen". Denne verdien skjuler elementet og eventuelle underordnede elementer, sammen med marginer og andre avstandsegenskaper. Elementer med CSS viser ingen verdi er fortsatt synlige i nettleserinspektører.
Lag fleksible og responsive elementer med CSS-skjerm: flex
Display flex er en av de nyeste CSS-layoutmodusene. Når display flex er på et overordnet element, blir alle elementene inne i det fleksible CSS-elementer. Det overordnede elementet i denne konfigurasjonen er en flexbox.
Flexboxes skaper responsive design med forhåndsdefinerte variabler, som bredde og høyde. Det er verdt lære om HTML/CSS flexboxes før du setter i gang.
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel>CSS-visningsverdier</title>
<stil>
.flex {
display: flex;
skriftstørrelse: 3rem;
}
#flex-1 {
bakgrunnsfarge: gul;
bredde: 40 %;
høyde: 100px;
}
#flex-2 {
bakgrunnsfarge: lysegrønn;
bredde: 25 %;
høyde: 100px;
}
#flex-3 {
bakgrunnsfarge: lyseblå;
bredde: 35 %;
høyde: 100px;
}
</style>
</head>
<kropp>
<h1>CSS Display Flex</h1>
<div klasse="bøye seg">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Plasser Flexboxes Side-by-Side Med display: inline-flex
Inline-flex oppfører seg akkurat som en vanlig flexbox, med den ekstra fordelen at elementet kan sitte ved siden av andre elementer.
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel>CSS-visningsverdier</title>
<stil>
.inline-flex {
display: inline-flex;
skriftstørrelse: 3rem;
bredde: 49.8%;
}
#inline-flex-1 {
bakgrunnsfarge: gul;
bredde: 40 %;
høyde: 100px;
}
#inline-flex-2 {
bakgrunnsfarge: lysegrønn;
bredde: 25 %;
høyde: 100px;
}
#inline-flex-3 {
bakgrunnsfarge: lyseblå;
bredde: 35 %;
høyde: 100px;
}
</style>
</head>
<kropp>
<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>Lag komplekse tabeller med CSS-skjerm: tabell
Visningstabellverdien minner om eldre dager med nettsteddesign. Selv om de fleste nettsteder ikke bruker tabeller for layoutene sine i dag, er de fortsatt gyldige for å vise data og innhold i et lesbart format.
Hvis du legger til tabellverdien til et HTML-element, vil det fungere som et tabellelement, men du trenger flere verdier for å få tabellen til å fungere ordentlig.
CSS-skjerm: tabellcelle
Elementer med tabellcelleverdien fungerer som individuelle celler i hovedtabellen. Og tabellkolonne- og tabellradverdiene grupperer disse individuelle cellene sammen.
CSS-visning: tabellrad
Tabellradverdien fungerer akkurat som en
CSS-skjerm: tabellkolonne
Tabellkolonneverdien fungerer på samme måte som tabellradverdien, bare den deler ikke tabellen opp. I stedet kan du bruke denne verdien til å legge til spesifikke CSS-regler til de forskjellige kolonnene som allerede eksisterer.
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel>CSS-visningsverdier</title>
<stil>
.bord {
display: tabell;
skriftstørrelse: 3rem;
}
.Overskrift {
display: table-header-group;
skriftstørrelse: 3rem;
}
#column-1 {
display: tabell-kolonne-gruppe;
bakgrunnsfarge: gul;
}
#column-2 {
display: tabell-kolonne-gruppe;
bakgrunnsfarge: lysegrønn;
}
#column-3 {
display: tabell-kolonne-gruppe;
bakgrunnsfarge: lyseblå;
}
#rad-1 {
display: tabell-rad;
}
#rad-2 {
display: tabell-rad;
}
#rad-3 {
display: tabell-rad;
}
#celle {
display: tabell-celle;
polstring: 10px;
bredde: 20%;
}
</style>
</head>
<kropp>
<h1>CSS-visningstabell</h1>
<div klasse="bord">
<div id="kolonne-1"></div>
<div id="kolonne-2"></div>
<div id="kolonne-3"></div>
<div klasse="Overskrift">
<div id="celle">Navn</div>
<div id="celle">Alder</div>
<div id="celle">Land</div>
</div>
<div id="rad-1">
<div id="celle">Jeff</div>
<div id="celle">21</div>
<div id="celle">USA</div>
</div>
<div id="rad-2">
<div id="celle">Saksøke</div>
<div id="celle">34</div>
<div id="celle">Spania</div>
</div>
<div id="rad-3">
<div id="celle">Boris</div>
<div id="celle">57</div>
<div id="celle">Singapore</div>
</div>
</div>
</body>
</html>Lag side-ved-side-tabeller med CSS-skjerm: inline-tabell
Som de andre inline-variantene vi allerede har sett på, gjør inline-table det mulig å plassere tabellelementer ved siden av andre elementer.
Bygg responsive nettstedsoppsett med CSS-skjerm: rutenett
CSS-visningsrutenettverdien er lik tabellverdien, bare kolonner og rader i et rutenett kan ha fleksibel størrelse. Dette gjør rutenett ideelle for å lage hovedoppsettet for nettsider. De gir plass til topp- og bunntekster i full bredde, samtidig som de gjør det mulig å ha innholdsområder i forskjellige størrelser.
<!DOCTYPE html>
<html lang="no">
<hode>
<metategnsett="utf-8">
<tittel>CSS-visningsverdier</title>
<stil>
.Nett {
display: rutenett;
skriftstørrelse: 3rem;
rutenett-mal-områder:
'header header header header'
'innhold på venstre sidefelt høyre sidefelt'
'bunntekst bunntekst bunntekst bunntekst';
gap: 10px;
}
#grid-1 {
rutenettområde: topptekst;
bakgrunnsfarge: gul;
høyde: 100px;
polstring: 20px;
tekst-align: center;
}
#grid-2 {
rutenettområde: venstre sidefelt;
bakgrunnsfarge: lysegrønn;
høyde: 200px;
polstring: 20px;
tekst-align: center;
}
#grid-3 {
rutenettområde: innhold;
bakgrunnsfarge: lyseblå;
høyde: 200px;
polstring: 20px;
tekst-align: center;
}
#grid-4 {
rutenettområde: høyre sidefelt;
bakgrunnsfarge: lysegrønn;
høyde: 200px;
polstring: 20px;
tekst-align: center;
}
#grid-5 {
rutenettområde: bunntekst;
bakgrunnsfarge: gul;
høyde: 100px;
polstring: 20px;
tekst-align: center;
}
</style>
</head>
<kropp>
<h1>CSS-skjermnett</h1>
<div klasse="Nett">
<div id="rutenett-1">Overskrift</div>
<div id="rutenett-2">Venstre sidefelt</div>
<div id="rutenett-3">Innhold</div>
<div id="rutenett-4">Høyre sidefelt</div>
<div id="rutenett-5">Bunntekst</div>
</div>
</body>
</html>
Grids ligner på flexboxes, bare de kan plassere elementer under og ved siden av hverandre. Grid-mal-områder eiendommen er avgjørende for dette. Som du kan se av koden, tar topp- og bunnteksten vår opp fire mellomrom i arrayet, siden de er i full bredde. Sidefeltene tar opp ett spor hver, mens innholdet tar to, og deler den midterste raden i rutenettet i tre kolonner.
CSS-skjerm: inline-grid
Ved å bruke den innebygde rutenettverdien kan rutenettet ditt sitte ved siden av andre elementer, akkurat som de andre innebygde verdiene i denne veiledningen.
Bruk av CSS Display for webdesign
CSS-visningsegenskapen tilbyr en praktisk måte å justere nettstedelementstrukturer uten å måtte endre HTML-oppmerking. Dette er ideelt for de som bruker innholdsleveringsplattformer som Shopify eller WordPress, men det kan også være nyttig for generell webdesign.
