CSS: дизајн на маси. Примери за дизајн

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

Во табели може да се трансформира речиси сè. Прекрасниот дизајн на табелите CSS значи користење на дизајнот на границите, позадината на табелата, позадината на клетките, јазот меѓу нив и многу повеќе. Да ги разгледаме најосновните.

Граница на маса

CSS стилот на дизајнот секогаш значи играње со граница. Сите табели се стандардно не граничи. Тоа е, тоа е 0 пиксели. Но, ова може да се дефинира со користење на имотот на границата.

Можете да наведете надворешна граница за целата табела:

Табела {border: 3px solid црна; }

Благодарение на оваа линија, сите табели на местото каде што се користи овој стил ќе имаат црна граница. Имајте на ум дека границата е само на рабовите, но не и во табелата. За ќелии и редови, рамката е наведена поинаку.

Th, td {граница: 3px солидна црна боја;}

Можете да наведете каква било дебелина и боја. Имајте на ум дека границите не се дуплираат кога докинг клетки.

Зборот солиден значи солиден дизајн. Можете да наведете други вредности.

Најчесто се користи цврста рамка, бидејќи изгледа попривлечно и не го одвлекува вниманието од главната содржина на страницата.

Имотот на границата исто така може да се наведе во насоките. Границата може да се постави само за горната, долната, левата или десната страна. Бидејќи во некои случаи опцијата со рамка за целата маса не се вклопува веднаш.

Табела {border-top: 1px solid red; }

Така можете да ја поставите рамката само за врвот на табелата. Слично на тоа, за сите други партии, едноставно наместо на врвот пишувајте: десно, лево или од дното.

Наслов на табелата

Насловот на табелата може да биде наведен со користење на ознаката . Во оваа ознака, можете да напишете во CSS многу својства за да добиете повеќе фино подесување. Во CSS, дизајнот на табели е добар, бидејќи можете да маневрирате со елементи како што сакате.

Ова заглавие е прикажано на ист начин како што е стандардно во книгите (на пример "Табела 1").

Исто така можете да ја наведете локацијата на овој заглавие со имотот на натписот (горе или долу). Левото или десното усогласување е одредено од сопственоста на текстот.

Табела позадина

Позадината на табелата може да биде која било боја или модел. Бојата е поставена од имотот во боја на позадина. Имињата на својствата целосно одговараат на оние што се користат во говорот. Ова го олеснува зачувувањето многу пати.

Бојата може да се наведе и по име и со различни кодови. Покрај тоа, можете да го наведете следново:

• Транспарентен - транспарентноста на елементот.
• Наследи - бојата е иста како родителскиот елемент.
• Почетната вредност е стандардна вредност.

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

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

URL ('URL')

Патеката до датотеката може да биде релативна или апсолутна.

Посложен пополнување може да се направи со градиент:

• Линеарен градиент ();
• Радијален градиент ();
• Повторувачки-линеарен градиент () и повторувачки-радиален градиент () - повторување на градиентот.

Мобилна позадина

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

Покрај преплетувањето, можете да го наведете бројот на одредена колона или ред. На пример, вака:

• Tr: nth-child (дури) {...} - наведете ја алтернацијата на линиите;
• Tr: nth-child (1) {...} - го одредува имотот на одредена низа;
• Td: nth-child (дури) {...} - индикација за алтернација на колоните;
• Td: nth-child (1) {...} - го одредува својството на одредена колона.

Во прилог на интерлевање и броеви, можете да го одредите првиот (td: first-child) или последниот (td: last-child).

Растојание меѓу клетките

Во CSS, дизајнот на табели ви овозможува да ги отстраните празнините помеѓу клетките. Стандардно, тие се. На пример, ако поставите рамка во табела без да го поставите растојанието меѓу границите, тогаш ќе има таков резултат.

Се согласувам, не изгледа многу убаво и не е погодно за читање. Корисниците ќе бидат во очите на око поради тоа. Можете да ги отстраните овие празнини со пишување на следново во стилот на табелата:

Граничен колапс: колапс

Но, исто така, се случува дека растојанието, напротив, треба да се зголеми. И големината на интервалите може да биде одредена и помеѓу колоните и помеѓу линиите. За да го направите ова, наведете ја следната вредност (наместо колапс):

Пограничен колапс: посебен

Но, оваа акција ќе укаже дека треба да ги одделите ќелиите. Како да ги одделите, се означува со дополнителна сопственост:

Граница-растојание: 20px.

Ако сакате да наведете различно растојание помеѓу редовите и колоните, тогаш се назначени две вредности:

Пограничен проред: 10px20px.

Разликата во прелистувачите

Имајте на ум дека во CSS, изгледот на табелите може да изгледа различно, во зависност од прелистувачот. Ситуацијата е особено лоша кај постарите верзии, кои иновациите во CSS не поддржуваат.

Над е пример за дебелината на рамката за дигитални вредности.

Еве пример за дебелината на рамката за константи.

Стилови на рамка се исто така многу различни.

Затоа, кога се развива, секогаш гледај го резултатот во различни прелистувачи.

Во CSS, се препорачува да се направи табела дизајн со проверка на видот на прелистувачот. Најголем проблем беше кај корисниците со постари верзии на Internet Explorer.

Многу напредни развивачи можат да се поврзат сосема различни CSS-датотеки во зависност од прелистувачот. И некој не проверува во секој или некој посебен стил (класа).

Повеќето проблеми се појавуваат со сенки.

CSS: дизајн на табели, примери

Дизајнот може да биде многу разновиден. Сето тоа зависи од местото во целина и неговиот дизајн. Сè треба да се комбинираат и да не се шарени. Исто така, вкусот на инвеститорот исто така игра голема улога. Чувството на убавина е различно за секого.

Ние даваме примери од различни табели. Сликата погоре покажува користење на навалување и игра со позадина и боја на границите.

Многумина ќе бидат заинтересирани за пример за прекрасен уреден дизајн кој нема да ги намали очите за корисниците. Оваа опција е соодветна во речиси секоја ситуација.

Рабовите може да се заокружат. Изгледа прилично убаво.

Заклучок

Како што можете да видите, за да креирате изглед на табели во CSS има огромен број на алатки. Секој параметар, исто така, има огромен број варијанти на вредности. Ако го користите сето ова одеднаш, можете да создадете ремек-дела. Особено ако направите адаптивен дизајн за сите прелистувачи.

Главната работа при дизајнирањето - не претерувајте со ефекти. Сè мора да се направи со умереност. Во почетокот дизајнерите на дизајнот сакаат да експериментираат и да ги користат сите нивни знаења одеднаш. Како резултат на тоа, табелите се презаситни својства. Обидете се да ги избегнувате овие грешки.

Покрај тоа, некои параметри можат да се мешаат едни со други. На пример, нема потреба да ја одредите бојата на позадината на табелата, ако во исто време има позадинска слика што ќе се преклопува со одредената боја.