Home-theater-designers
CSS-näyttöominaisuus on tehokas työkalu web-suunnittelijoille. Sen avulla voit hallita verkkosivustojen elementtien asetteluja minimaalisella tyylillä ja yksinkertaisilla arvoilla, jotka on helppo muistaa.
Mutta mitä kukin näistä arvoista tekee ja miten ne toimivat? Otetaan selvää.
PÄIVÄN VIDEON TEKEMINEN
Mikä on CSS-näytön ominaisuus?
Näyttöominaisuus määrittää verkkosivun HTML-elementeille käytetyn laatikon hahmontamisen tyypin. Tämä johtaa erilaisiin käyttäytymismalleihin, mukaan lukien se, ettei näy ollenkaan. Voit muokata näitä arvoja verkkosivustollasi tyylisivun tai asianmukaisten CSS-muokkausosien kautta CMS-työkalut, kuten WordPress .
Pidä elementit linjassa CSS-näytön kanssa: inline
Leveys- ja korkeusarvot eivät koske elementtiä, jossa on upotettu näyttö; sisällä oleva sisältö määrittää sen mitat. Sisäiset HTML-elementit voivat istua vierekkäin muiden elementtien kanssa ja käyttäytyä kuten a . Inline-näyttöä käytetään yleisimmin tekstiin.
<!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>
Tämä yllä oleva HTML-merkintä ja CSS ovat hyvä esimerkki näytettävästä tekstin sisäisestä arvosta. Yhdessä käytettynä tämä näyttää yhden rivin tekstiä, joka on tehty kahdella eri HTML-elementillä.
Hallitse verkkosivustojen asetteluja CSS-näytöllä: esto
Joillakin tavoilla näyttölohkon arvo on päinvastainen kuin tekstin sisäinen arvo. Korkeus- ja leveysmitat voidaan asettaa, eivätkä elementit, joilla on tämä arvo, voi istua vierekkäin. Yllä olevassa esimerkissä on kaksi elementtiä, joilla on lohkoarvo. Elementit, joiden lohkon näyttöarvo on oletuksena yläelementin enimmäisleveydellä.
<!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>Toisin kuin tekstin sisäinen tyyliesimerkki, tämä näyttölohkoarvoesimerkki jakaa tekstirivit kahdeksi eri riviksi. Sovita sisällön leveys -arvo määrittää elementtien leveyden vastaamaan tekstin pituutta.
Vierekkäiset HTML-elementit CSS-näytöllä: inline-block
CSS-näytön rivinsisäinen lohkoarvo toimii aivan kuten tavallinen riviarvo, mutta sillä on mahdollisuus lisätä tiettyjä ulottuvuuksia. Tämä mahdollistaa ruudukkomaisten asettelujen luomisen ilman, että yläelementtejä on paikallaan. Palatakseni edelliseen esimerkkiin, inline-block-arvon lisääminen mahdollistaa elementtien asettumisen vierekkäin.
<!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>
Inline-block-arvo ei näytä paljon erilaiselta kuin rivin sisäinen arvo. On tärkeää huomata, että voit asettaa elementtien mitat tällä arvolla, mikä helpottaa työskentelyä tietyissä tapauksissa.
Piilota verkkosivuston elementit CSS-näytöllä: ei mitään
Yksinkertaisin näyttöarvo on 'ei mitään'. Tämä arvo piilottaa elementin ja kaikki alielementit sekä marginaalit ja muut välitysominaisuudet. Elementit, joilla on CSS-arvo ei näytä mitään, ovat edelleen näkyvissä selaimen tarkistuksissa.
Luo joustavia ja reagoivia elementtejä CSS-näytöllä: flex
Display flex on yksi uusimmista CSS-asettelutiloista. Kun display flex on pääelementissä, kaikista sen sisällä olevista elementeistä tulee joustavia CSS-elementtejä. Tämän kokoonpanon pääelementti on flexbox.
Flexboxit luovat reagoivia malleja ennalta määritetyillä muuttujilla, kuten leveydellä ja korkeudella. Se kannattaa oppia HTML/CSS flexboxeista ennen kuin aloitat.
<!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> Sijoita Flexboxit vierekkäin Näyttö: inline-flex
Inline-flex käyttäytyy aivan kuten tavallinen flexbox, lisäetuna, että elementti voi istua muiden elementtien vieressä.
<!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>Luo monimutkaisia taulukoita CSS-näytöllä: taulukko
Näyttötaulukon arvo muistuttaa verkkosivustojen suunnittelun vanhoja aikoja. Vaikka useimmat verkkosivustot eivät nykyään käytä taulukoita asetteluissaan, ne ovat silti voimassa tietojen ja sisällön näyttämiseen luettavassa muodossa.
Taulukon arvon lisääminen HTML-elementtiin saa sen toimimaan taulukkoelementtinä, mutta tarvitset lisäarvoja, jotta taulukko toimii oikein.
tukkumyynti tavaroita myytävänä irtotavarana
CSS-näyttö: taulukko-solu
Elementit, joilla on taulukkosoluarvo, toimivat yksittäisinä soluina päätaulukossa. Ja taulukon sarakkeen ja taulukon rivin arvot ryhmittelevät nämä yksittäiset solut yhteen.
CSS-näyttö: taulukko-rivi
Taulukkorivin arvo toimii aivan kuten
CSS-näyttö: taulukko-sarake
Taulukon sarakkeen arvo toimii samalla tavalla kuin taulukon rivin arvo, mutta se ei jaa taulukkoasi. Sen sijaan voit käyttää tätä arvoa lisätäksesi tiettyjä CSS-sääntöjä jo olemassa oleviin sarakkeisiin.
<!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>Luo vierekkäisiä taulukoita CSS-näytöllä: inline-table
Kuten muutkin jo tarkastelemamme upotetut muunnelmat, inline-table mahdollistaa taulukkoelementtien sijoittamisen muiden elementtien viereen.
Luo reagoivia verkkosivustojen asetteluja CSS-näytöllä: ruudukko
CSS-näyttöruudukon arvo on samanlainen kuin taulukon arvo, vain ruudukon sarakkeiden ja rivien koko voi olla joustava. Tämä tekee ruudukoista ihanteellisia verkkosivujen pääasettelun luomiseen. Ne jättävät tilaa täysleveälle ylä- ja alatunnisteelle ja mahdollistavat myös erikokoisten sisältöalueiden.
<!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>
Ristikot ovat samanlaisia kuin flexboxeja, vain ne voivat sijoittaa elementtejä toistensa alle ja viereen. Grid-template-areas-ominaisuus on elintärkeä tätä varten. Kuten koodista näkyy, ylä- ja alatunnistemme vievät neljä tilaa taulukossa, koska ne ovat täysleveitä. Sivupalkit vievät kukin yhden paikan, kun taas sisältö kaksi, jakaa ruudukon keskirivin kolmeen sarakkeeseen.
CSS-näyttö: inline-grid
Inline-grid-arvon käyttäminen mahdollistaa ruudukon sijoittamisen muiden elementtien viereen, aivan kuten muut tämän oppaan rivit.
CSS-näytön käyttö web-suunnitteluun
CSS-näyttöominaisuus tarjoaa kätevän tavan muokata verkkosivuston elementtirakenteita ilman, että sinun tarvitsee muuttaa HTML-merkintöjä. Tämä on ihanteellinen niille, jotka käyttävät sisällönjakelualustoja, kuten Shopify tai WordPress, mutta se voi olla kätevä myös yleisessä web-suunnittelussa.