Home-theater-designers
CSS rodymo nuosavybė yra galingas žiniatinklio dizainerių įrankis. Tai leidžia valdyti svetainės elementų išdėstymą su minimaliu stiliumi ir paprastomis vertėmis, kurias lengva įsiminti.
Bet ką daro kiekviena iš šių vertybių ir kaip jos veikia? Išsiaiškinkime.
DIENOS VAIZDO ĮRAŠO PAGALBA
Kas yra CSS ekrano ypatybė?
Rodymo ypatybė nurodo laukelio atvaizdavimo tipą, naudojamą HTML elementams tinklalapyje. Dėl to atsiranda įvairus elgesys, įskaitant išvis nepasirodymą. Šias reikšmes galite redaguoti savo svetainėje naudodami stiliaus lapą arba atitinkamas CSS tinkinimo skiltis TVS įrankiai, tokie kaip „WordPress“. .
Laikykite elementus vienoje linijoje su CSS ekranu: įtraukta
Pločio ir aukščio reikšmės netaikomos elementui su įterptu ekranu; viduje esantis turinys nustato jo matmenis. Įterptieji HTML elementai gali būti greta kitų elementų ir veikti kaip a . Ekrano įterptinis dažniausiai naudojamas tekstui.
<!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>
Šis HTML žymėjimas ir CSS aukščiau yra geras rodomos eilutės reikšmės pavyzdys. Naudojant kartu, bus rodoma viena teksto eilutė, sudaryta iš dviejų skirtingų HTML elementų.
Valdykite svetainės maketus su CSS ekranu: blokuoti
Kai kuriais atžvilgiais rodymo bloko reikšmė yra priešinga eilutei. Galima nustatyti aukščio ir pločio matmenis, o elementai su šia verte negali būti vienas šalia kito. Aukščiau pateiktame pavyzdyje rodomi du elementai su bloko reikšme. Elementai, kurių numatytoji bloko rodymo reikšmė yra didžiausio pirminio elemento pločio.
<!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>Skirtingai nuo eilutinio stiliaus pavyzdžio, šis rodymo bloko vertės pavyzdys padalija teksto eilutes į dvi skirtingas eilutes. Turinio pločio vertė nustato elementų plotį, kad jis atitiktų teksto ilgį.
kaip skaityti „Mac“ standųjį diską „Windows“
Side-by-Side HTML elementai su CSS ekranu: eilutinis blokas
CSS rodymo eilutinio bloko reikšmė veikia taip pat, kaip įprasta eilutinė reikšmė, tik su galimybe pridėti konkrečius matmenis. Tai leidžia kurti tinklelį primenančius išdėstymus neįdėjus pirminių elementų. Grįžtant prie ankstesnio pavyzdžio, pridėjus eilutinio bloko reikšmę elementai gali būti vienas šalia kito.
<!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 reikšmė nelabai skiriasi nuo įterptosios vertės. Svarbu pažymėti, kad naudodami šią reikšmę galite nustatyti elementų matmenis, kad tam tikrais atvejais būtų lengviau dirbti.
kas yra fono programos atnaujinimas „iPhone“
Slėpti svetainės elementus su CSS ekranu: nėra
Paprasčiausia rodoma reikšmė yra „nėra“. Ši reikšmė paslepia elementą ir visus antrinius elementus, taip pat paraštes ir kitas tarpų savybes. Elementai su CSS nerodo jokios reikšmės vis tiek matomi naršyklės tikrintuvuose.
Sukurkite lanksčius ir reaguojančius elementus naudodami CSS ekraną: lankstus
„Display flex“ yra vienas iš naujausių CSS išdėstymo režimų. Kai ekrano lankstumas yra pirminiame elemente, visi jo viduje esantys elementai tampa lanksčiais CSS elementais. Šios konfigūracijos pirminis elementas yra „flexbox“.
Flexboxes sukuria jautrų dizainą su iš anksto nustatytais kintamaisiais, tokiais kaip plotis ir aukštis. Verta mokymasis apie HTML/CSS lanksčiuosius dėžutes prieš pradėdami.
<!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> Padėkite „Flexboxes“ viena šalia kitos Su ekranu: „Inline-flex“.
„Inline-flex“ veikia kaip įprastas „flexbox“, o papildomas privalumas yra tas, kad elementas gali būti šalia kitų elementų.
<!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>Sukurkite sudėtingas lenteles su CSS ekranu: lentelė
Rodoma lentelės reikšmė primena senesnius svetainių dizaino laikus. Nors šiandien daugumos svetainių išdėstymui lentelės nenaudojamos, jos vis tiek galioja duomenims ir turiniui rodyti skaitomu formatu.
Pridėjus lentelės vertę prie HTML elemento, jis veiks kaip lentelės elementas, tačiau jums reikia papildomų verčių, kad lentelė veiktų tinkamai.
CSS ekranas: lentelės langelis
Elementai su lentelės langelio verte pagrindinėje lentelėje veikia kaip atskiri langeliai. Ir lentelės stulpelio ir lentelės eilutės reikšmės sugrupuoja šiuos atskirus langelius.
CSS ekranas: lentelė-eilutė
Lentelės eilutės reikšmė veikia kaip
CSS ekranas: lentelė-stulpelis
Lentelės stulpelio reikšmė veikia panašiai kaip lentelės eilutės reikšmė, tik ji nepaskirsto jūsų lentelės. Vietoj to galite naudoti šią reikšmę, kad pridėtumėte konkrečias CSS taisykles į skirtingus jau esančius stulpelius.
<!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>Sukurkite greta esančias lenteles su CSS ekranu: eilutinė lentelė
Kaip ir kiti įterptieji variantai, kuriuos jau peržiūrėjome, įterptoji lentelė leidžia lentelės elementus sudėti šalia kitų elementų.
yra tiktok uždrausta JAV
Kurkite interaktyvius svetainės maketus naudodami CSS ekraną: tinklelį
CSS rodymo tinklelio reikšmė yra panaši į lentelės vertę, tik tinklelio stulpelių ir eilučių dydis gali būti lankstus. Dėl to tinkleliai idealiai tinka kuriant pagrindinį tinklalapių išdėstymą. Jie palieka vietos viso pločio antraštėms ir poraštėms, taip pat leidžia turėti įvairaus dydžio turinio sritis.
<!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>
Tinkleliai yra panašūs į lanksčiuosius dėžutes, tik jie gali sudėti elementus po ir šalia vienas kito. Tam gyvybiškai svarbi tinklelio-šablono sričių savybė. Kaip matote iš kodo, mūsų antraštė ir poraštė užima keturias vietas masyve, nes yra viso pločio. Šoninės juostos užima po vieną angą, o turinys – dvi, todėl vidurinė tinklelio eilė yra padalinta į tris stulpelius.
CSS ekranas: tiesioginis tinklelis
Naudodami įterptosios tinklelio reikšmę tinklelis bus šalia kitų elementų, kaip ir kitos įterptosios reikšmės šiame vadove.
CSS ekrano naudojimas žiniatinklio dizainui
CSS rodymo ypatybė yra patogus būdas koreguoti svetainės elementų struktūras nekeičiant HTML žymėjimo. Tai idealiai tinka tiems, kurie naudojasi turinio pristatymo platformomis, tokiomis kaip „Shopify“ ar „WordPress“, tačiau taip pat gali būti naudinga kuriant bendrą interneto dizainą.