Home-theater-designers
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.
PÄEVA VIDEO MAKKEUSE
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="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>
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="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>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="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 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.
Peida veebisaidi elemendid CSS-kuvaga: puudub
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.
kuidas teada saada, kas teie mobiiltelefoni koputatakse
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="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> 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="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>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
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.
kõik snapchati karikad
<!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>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="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>
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.