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.
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="lt">
<galva>
<meta charset="utf-8">
<titulą>CSS rodymo reikšmės</title>
<stilius>
.įdėtas {
ekranas: inline;
šrifto dydis: 3rem;
}
#inline-1 {
fono spalva: geltona;
padding: 10px 0px 10px 10px;
}
#inline-2 {
fono spalva: šviesiai žalia;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<kūnas>
<h1>Įdėtasis CSS ekranas</h1>
<div klasė ="eilutę" id="eilute-1">Tai tekstas</div>
<div klasė ="eilutę" id="eilute-2">su tiesiogine nuosavybės verte.</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="lt">
<galva>
<meta charset="utf-8">
<titulą>CSS rodymo reikšmės</title>
<stilius>
.blokuoti {
ekranas: blokas;
šrifto dydis: 3rem;
plotis: tinka-turinys;
}
#blokas-1 {
fono spalva: geltona;
padding: 10px 10px 10px 10px;
}
#blokas-2 {
fono spalva: šviesiai žalia;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<kūnas>
<h1>CSS ekrano blokas</h1>
<div klasė ="blokas" id="blokas-1">Tai tekstas</div>
<div klasė ="blokas" id="blokas-2">su bloko nuosavybės verte.</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į.
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="lt">
<galva>
<meta charset="utf-8">
<titulą>CSS rodymo reikšmės</title>
<stilius>
.inline-blokas {
ekranas: eilutinis blokas;
šrifto dydis: 3rem;
plotis: tinka-turinys;
}
#inline-block-1 {
fono spalva: geltona;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
fono spalva: šviesiai žalia;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<kūnas>
<h1>CSS ekrano eilutinis blokas (plotis nustatytas)</h1>
<div klasė ="eilutinis blokas" id="eilutinis blokas-1">Tai tekstas</div>
<div klasė ="eilutinis blokas" id="eilutinis blokas-2">su inline-block nuosavybe
vertė.</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.
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="lt">
<galva>
<meta charset="utf-8">
<titulą>CSS rodymo reikšmės</title>
<stilius>
.flex {
ekranas: lankstus;
šrifto dydis: 3rem;
}
#flex-1 {
fono spalva: geltona;
plotis: 40%;
aukštis: 100 pikselių;
}
#flex-2 {
fono spalva: šviesiai žalia;
plotis: 25%;
aukštis: 100 pikselių;
}
#flex-3 {
fono spalva: šviesiai mėlyna;
plotis: 35%;
aukštis: 100 pikselių;
}
</style>
</head>
<kūnas>
<h1>CSS Display Flex</h1>
<div klasė ="lankstus">
<div id="lankstus-1"></div>
<div id="lankstus-2"></div>
<div id="lankstus-3"></div>
</div>
</body>
</html>Padėkite „Flexboxes“ viena šalia kitos Su ekranu: „Inline-flex“.
„Inline-flex“ veikia kaip įprastas „flexbox“, o papildomas pranašumas yra tas, kad elementas gali būti šalia kitų elementų.
<!DOCTYPE html>
<html lang="lt">
<galva>
<meta charset="utf-8">
<titulą>CSS rodymo reikšmės</title>
<stilius>
.inline-flex {
ekranas: inline-flex;
šrifto dydis: 3rem;
plotis: 49.8%;
}
#inline-flex-1 {
fono spalva: geltona;
plotis: 40%;
aukštis: 100 pikselių;
}
#inline-flex-2 {
fono spalva: šviesiai žalia;
plotis: 25%;
aukštis: 100 pikselių;
}
#inline-flex-3 {
fono spalva: šviesiai mėlyna;
plotis: 35%;
aukštis: 100 pikselių;
}
</style>
</head>
<kūnas>
<h1>CSS ekranas Inline-Flex</h1>
<div klasė ="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div klasė ="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 nenaudojamos lentelės, 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 a
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="lt">
<galva>
<meta charset="utf-8">
<titulą>CSS rodymo reikšmės</title>
<stilius>
.lentelė {
ekranas: stalas;
šrifto dydis: 3rem;
}
.antraštė {
ekranas: lentelė-antraštė-grupė;
šrifto dydis: 3rem;
}
#column-1 {
ekranas: lentelė-stulpelis-grupė;
fono spalva: geltona;
}
#column-2 {
ekranas: lentelė-stulpelis-grupė;
fono spalva: šviesiai žalia;
}
#column-3 {
ekranas: lentelė-stulpelis-grupė;
fono spalva: šviesiai mėlyna;
}
#row-1 {
ekranas: lentelė-eilutė;
}
#row-2 {
ekranas: lentelė-eilutė;
}
#row-3 {
ekranas: lentelė-eilutė;
}
#cell {
ekranas: lentelės langelis;
pamušalas: 10px;
plotis: 20%;
}
</style>
</head>
<kūnas>
<h1>CSS rodymo lentelė</h1>
<div klasė ="stalo">
<div id="stulpelis-1"></div>
<div id="stulpelis-2"></div>
<div id="stulpelis-3"></div>
<div klasė ="antraštę">
<div id="ląstelė">vardas</div>
<div id="ląstelė">Amžius</div>
<div id="ląstelė">Šalis</div>
</div>
<div id="eilutė-1">
<div id="ląstelė">Džefas</div>
<div id="ląstelė">21</div>
<div id="ląstelė">JAV</div>
</div>
<div id="eilutė-2">
<div id="ląstelė">iškelti bylą</div>
<div id="ląstelė">34</div>
<div id="ląstelė">Ispanija</div>
</div>
<div id="eilutė-3">
<div id="ląstelė">Borisas</div>
<div id="ląstelė">57</div>
<div id="ląstelė">Singapūras</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ų.
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="lt">
<galva>
<meta charset="utf-8">
<titulą>CSS rodymo reikšmės</title>
<stilius>
.tinklelis {
ekranas: tinklelis;
šrifto dydis: 3rem;
tinklelio šablono sritys:
'header header header header'
'kairiosios šoninės juostos turinio turinys dešinioji šoninė juosta'
'poraštė poraštė poraštė poraštė';
tarpas: 10px;
}
#grid-1 {
tinklelio sritis: antraštė;
fono spalva: geltona;
aukštis: 100 pikselių;
pamušalas: 20px;
teksto lygiavimas: centre;
}
#grid-2 {
tinklelio sritis: kairioji šoninė juosta;
fono spalva: šviesiai žalia;
aukštis: 200 pikselių;
pamušalas: 20px;
teksto lygiavimas: centre;
}
#grid-3 {
tinklelio sritis: turinys;
fono spalva: šviesiai mėlyna;
aukštis: 200 pikselių;
pamušalas: 20px;
teksto lygiavimas: centre;
}
#grid-4 {
tinklelio sritis: dešinė šoninė juosta;
fono spalva: šviesiai žalia;
aukštis: 200 pikselių;
pamušalas: 20px;
teksto lygiavimas: centre;
}
#grid-5 {
tinklelio sritis: poraštė;
fono spalva: geltona;
aukštis: 100 pikselių;
pamušalas: 20px;
teksto lygiavimas: centre;
}
</style>
</head>
<kūnas>
<h1>CSS ekrano tinklelis</h1>
<div klasė ="tinklelis">
<div id="tinklelis-1">Antraštė</div>
<div id="tinklelis-2">Kairioji šoninė juosta</div>
<div id="tinklelis-3">Turinys</div>
<div id="tinklelis-4">Dešinė šoninė juosta</div>
<div id="tinklelis-5">Poraštė</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ą plyšį, o turinys – dvi, todėl vidurinė tinklelio eilutė 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, pvz., „Shopify“ ar „WordPress“, bet gali būti naudinga ir bendram interneto dizainui.
