CSS и дизайн сайта

CSS мобильный дизайн

CSS дизайн сайта

Знаете ли вы об адаптивном или отзывчивом CSS дизайне сайта?

Если вы новичок в изучении Каскадных таблиц стилей (CSS), вам нужно ознакомиться с подробными уроками с примерами, ссылки на которые вы найдете в меню слева. Материал создавался специально для начинающих, поэтому он будет понятен всем без исключения.

Теперь о CSS дизайне. Дизайн сайта с помощью CSS реализуется посредством верстки. Пусть вас не пугает эта не слишком простая формулировка – на самом деле ничего сложного нет ни в верстке, ни в создании дизайна, в том числе дизайна для мобильных устройств: телефонов и планшетов. С вашей стороны потребуется внимание и доля терпения, чтобы исправить возможные ошибки в своей работе. Особое внимание еще в самом начале следует уделить CSS верстке, CSS обтеканию и CSS позиционированию, хотя остальной материал тоже критически важен для полноценного развития в этом интересном деле.

Очень полезным в плане быстрого освоения материала может оказаться разбор CSS дизайна сайта на Wordpress – устанавливаете современную Wordpress тему и смотрите, как организован ее CSS код — таким образом можно стать специалистом высокого уровня, но для этого нужна начальная подготовка, чтобы понять какой атрибут или параметр кода отвечает за ту или иную деталь дизайна.

CSS дизайн сайта для мобильных устройств

В чем отличие дизайна сайта для мобильных устройств от CSS дизайна для стандартных мониторов?

Предлагаю для начала взглянуть на следующий фрагмент CSS кода одного из сайтов на Joomla:

@media (max-width: 480px) {
.item-info > span {display: block}
.blog-item .pull-right.item-image {margin: 0 0 18px 0}
.blog-item .pull-left.item-image {margin: 0 0 18px 0; float: none}
}
@media (max-width: 980px) {

.navbar-fixed-top {margin-bottom: 0 !important}
.item-comment .item-image {display: none}
}
@media (min-width: 768px) and (max-width: 979px) {

#login-form .input-small {width: 62px}
}

Обратите внимание на параметры @media (max-width: 480px) { }, @media (max-width: 980px) { }, @media (min-width: 768px) and (max-width: 979px) { }, выделенные темно-красным цветом. Внутри них расположен обычный CSS код, который сейчас нам не интересен. Что обозначают параметры @media () { }? Они заключают в себе значения, установленные для определенных размеров экранов. Другими словами, если вы просматриваете сайт на небольшом экране, его дизайн будет зависеть от CSS кода, описывающего данный размер. Дизайн этого же сайта на более широком или более узком экране будет зависеть от CSS кода, который относится к данному размеру.

Хорошо! Но как научиться правильно писать CSS код, чтобы создавать профессиональные сайты с красивым дизайном? Ответ прост – создайте сайт на Wordpress или Joomla и внимательно изучите стилевые описания в уже готовом шаблоне. Трудоемко? Да, а как вы хотели?

Автор проекта - Вася Митин | Дата публикации: Январь 2013 | Обновление: Ноябрь 2018

CSS в дизайне сайтов   Современный CSS справочник