Коришћење ЦСС екрана за контролу распореда веб локација

Коришћење ЦСС екрана за контролу распореда веб локација

ЦСС својство приказа је моћан алат за веб дизајнере. Омогућава вам да контролишете изглед елемената веб локације са минималним стилом, са једноставним вредностима које је лако запамтити.





Али шта свака од ових вредности ради и како функционишу? Хајде да сазнамо.





МАКЕУСЕОФ ВИДЕО ДАНА

Шта је својство ЦСС приказа?

Својство дисплаи специфицира тип приказивања оквира који се користи за ХТМЛ елементе на веб страници. Ово доводи до различитих понашања, укључујући и непојављивање. Ове вредности можете да измените на својој веб локацији преко стилског листа или одговарајућих одељака за прилагођавање ЦСС-а ЦМС алати као што је ВордПресс .





Држите елементе у складу са ЦСС приказом: уметнути

  текст са цсс инлине вредношћу

Вредности ширине и висине се не примењују на елемент са инлине приказом; садржај унутар поставља његове димензије. Уграђени ХТМЛ елементи могу да стоје раме уз раме са другим елементима, понашајући се као а <спан> . Дисплаи инлине се најчешће користи за текст.

71Е4ЦБ4Ф618Ц31АФ8853Ц1А035Д0Ц687АА9Б01ЦД

Ова ХТМЛ ознака и ЦСС изнад служе као добар пример вредности за приказ на линији. Када се користи заједно, ово ће приказати један ред текста направљен са два различита ХТМЛ елемента.



Контролишите распореде веб локација са ЦСС приказом: блок

  елементи са цсс блоком приказа

На неки начин, вредност блока приказа је супротна од инлине вредности. Димензије висине и ширине се могу подесити, а елементи са овом вредношћу не могу да седе један поред другог. Пример изнад приказује два елемента са вредношћу блока. Елементи са подразумеваном вредношћу приказа блока на максималној ширини свог родитељског елемента.

0ББ4ДД571А9Б01Ц0Ф2Е445Е3ЕД696ФД3418ЦФЕ7Ц

За разлику од примера уметнутог стила, овај пример вредности блока приказа дели редове текста у два различита реда. Вредност ширине фит-цонтента поставља ширину елемената тако да одговара дужини текста.





Упоредни ХТМЛ елементи са ЦСС приказом: инлине-блоцк

  хтмл елементи са цсс инлине-блок вредношћу

ЦСС вредност инлине-блока за приказ функционише као обична инлине вредност, само са могућношћу додавања одређених димензија. Ово омогућава креирање распореда налик мрежи без постављања родитељских елемената. Враћајући се на претходни пример, додавање вредности инлине-блоцк омогућава елементима да седе један поред другог.

301ДЦД82Д3ДД5Д2ЦД74003А553457Е32981ЕБЕФ7

Вредност инлине-блока се не разликује много од вредности инлине. Важно је напоменути да можете подесити димензије елемената са овом вредношћу, што олакшава рад са њима у одређеним случајевима.





Сакриј елементе веб странице са ЦСС приказом: нема

Најједноставнија приказана вредност је „ноне“. Ова вредност сакрива елемент и све подређене елементе, заједно са маргинама и другим својствима размака. Елементи са ЦСС не приказују вредности још увек су видљиви у оквиру прегледача.

како да видим слику своје куће на Гоогле Еартх -у?

Креирајте флексибилне и прилагодљиве елементе са ЦСС екраном: флек

  цсс дисплаи флекбок

Дисплаи флек је један од најновијих ЦСС режима изгледа. Када је дисплаи флек на родитељском елементу, сви елементи унутар њега постају флексибилни ЦСС елементи. Родитељски елемент у овој конфигурацији је флексбокс.

Флексбоксови креирају прилагодљиве дизајне са унапред дефинисаним варијаблама, као што су ширина и висина. Вреди учење о ХТМЛ/ЦСС флексбоксовима пре него што почнете.

4Б8553АФ011488Б693ББЦ238Б69А5Ф102ЦБФФФАФ

Поставите Флекбокове један поред другог Са дисплејом: инлине-флек

  цсс приказ флекбок са инлине вредношћу

Инлине-флек се понаша као обичан флексбокс, уз додатну предност елемента који може да седи поред других елемената.

377Е64445029699141Ф9Ф552583Е1ЕЦ764Е8Е1ЕБ

Креирајте сложене табеле са ЦСС приказом: табела

  основна хтмл табела направљена помоћу цсс-а

Приказана вредност табеле подсећа на старије дане дизајна веб страница. Иако већина веб локација данас не користи табеле за своје изгледе, оне су и даље важеће за приказивање података и садржаја у читљивом формату.

Додавање вредности табеле ХТМЛ елементу учиниће да се понаша као елемент табеле, али су вам потребне додатне вредности да би ваша табела правилно функционисала.

ЦСС приказ: ћелија-табела

Елементи са вредношћу ћелије табеле делују као појединачне ћелије унутар главне табеле. А вредности колоне табеле и реда табеле групишу ове појединачне ћелије заједно.

ЦСС приказ: табела-ред

Вредност реда табеле функционише исто као <тр> ХТМЛ елемент. Као родитељ елемената са вредношћу ћелије табеле, поделиће вашу табелу у хоризонталне редове.

ЦСС приказ: табела-колона

Вредност колоне табеле функционише слично вредности реда табеле, само што не дели вашу табелу. Уместо тога, можете да користите ову вредност да додате одређена ЦСС правила у различите колоне које већ постоје.

ФФД8А9Д092ЦФ08Ф7439А11Ф12Б2Е453Ц8Ц4ДДД66

Креирајте табеле упоредо са ЦСС приказом: уметнута табела

Као и друге инлине варијанте које смо већ погледали, инлине-табле омогућава постављање елемената табеле поред других елемената.

Изградите прилагодљиве изгледе веб странице са ЦСС приказом: мрежа

  цсс елементи са вредношћу мреже

Вредност ЦСС мреже за приказ је слична вредности у табели, само колоне и редови мреже могу имати флексибилну величину. Ово чини мреже идеалним за креирање главног изгледа за веб странице. Остављају простор за заглавља и подножја пуне ширине, а истовремено омогућавају да имате области садржаја различитих величина.

3ФДФА4АД459А13Е1ФФ754ФЕ98ЕЦ69Д7366АЕ69БА

Мреже су сличне флексбоксовима, само што могу да постављају елементе испод и један поред другог. Својство грид-темплате-ареас је од виталног значаја за ово. Као што видите из кода, наше заглавље и подножје заузимају четири простора у низу, пошто су пуне ширине. Бочне траке заузимају по једно место, док садржај заузима два, ефективно раздвајајући средњи ред мреже у три колоне.

ЦСС приказ: инлине-грид

Коришћење вредности инлине-грид ће омогућити вашој мрежи да седи поред других елемената, баш као и друге инлине вредности у овом водичу.

како играти вов приватни сервер

Коришћење ЦСС екрана за веб дизајн

ЦСС својство приказа нуди згодан начин да прилагодите структуре елемената веб локације без потребе да мењате ХТМЛ ознаке. Ово је идеално за оне који користе платформе за испоруку садржаја као што су Схопифи или ВордПресс, али може бити згодно и за општи веб дизајн.