CSS-i kuvavara on veebidisainerite jaoks võimas tööriist. See võimaldab teil juhtida veebisaidi elementide paigutust minimaalse stiiliga ja lihtsate väärtustega, mida on lihtne meeles pidada.
Kuid mida need väärtused teevad ja kuidas need toimivad? Uurime välja.
Mis on CSS-i kuvari omadus?
Kuvaatribuut määrab veebilehe HTML-elementide jaoks kasutatava kasti renderdamise tüübi. Selle tulemuseks on mitmesugused käitumisviisid, sealhulgas üldse mitte ilmumine. Saate neid väärtusi oma veebisaidil muuta stiililehe või vastavate CSS-i kohandamise jaotiste kaudu CMS-i tööriistad nagu WordPress.
Hoidke elemendid kooskõlas CSS-kuvaga: sees
Laiuse ja kõrguse väärtused ei kehti tekstisisese kuvaga elemendi kohta; sees olev sisu määrab selle mõõtmed. Tekstisisesed HTML-i elemendid võivad asuda kõrvuti teiste elementidega, käitudes nagu a. Tekstisisest kuvamist kasutatakse kõige sagedamini teksti jaoks.
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri>CSS-i kuvamisväärtused</title>
<stiilis
>
.järjekorras {
ekraan: inline;
fondi suurus: 3rem;
}
#inline-1 {
taustavärv: kollane;
polsterdus: 10px 0px 10px 10px;
}
#inline-2 {
taustavärv: heleroheline;
polsterdus: 10px 10px 10px 0px;
}
</style>
</head>
<keha>
<h1>CSS-ekraani sees</h1>
<div klass="järjekorras" id="inline-1">See on tekst</div>
<div klass="järjekorras" id="inline-2">koos sisemise atribuudi väärtusega.</div>
</body>
</html>
See ülaltoodud HTML-i märgistus ja CSS on hea näide kuvatava tekstisisese väärtuse kohta. Koos kasutamisel kuvatakse üks tekstirida, mis on tehtud kahe erineva HTML-elemendiga.
Veebisaidi paigutuste juhtimine CSS-kuvaga: blokeerimine
Mõnes mõttes on kuvaploki väärtus vastupidine tekstisisesele väärtusele. Kõrguse ja laiuse mõõtmeid saab määrata ning selle väärtusega elemente ei saa kõrvuti istuda. Ülaltoodud näide näitab kahte plokiväärtusega elementi. Elemendid, mille ploki kuvamisväärtus on vaikimisi nende emaelemendi maksimaalses laiuses.
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri>CSS-i kuvamisväärtused</title>
<stiilis>
.plokk {
kuva: plokk;
fondi suurus: 3rem;
laius: sobiv-sisu;
}
#plokk-1 {
taustavärv: kollane;
polsterdus: 10px 10px 10px 10px;
}
#plokk-2 {
taustavärv: heleroheline;
polsterdus: 10px 10px 10px 10px;
}
</style>
</head>
<keha>
<h1>CSS-i kuvaplokk</h1>
<div klass="blokk" id="plokk-1">See on tekst</div>
<div klass="blokk" id="plokk-2">ploki atribuudi väärtusega.</div>
</body>
</html>Erinevalt tekstisisese stiili näitest jagab see kuvamisploki väärtuse näide tekstiread kaheks erinevaks reale. Sobiva sisu laiuse väärtus määrab elementide laiuse, et see vastaks teksti pikkusele.
Kõrvuti asetsevad HTML-elemendid CSS-kuvaga: inline-block
CSS-i kuvamise tekstisisene väärtus töötab nagu tavaline tekstisisene väärtus, ainult koos võimalusega lisada konkreetseid mõõtmeid. See võimaldab luua ruudustikutaolisi paigutusi ilma põhielemente omamata. Eelmise näite juurde tagasi tulles võimaldab inline-block väärtuse lisamine elemendid üksteise kõrvale istuda.
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri>CSS-i kuvamisväärtused</title>
<stiilis>
.inline-blokk {
ekraan: inline-block;
fondi suurus: 3rem;
laius: sobiv-sisu;
}
#inline-block-1 {
taustavärv: kollane;
polsterdus: 10px 10px 10px 10px;
}
#inline-block-2 {
taustavärv: heleroheline;
polsterdus: 10px 10px 10px 10px;
}
</style>
</head>
<keha>
<h1>CSS-ekraani tekstisisene plokk (laius määratud)</h1>
<div klass="inline-plokk" id="inline-block-1">See on tekst</div>
<div klass="inline-plokk" id="inline-block-2">inline-block atribuudiga
väärtus.</div>
</body>
</html>
Inline-block väärtus ei erine oluliselt tekstisisesest väärtusest. Oluline on märkida, et selle väärtusega saate määrata elementide mõõtmed, mis muudab teatud juhtudel töötamise lihtsamaks.
Lihtsaim kuvatav väärtus on "puudub". See väärtus peidab elemendi ja kõik alamelemendid koos veeriste ja muude tühikuomadustega. CSS-i väärtust ei näita elemendid on brauseri inspektorites endiselt nähtavad.
Looge CSS-ekraaniga paindlikke ja reageerivaid elemente: paindlik
Display flex on üks uusimaid CSS-i paigutusrežiime. Kui Display flex on emaelemendil, muutuvad kõik selle sees olevad elemendid paindlikeks CSS-i elementideks. Selle konfiguratsiooni vanemelement on flexbox.
Flexboxid loovad tundliku kujunduse eelmääratletud muutujatega, nagu laius ja kõrgus. See on väärt HTML/CSS flexboxide tundmaõppimine enne kui alustate.
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri>CSS-i kuvamisväärtused</title>
<stiilis>
.flex {
ekraan: flex;
fondi suurus: 3rem;
}
#flex-1 {
taustavärv: kollane;
laius: 40%;
kõrgus: 100 pikslit;
}
#flex-2 {
taustavärv: heleroheline;
laius: 25%;
kõrgus: 100 pikslit;
}
#flex-3 {
taustavärv: helesinine;
laius: 35%;
kõrgus: 100 pikslit;
}
</style>
</head>
<keha>
<h1>CSS Display Flex</h1>
<div klass="painduv">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html>Paigutage Flexboxes kõrvuti Kuvariga: inline-flex
Inline-flex käitub täpselt nagu tavaline flexbox, lisaeelis on see, et element saab istuda teiste elementide kõrval.
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri>CSS-i kuvamisväärtused</title>
<stiilis>
.inline-flex {
ekraan: inline-flex;
fondi suurus: 3rem;
laius: 49.8%;
}
#inline-flex-1 {
taustavärv: kollane;
laius: 40%;
kõrgus: 100 pikslit;
}
#inline-flex-2 {
taustavärv: heleroheline;
laius: 25%;
kõrgus: 100 pikslit;
}
#inline-flex-3 {
taustavärv: helesinine;
laius: 35%;
kõrgus: 100 pikslit;
}
</style>
</head>
<keha>
<h1>CSS-ekraan Inline-Flex</h1>
<div klass="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div klass="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>Looge CSS-kuvaga keerulisi tabeleid: tabel
Kuvatabeli väärtus meenutab vanemaid veebisaitide kujundamise aegu. Kuigi enamik veebisaite ei kasuta tänapäeval oma paigutuste jaoks tabeleid, kehtivad need siiski andmete ja sisu loetavas vormingus kuvamiseks.
Tabeli väärtuse lisamine HTML-i elemendile muudab selle tabeli elemendiks, kuid tabeli nõuetekohaseks toimimiseks on vaja lisaväärtusi.
CSS-ekraan: tabel-lahter
Tabelilahtri väärtusega elemendid toimivad põhitabelis üksikute lahtritena. Ja tabeli-veeru ja tabeli-rea väärtused rühmitavad need üksikud lahtrid kokku.
CSS-ekraan: tabel-rida
Tabelirea väärtus töötab täpselt nagu a
CSS-ekraan: tabel-veerg
Tabeli veeru väärtus töötab sarnaselt tabelirea väärtusega, ainult et see ei jaga teie tabelit osadeks. Selle asemel saate kasutada seda väärtust konkreetsete CSS-reeglite lisamiseks juba olemasolevatesse veergudesse.
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri>CSS-i kuvamisväärtused</title>
<stiilis>
.tabel {
väljapanek: laud;
fondi suurus: 3rem;
}
.päis {
kuva: tabel-päis-rühm;
fondi suurus: 3rem;
}
#veerg-1 {
kuva: tabel-veerg-rühm;
taustavärv: kollane;
}
#veerg-2 {
kuva: tabel-veerg-rühm;
taustavärv: heleroheline;
}
#veerg-3 {
kuva: tabel-veerg-rühm;
taustavärv: helesinine;
}
#rida-1 {
kuva: tabel-rida;
}
#rida-2 {
kuva: tabel-rida;
}
#rida-3 {
kuva: tabel-rida;
}
#kamber {
ekraan: tabel-lahter;
polsterdus: 10px;
laius: 20%;
}
</style>
</head>
<keha>
<h1>CSS-i kuvatabel</h1>
<div klass="laud">
<div id="veerg-1"></div>
<div id="veerg-2"></div>
<div id="veerg-3"></div>
<div klass="päis">
<div id="kamber">Nimi</div>
<div id="kamber">Vanus</div>
<div id="kamber">Riik</div>
</div>
<div id="rida-1">
<div id="kamber">Jeff</div>
<div id="kamber">21</div>
<div id="kamber">USA</div>
</div>
<div id="rida-2">
<div id="kamber">Sue</div>
<div id="kamber">34</div>
<div id="kamber">Hispaania</div>
</div>
<div id="rida-3">
<div id="kamber">Boriss</div>
<div id="kamber">57</div>
<div id="kamber">Singapur</div>
</div>
</div>
</body>
</html>Looge CSS-kuvaga kõrvuti tabeleid: tekstisisene tabel
Nagu teisedki juba vaadeldud tekstisisesed variandid, võimaldab tekstisisene tabel paigutada tabelielemente teiste elementide kõrvale.
Reageerivate veebisaitide paigutuse loomine CSS-ekraaniga: ruudustik
CSS-i kuvaruudustiku väärtus on sarnane tabeli väärtusega, ainult ruudustiku veergude ja ridade suurus võib olla paindlik. See muudab ruudustikud ideaalseks veebilehtede põhipaigutuse loomiseks. Need jätavad ruumi täislaiuses päistele ja jalustele, võimaldades samas ka erineva suurusega sisualasid.
<!DOCTYPE html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri>CSS-i kuvamisväärtused</title>
<stiilis>
.grid {
ekraan: ruudustik;
fondi suurus: 3rem;
ruudustiku malli alad:
'päis päis päise päis'
'vasaku külgriba sisu sisu parempoolse külgriba'
'jalus jalus jalus jalus';
vahe: 10 pikslit;
}
#grid-1 {
grid-area: päis;
taustavärv: kollane;
kõrgus: 100 pikslit;
polsterdus: 20px;
teksti joondamine: keskel;
}
#grid-2 {
ruudustikuala: vasak külgriba;
taustavärv: heleroheline;
kõrgus: 200 pikslit;
polsterdus: 20px;
teksti joondamine: keskel;
}
#grid-3 {
grid-ala: sisu;
taustavärv: helesinine;
kõrgus: 200 pikslit;
polsterdus: 20px;
teksti joondamine: keskel;
}
#grid-4 {
grid-ala: parem-külgriba;
taustavärv: heleroheline;
kõrgus: 200 pikslit;
polsterdus: 20px;
teksti joondamine: keskel;
}
#grid-5 {
grid-ala: jalus;
taustavärv: kollane;
kõrgus: 100 pikslit;
polsterdus: 20px;
teksti joondamine: keskel;
}
</style>
</head>
<keha>
<h1>CSS-ekraani ruudustik</h1>
<div klass="võre">
<div id="võrk-1">Päis</div>
<div id="võrk-2">Vasak külgriba</div>
<div id="võrk-3">Sisu</div>
<div id="võrk-4">Parem külgriba</div>
<div id="võrk-5">Jalus</div>
</div>
</body>
</html>
Võred on sarnased flexboxidega, ainult nende abil saab paigutada elemente üksteise alla ja kõrvale. Ruudustiku-malli-alade atribuut on selleks ülioluline. Nagu koodist näha, võtavad meie päis ja jalus massiivi neli ruumi, kuna need on täislaiused. Külgribad võtavad igaüks ühe pesa, sisu aga kaks, jagades ruudustiku keskmise rea kolmeks veeruks.
CSS-ekraan: inline-grid
Tekstisisese ruudustiku väärtuse kasutamine võimaldab teie ruudustikul asuda teiste elementide kõrval, nagu ka teised selles juhendis olevad tekstisisesed väärtused.
CSS-kuva kasutamine veebidisaini jaoks
CSS-i kuvavara pakub mugavat viisi veebisaidi elementide struktuuride kohandamiseks ilma HTML-i märgistust muutmata. See sobib ideaalselt neile, kes kasutavad sisu edastamise platvorme, nagu Shopify või WordPress, kuid see võib olla kasulik ka üldise veebikujunduse jaoks.
