Закажи “Сайт под ключ” и получи

в подарок:

  • Домен !
  • Хостинг !
  • 10% скидки на следующий заказ !

Статьи

Семь правил хорошего тона при верстке сайтов

Чтобы быть верстальщиком нужно соблюдать семь правил тона при верстке сайта и делать свою работу качественно, а главное необходимо придерживаться определенных правил. А ещё, можна заказать верстку сайта у нашего специалиста.

Обязательно применяйте сброс стилей

Браузеры автоматически задают стили очень многим элементам HTML. Так же есть браузеры, которые по-умолчанию могут устанавливать определенные отступы и поля. Для того, чтобы материалы корректно отображались во всех браузерах — нужно не забывать про использование сброса стилей. И тогда не получится так, что в каждом новом браузере будут разные размеры шрифта и высота линии.

Применяйте CSS сокращения

Краткость при задании правил снижает размер файла со стилями и помогает сделать запись намного лучше читаемой. Например, запись:

border: 5px 10px 15px 20px;

выглядит гораздо симпатичнее и понятнее, нежели аналогичная запись:

border-top: 5px;
border-right: 10px;
border-bottom: 15px;
border-left: 20px;

Этот же принцип применим и при определении цвета, вместо #FFFFFF не сложно написать #FFF, а вместо #990055 написать #905.

Комментируйте записи в файле со стилями

Если записей в файле стилей мало — то еще можно разобраться без комментариев, но вот если файл содержит большой объем записей — без комментариев можно вообще не найти нужной строчки даже в собственно-написанном коде. Если для отдельных блоков наборы правил объединить в группы и прокомментировать их, будет очень удобно просматривать файл стилей. Записи, заключенные в два слеша со звездочками, не распознаются браузером:

/****************************************/
/* Sidebar */
/****************************************/

Так же комментарии удобны при использовании правил, например хак для браузера IE6, можно обозначить так:

.sidebar{“свойство”}  /* для IE6 */

Выписывайте используемые цвета

Если файл стилей объемный и содержит большое количество различных цветов исполнения, разумно в начале добавить описание цветов, используя комментирование, о котором упоминалось выше:

/*
/* light blue: #4595be
/* dark blue: #367595
/* special link red: #9F1212
/*

Старайтесь использовать margin, а не padding

Опять таки, такой подход позволит избежать лишние не недопонимание с браузерами, потому что разброс в интерпретировании браузерами свойства padding более велик, чем в случае с отступами (margin). Поэтому если нет подкладочного фона, следуйте этому правилу.

Привыкайте использовать в работе спрайты

Спрайты весьма полезны: они снижают объем http запросов во время загрузки картинок, помогают быстро показывать работу роллеров, делают файл стилей более простым.

Забудьте про em

Гораздо лучше задавать размеры шрифтов в пикселях, чем использовать относительные размеры. Раньше не каждый браузер мог правильно менять размер шрифта при выборе настроек пользователем, тогда было разумно пользоваться относительными размерами. Сейчас же будут только лишние сложности при верстке, например, когда есть каскадность (родительские элементы передают настройки дочерним). Трудно учить HTML язык, закажите сайт под ключ в нашей мастерской по созданию веб-сайтов.

Добавить комментарий