ЦСС својство приказа је моћан алат за веб дизајнере. Омогућава вам да контролишете изглед елемената веб локације са минималним стилом, са једноставним вредностима које се лако памте.
Али шта свака од ових вредности ради и како функционишу? Хајде да сазнамо.
Шта је својство ЦСС приказа?
Својство дисплаи специфицира тип приказивања оквира који се користи за ХТМЛ елементе на веб страници. Ово доводи до различитих понашања, укључујући и непојављивање. Ове вредности можете да измените на својој веб локацији преко стилског листа или одговарајућих одељака за прилагођавање ЦСС-а ЦМС алати као што је ВордПресс.
Држите елементе у складу са ЦСС приказом: уметнути
Вредности ширине и висине се не примењују на елемент са инлине приказом; садржај унутар поставља његове димензије. Уграђени ХТМЛ елементи могу да стоје раме уз раме са другим елементима, понашајући се као а. Дисплаи инлине се најчешће користи за текст.
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов>ЦСС приказане вредности
</title>
<стил>
.у реду {
дисплаи: инлине;
величина фонта: 3рем;
}
#инлине-1 {
боја позадине: жута;
паддинг: 10пк 0пк 10пк 10пк;
}
#инлине-2 {
боја позадине: светлозелена;
паддинг: 10пк 10пк 10пк 0пк;
}
</style>
</head>
<тело>
<х1>ЦСС Дисплаи Инлине</h1>
<див цласс="у реду" ид="инлине-1">Ово је текст</div>
<див цласс="у реду" ид="инлине-2">са инлине вредношћу својства.</div>
</body>
</html>
Ова ХТМЛ ознака и ЦСС изнад служе као добар пример вредности за приказ на линији. Када се користи заједно, ово ће приказати један ред текста направљен са два различита ХТМЛ елемента.
Контролишите распореде веб локација са ЦСС приказом: блок
На неки начин, вредност блока приказа је супротна од инлине вредности. Димензије висине и ширине се могу подесити, а елементи са овом вредношћу не могу да седе један поред другог. Пример изнад приказује два елемента са вредношћу блока. Елементи са подразумеваном вредношћу приказа блока на максималној ширини свог родитељског елемента.
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов>ЦСС приказане вредности</title>
<стил>
.блокирати {
дисплеј блок;
величина фонта: 3рем;
ширина: фит-цонтент;
}
#блоцк-1 {
боја позадине: жута;
паддинг: 10пк 10пк 10пк 10пк;
}
#блоцк-2 {
боја позадине: светлозелена;
паддинг: 10пк 10пк 10пк 10пк;
}
</style>
</head>
<тело>
<х1>ЦСС Дисплаи Блоцк</h1>
<див цласс="блокирати" ид="блок-1">Ово је текст</div>
<див цласс="блокирати" ид="блок-2">са вредношћу својства блока.</div>
</body>
</html>За разлику од примера уметнутог стила, овај пример вредности блока приказа дели редове текста у два различита реда. Вредност ширине фит-цонтента поставља ширину елемената тако да одговара дужини текста.
Упоредни ХТМЛ елементи са ЦСС приказом: инлине-блоцк
ЦСС вредност инлине-блока за приказ функционише као обична инлине вредност, само са могућношћу додавања одређених димензија. Ово омогућава креирање распореда налик мрежи без постављања родитељских елемената. Враћајући се на претходни пример, додавање вредности инлине-блоцк омогућава елементима да седе један поред другог.
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов>ЦСС приказане вредности</title>
<стил>
.инлине-блоцк {
дисплеј: инлине-блоцк;
величина фонта: 3рем;
ширина: фит-цонтент;
}
#инлине-блоцк-1 {
боја позадине: жута;
паддинг: 10пк 10пк 10пк 10пк;
}
#инлине-блоцк-2 {
боја позадине: светлозелена;
паддинг: 10пк 10пк 10пк 10пк;
}
</style>
</head>
<тело>
<х1>ЦСС Дисплаи Инлине-Блоцк (подешена ширина)</h1>
<див цласс="инлине-блоцк" ид="инлине-блоцк-1">Ово је текст</div>
<див цласс="инлине-блоцк" ид="инлине-блоцк-2">са својством инлине-блоцк
вредност.</div>
</body>
</html>
Вредност инлине-блока се не разликује много од вредности инлине. Важно је напоменути да можете подесити димензије елемената са овом вредношћу, што олакшава рад са њима у одређеним случајевима.
Најједноставнија приказана вредност је „ноне“. Ова вредност сакрива елемент и све подређене елементе, заједно са маргинама и другим својствима размака. Елементи са ЦСС не приказују вредности још увек су видљиви у оквиру прегледача.
Креирајте флексибилне и прилагодљиве елементе са ЦСС екраном: флек
Дисплаи флек је један од најновијих ЦСС режима изгледа. Када је дисплаи флек на родитељском елементу, сви елементи унутар њега постају флексибилни ЦСС елементи. Родитељски елемент у овој конфигурацији је флексбокс.
Флексбоксови креирају прилагодљиве дизајне са унапред дефинисаним варијаблама, као што су ширина и висина. Вреди учење о ХТМЛ/ЦСС флексбоксовима пре него што почнете.
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов>ЦСС приказане вредности</title>
<стил>
.флек {
дисплеј: флек;
величина фонта: 3рем;
}
#флек-1 {
боја позадине: жута;
ширина: 40%;
висина: 100пк;
}
#флек-2 {
боја позадине: светлозелена;
ширина: 25%;
висина: 100пк;
}
#флек-3 {
боја позадине: светлоплава;
ширина: 35%;
висина: 100пк;
}
</style>
</head>
<тело>
<х1>ЦСС Дисплаи Флек</h1>
<див цласс="флек">
<див ид="флек-1"></div>
<див ид="флек-2"></div>
<див ид="флек-3"></div>
</div>
</body>
</html>Поставите Флекбокове један поред другог Са дисплејом: инлине-флек
Инлине-флек се понаша као обичан флексбокс, уз додатну предност елемента који може да седи поред других елемената.
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов>ЦСС приказане вредности</title>
<стил>
.инлине-флек {
дисплеј: инлине-флек;
величина фонта: 3рем;
ширина: 49.8%;
}
#инлине-флек-1 {
боја позадине: жута;
ширина: 40%;
висина: 100пк;
}
#инлине-флек-2 {
боја позадине: светлозелена;
ширина: 25%;
висина: 100пк;
}
#инлине-флек-3 {
боја позадине: светлоплава;
ширина: 35%;
висина: 100пк;
}
</style>
</head>
<тело>
<х1>ЦСС Дисплаи Инлине-Флек</h1>
<див цласс="инлине-флек">
<див ид="инлине-флек-1"></div>
<див ид="инлине-флек-2"></div>
<див ид="инлине-флек-3"></div>
</div>
<див цласс="инлине-флек">
<див ид="инлине-флек-1"></div>
<див ид="инлине-флек-2"></div>
<див ид="инлине-флек-3"></div>
</div>
</body>
</html>Креирајте сложене табеле са ЦСС приказом: табела
Приказана вредност табеле подсећа на старије дане дизајна веб страница. Иако већина веб локација данас не користи табеле за своје изгледе, оне су и даље важеће за приказивање података и садржаја у читљивом формату.
Додавање вредности табеле ХТМЛ елементу учиниће да се понаша као елемент табеле, али су вам потребне додатне вредности да би ваша табела правилно функционисала.
ЦСС приказ: ћелија-табела
Елементи са вредношћу ћелије табеле делују као појединачне ћелије унутар главне табеле. А вредности колоне табеле и реда табеле групишу ове појединачне ћелије заједно.
ЦСС приказ: табела-ред
Вредност реда табеле функционише исто као а
ЦСС приказ: табела-колона
Вредност колоне табеле функционише слично вредности реда табеле, само што не дели вашу табелу. Уместо тога, можете да користите ову вредност да додате одређена ЦСС правила у различите колоне које већ постоје.
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов>ЦСС приказане вредности</title>
<стил>
.сто {
дисплеј: сто;
величина фонта: 3рем;
}
.хеадер {
приказ: табеле-хеадер-гроуп;
величина фонта: 3рем;
}
#цолумн-1 {
приказ: табела-колона-група;
боја позадине: жута;
}
#цолумн-2 {
приказ: табела-колона-група;
боја позадине: светлозелена;
}
#цолумн-3 {
приказ: табела-колона-група;
боја позадине: светлоплава;
}
#ред-1 {
приказ: табела-ред;
}
#ред-2 {
приказ: табела-ред;
}
#ред-3 {
приказ: табела-ред;
}
#ћелија {
дисплеј: ћелија-табела;
паддинг: 10пк;
ширина: 20%;
}
</style>
</head>
<тело>
<х1>ЦСС приказ табеле</h1>
<див цласс="сто">
<див ид="колона-1"></div>
<див ид="колона-2"></div>
<див ид="колона-3"></div>
<див цласс="заглавље">
<див ид="ћелија">Име</div>
<див ид="ћелија">Старост</div>
<див ид="ћелија">Држава</div>
</div>
<див ид="ред-1">
<див ид="ћелија">Јефф</div>
<див ид="ћелија">21</div>
<див ид="ћелија">сад</div>
</div>
<див ид="ред-2">
<див ид="ћелија">Суе</div>
<див ид="ћелија">34</div>
<див ид="ћелија">Спаин</div>
</div>
<див ид="ред-3">
<див ид="ћелија">Борис</div>
<див ид="ћелија">57</div>
<див ид="ћелија">Сингапур</div>
</div>
</div>
</body>
</html>Креирајте табеле упоредо са ЦСС приказом: уметнута табела
Као и друге инлине варијанте које смо већ погледали, инлине-табле омогућава постављање елемената табеле поред других елемената.
Направите респонзивне изгледе веб странице са ЦСС приказом: мрежа
Вредност ЦСС мреже за приказ је слична вредности у табели, само колоне и редови мреже могу имати флексибилну величину. Ово чини мреже идеалним за креирање главног изгледа за веб странице. Остављају простор за заглавља и подножја пуне ширине, а истовремено омогућавају да имате области садржаја различитих величина.
<!ДОЦТИПЕ хтмл>
<хтмл ланг="ен">
<глава>
<мета цхарсет="утф-8">
<наслов>ЦСС приказане вредности</title>
<стил>
.грид {
приказ: мрежа;
величина фонта: 3рем;
грид-темплате-ареас:
'заглавље заглавље заглавље заглавље'
'садржај леве бочне траке са десне стране'
'фоотер фоотер фоотер фоотер';
размак: 10пк;
}
#грид-1 {
грид-ареа: хеадер;
боја позадине: жута;
висина: 100пк;
паддинг: 20пк;
тект-алигн: центар;
}
#грид-2 {
грид-ареа: лева бочна трака;
боја позадине: светлозелена;
висина: 200пк;
паддинг: 20пк;
тект-алигн: центар;
}
#грид-3 {
грид-ареа: садржај;
боја позадине: светлоплава;
висина: 200пк;
паддинг: 20пк;
тект-алигн: центар;
}
#грид-4 {
грид-ареа: десна бочна трака;
боја позадине: светлозелена;
висина: 200пк;
паддинг: 20пк;
тект-алигн: центар;
}
#грид-5 {
грид-ареа: подножје;
боја позадине: жута;
висина: 100пк;
паддинг: 20пк;
тект-алигн: центар;
}
</style>
</head>
<тело>
<х1>ЦСС Мрежа приказа</h1>
<див цласс="грид">
<див ид="грид-1">Хеадер</div>
<див ид="грид-2">Лева бочна трака</div>
<див ид="грид-3">Садржај</div>
<див ид="грид-4">Десна бочна трака</div>
<див ид="грид-5">Подножје</div>
</div>
</body>
</html>
Мреже су сличне флексбоксовима, само што могу да постављају елементе испод и један поред другог. Својство грид-темплате-ареас је од виталног значаја за ово. Као што видите из кода, наше заглавље и подножје заузимају четири простора у низу, пошто су пуне ширине. Бочне траке заузимају по једно место, док садржај заузима два, ефективно раздвајајући средњи ред мреже у три колоне.
ЦСС приказ: инлине-грид
Коришћење вредности инлине-грид ће омогућити вашој мрежи да седи поред других елемената, баш као и друге инлине вредности у овом водичу.
Коришћење ЦСС екрана за веб дизајн
ЦСС својство приказа нуди згодан начин да прилагодите структуре елемената веб локације без потребе да мењате ХТМЛ ознаке. Ово је идеално за оне који користе платформе за испоруку садржаја као што су Схопифи или ВордПресс, али може бити згодно и за општи веб дизајн.