CSS: маса дизайн. примери за регистрация

Осъществяване маси с CSS - на урок интересна и отговорна. Подход към този бизнес трябва да компетентно, с познания по всички възможни стилове. Освен това, е необходимо да притежават чувство за красота, за да не се плашат от тяхната креативност посетители.

Таблиците могат да преобразят почти всичко. Красив дизайн включва използването на CSS маси дизайн граници, на фона на таблицата, на фона на клетката, разликата между тях и други. Помислете за най-основните.

граница на маса

CSS дизайн маса стил винаги включва игра с граница (рамка). Всички таблици по подразбиране не са контури рамка. Това означава, че е равна на 0 пиксела. Но това може да се коригира от границата на собственост.

Можете да зададете на външната рамка за цялата таблица:

маса {граница: 3px черни; }

Благодарение на тази линия на всички маси в сайта, който използва този стил е черна рамка. Имайте предвид, че само на границата на краищата, но не и вътре в масата. За клетъчни линии и кадър е посочено друго.

ти, TD {граница: 3px черни;}

Дебелината и цвят, можете да посочите такива. Имайте предвид, че границите не се удвоява, когато наставяне клетки.

Думата означава солидна непрекъсната регистрация. Можете да зададете различни стойности.

тя е най-често използваната солидна рамка, тъй като тя изглежда по-привлекателно и не отклони вниманието от основното съдържание на сайта.

граничен имот може да бъде определен и на съвета. Границата може да се настрои само за горната част, долната, лявата или дясната страна. Тъй като в някои случаи това не е осъществим вариант с рамката за цялата таблица наведнъж.

маса {границите горната: 1px твърд червен; }

Така че можете да зададете на рамката за върха на само на масата. Подобно на всички други страни, а не само най-добре пиши: надясно, наляво или отдолу.

глава маса

Таблица глава може да бъде определена с помощта на маркер <надпис>. Този таг може да бъде в CSS да се регистрират много имоти за фина настройка. Дизайнът на CSS таблица е добре, защото е възможно да се маневрира елементите така, както искате.

Това заглавие се изписва по същия начин, като стандарт в книги (като "Таблица 1").

Можете да посочите местоположението на собственост и имущество надпис-страна (горната или долната). Подравняване наляво или надясно се определя от имот текст подравняване.

фонови маси

Предистория на таблицата може да бъде всеки цвят или модел. Цвят определя имот фон-цвят. Имената на имотите в пълно съответствие с приложения в реч. Това улеснява съхраняването много пъти.

Цветът може да бъде определен като име, както и различни кодировки. В допълнение, можете да посочите следното:

• Прозрачен - прозрачна.
• Наследяване - цвят е същият като този на майка елемент.
• Първоначална - по подразбиране.

Вариант с прозрачност може да се използва в случаите, когато всички таблици в текста на CSS файла се правят в един цвят, но в този случай не е необходимо.

В допълнение, на заден план може да е изображение. За да направите това, в стил предписано фон изображение на имота. Пътят е като този:

URL ( "URL")

Пътят до файла може да бъде или относително или абсолютно.

По-сложно за пълнене може да се направи с наклон:

• линеен градиент ();
• радиално-градиент ();
• повтаряне-линеен градиент () и повтаряне-радиален наклон () - градиент повтаря.

фон клетка

В допълнение към фон като цяло, можете да укажете на райета фон в колони или редове. За регистрация на имота се използва много често, тъй като визуално разделяне на редовете по-лесно да се чете информация.

В допълнение към смяната, а вие можете да определите броя на определен ред или колона. Например така:

• TR: тото-дете (дори) {...} - зададени редуваното;
• TR: тото-дете (1) {...} - посочване на свойствата на конкретен ред;
• TD: тото-дете (дори) {...} - индикация за променлив колони;
• TD: тото-дете (1) {...} - посочване на свойствата на конкретен колона.

Освен може да бъде определена последователност и номера - първата (ТД: първо дете) или последен (TD: последната дете).

Разликата между клетките

В CSS, маса дизайн ви позволява да премахнете пространствата между клетките. По подразбиране са те. Например, ако сте задали на рамката в таблицата без да определят разстоянието между границите, той ще бъде тук на този резултат.

Съгласете се, че не изглежда много хубаво и не е удобен за четене. Потребителите ще имат пулсации в очите, тъй като на този. Премахнете тези пропуски могат да бъдат като пишете само такава линия в стил таблица:

гранично-колапс: колапс

Но това се случва и че разстоянието, а напротив, трябва да се увеличи. Освен това, размерът на пролуките могат да бъдат посочени като между колони и между редовете. За да покаже, че на стойност (вместо колапс):

гранично-колапс: отделна

Но такова действие ще покаже, че е необходимо да се отделят клетките. Както беше техният дял, посочен допълнителен имот:

граница между редовете: 20px.

Ако искате да зададете различно разстояние между редовете и колоните, това показва две неща:

граница между редовете: 10px20px.

Разликата в браузърите

Имайте предвид, че в CSS дизайн маси може да изглеждат по различен начин, в зависимост от браузъра. Особено лошо е случаят с по-стари версии, че иновациите в CSS не се поддържа.

Горното е пример за кадрите дебелини на цифрови стойности.

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

кантове също се различават драстично.

Поради това, развитието винаги видите резултата в различни браузъри.

В CSS дизайн маси препоръчва да се провери вида на браузъра. Особено голям проблем да бъде използван за потребители с по-стари версии на Internet Explorer.

Много напреднали разработчиците могат, в зависимост от браузъра, за да се свързват напълно различни CSS файлове. И някой прави проверка на всеки или някакъв определен стил (клас).

Повечето проблеми възникват от сенките.

CSS: Таблица Формат Примери

Регистрация може да бъде доста разнообразна. Всичко зависи от това на целия сайт и неговия дизайн. Всичко трябва да се комбинира и пъстри цветове. Също така тя прави голяма роля и аромат разработчик. Усещане за красота е всичко различно.

Ние даваме няколко примера за различни таблици. Фигурата по-горе показва използването на наклона и играе с цвета на фона и границата.

Много от тях ще бъде интересен пример за красив чист дизайн, който няма да се намали потребителите на окото. Това изпълнение е подходящо в почти всяка ситуация.

Краищата могат да бъдат направени заоблени. Тя изглежда доста приятен.

заключение

Както можете да видите, за появата на масите в CSS има много инструменти. Всеки параметър е също огромно количество опции стойност. Ако всичко това се използват едновременно, можете да създадете шедьоври. Особено ако го направите, адаптивен дизайн за всички браузъри.

Основното нещо в дизайна - не прекалявайте с ефекти. Всичко трябва да се прави с мярка. На първо място, оформлението Обичам да експериментирам и веднага да използват цялата си знания. В резултат на таблицата са пренаситени свойства. Опитайте се да избегнете тези грешки.

Освен това, някои параметри могат да взаимодействат един с друг. Например, не е необходимо да се уточни цвета на фона на таблицата, а ако има все още е настроен фоново изображение, което ще се припокриват с избрания от вас цвят.