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ää.
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="fi">
<pää>
<meta charset="utf-8">
<otsikko>CSS-näyttöarvot
</title>
<tyyli>
.linjassa {
näyttö: inline;
fontin koko: 3rem;
}
#inline-1 {
taustaväri: keltainen;
täyte: 10px 0px 10px 10px;
}
#inline-2 {
taustaväri: vaaleanvihreä;
täyte: 10px 10px 10px 0px;
}
</style>
</head>
<kehon>
<h1>Sisäänrakennettu CSS-näyttö</h1>
<div class="linjassa" id="rivi-1">Tämä on tekstiä</div>
<div class="linjassa" id="rivi-2">sisäisen omaisuuden arvon kanssa.</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="fi">
<pää>
<meta charset="utf-8">
<otsikko>CSS-näyttöarvot</title>
<tyyli>
.lohko {
näyttö: lohko;
fontin koko: 3rem;
leveys: sovi-sisältö;
}
#block-1 {
taustaväri: keltainen;
täyte: 10px 10px 10px 10px;
}
#block-2 {
taustaväri: vaaleanvihreä;
täyte: 10px 10px 10px 10px;
}
</style>
</head>
<kehon>
<h1>CSS-näyttölohko</h1>
<div class="lohko" id="lohko-1">Tämä on tekstiä</div>
<div class="lohko" id="lohko-2">lohkoominaisuuden arvon kanssa.</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 tekstinsisäinen lohkoarvo toimii aivan kuten tavallinen sisäinen arvo, 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="fi">
<pää>
<meta charset="utf-8">
<otsikko>CSS-näyttöarvot</title>
<tyyli>
.inline-block {
näyttö: inline-block;
fontin koko: 3rem;
leveys: sovi-sisältö;
}
#inline-block-1 {
taustaväri: keltainen;
täyte: 10px 10px 10px 10px;
}
#inline-block-2 {
taustaväri: vaaleanvihreä;
täyte: 10px 10px 10px 10px;
}
</style>
</head>
<kehon>
<h1>CSS-näytön sisäinen lohko (leveys asetettu)</h1>
<div class="inline-lohko" id="rivi-lohko-1">Tämä on tekstiä</div>
<div class="inline-lohko" id="rivi-lohko-2">inline-block-ominaisuuden kanssa
arvo.</div>
</body>
</html>
Inline-block-arvo ei näytä paljon erilaiselta kuin rivin sisäinen arvo. On tärkeää huomata, että voit määrittää elementtien mitat tällä arvolla, mikä helpottaa työskentelyä tietyissä tapauksissa.
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="fi">
<pää>
<meta charset="utf-8">
<otsikko>CSS-näyttöarvot</title>
<tyyli>
.flex {
näyttö: flex;
fontin koko: 3rem;
}
#flex-1 {
taustaväri: keltainen;
leveys: 40 %;
korkeus: 100px;
}
#flex-2 {
taustaväri: vaaleanvihreä;
leveys: 25 %;
korkeus: 100px;
}
#flex-3 {
taustaväri: vaaleansininen;
leveys: 35 %;
korkeus: 100px;
}
</style>
</head>
<kehon>
<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="fi">
<pää>
<meta charset="utf-8">
<otsikko>CSS-näyttöarvot</title>
<tyyli>
.inline-flex {
näyttö: inline-flex;
fontin koko: 3rem;
leveys: 49.8%;
}
#inline-flex-1 {
taustaväri: keltainen;
leveys: 40 %;
korkeus: 100px;
}
#inline-flex-2 {
taustaväri: vaaleanvihreä;
leveys: 25 %;
korkeus: 100px;
}
#inline-flex-3 {
taustaväri: vaaleansininen;
leveys: 35 %;
korkeus: 100px;
}
</style>
</head>
<kehon>
<h1>CSS-näyttö 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.
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
Taulukon rivin arvo toimii kuten a
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="fi">
<pää>
<meta charset="utf-8">
<otsikko>CSS-näyttöarvot</title>
<tyyli>
.pöytä {
näyttö: pöytä;
fontin koko: 3rem;
}
.header {
näyttö: taulukko-otsikko-ryhmä;
fontin koko: 3rem;
}
#sarake-1 {
näyttö: taulukko-sarake-ryhmä;
taustaväri: keltainen;
}
#sarake-2 {
näyttö: taulukko-sarake-ryhmä;
taustaväri: vaaleanvihreä;
}
#sarake-3 {
näyttö: taulukko-sarake-ryhmä;
taustaväri: vaaleansininen;
}
#rivi-1 {
näyttö: taulukko-rivi;
}
#rivi-2 {
näyttö: taulukko-rivi;
}
#rivi-3 {
näyttö: taulukko-rivi;
}
#cell {
näyttö: taulukko-solu;
täyte: 10px;
leveys: 20 %;
}
</style>
</head>
<kehon>
<h1>CSS-näyttötaulukko</h1>
<div class="pöytä">
<div id="sarake-1"></div>
<div id="sarake-2"></div>
<div id="sarake-3"></div>
<div class="otsikko">
<div id="solu">Nimi</div>
<div id="solu">Ikä</div>
<div id="solu">Maa</div>
</div>
<div id="rivi-1">
<div id="solu">Jeff</div>
<div id="solu">21</div>
<div id="solu">USA</div>
</div>
<div id="rivi-2">
<div id="solu">Sue</div>
<div id="solu">34</div>
<div id="solu">Espanja</div>
</div>
<div id="rivi-3">
<div id="solu">Boris</div>
<div id="solu">57</div>
<div id="solu">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="fi">
<pää>
<meta charset="utf-8">
<otsikko>CSS-näyttöarvot</title>
<tyyli>
.grid {
näyttö: ruudukko;
fontin koko: 3rem;
grid-template-alueet:
'header header header header'
'vasemman sivupalkin sisällön sisältö oikea sivupalkki'
'alatunniste alatunniste alatunniste alatunniste';
väli: 10px;
}
#grid-1 {
ruudukko-alue: otsikko;
taustaväri: keltainen;
korkeus: 100px;
täyte: 20px;
tekstin tasaus: keskellä;
}
#grid-2 {
ruudukkoalue: vasen sivupalkki;
taustaväri: vaaleanvihreä;
korkeus: 200px;
täyte: 20px;
tekstin tasaus: keskellä;
}
#grid-3 {
ruudukko-alue: sisältö;
taustaväri: vaaleansininen;
korkeus: 200px;
täyte: 20px;
tekstin tasaus: keskellä;
}
#grid-4 {
ruudukkoalue: oikea sivupalkki;
taustaväri: vaaleanvihreä;
korkeus: 200px;
täyte: 20px;
tekstin tasaus: keskellä;
}
#grid-5 {
ruudukko-alue: alatunniste;
taustaväri: keltainen;
korkeus: 100px;
täyte: 20px;
tekstin tasaus: keskellä;
}
</style>
</head>
<kehon>
<h1>CSS-näyttöruudukko</h1>
<div class="ruudukko">
<div id="ruudukko-1">Otsikko</div>
<div id="ruudukko-2">Vasen sivupalkki</div>
<div id="ruudukko-3">Sisältö</div>
<div id="ruudukko-4">Oikea sivupalkki</div>
<div id="ruudukko-5">Alatunniste</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.
