Изучаем CSS — принципы верстки

В процессе веб-разработки часто бывает нужным иметь по-крайней мере базовые знания CSS. Конечно, есть Bootstrap, а также в интернет можно найти много на эту тему, но мне были интересны принципы, которые применяют в своей работе опытные верстальщики — так сказать, стандарты де-факто. Сказано — сделано, и я записался на курс верстальщика к специалистам MediaSapiens.

Данный цикл статей будет содержать информацию по теме CSS верстки, полученную в процессе изучения, что может стать подспорьем при самостоятельном изучении или шпаргалкой при работе с CSS..

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

Элементы h1..h6, p, body изначально уже имеют свои собственные отступы (margin), отличающиеся в разных браузерах. Если вам важно иметь один вид сайта в разных браузерах, вам нужно переопределить их.

Базовые стили текста определяем для body — они будут унаследованы другими элементами.

Отступы для текста добавляем только снизу. Padding добавляем вышестоящему элементу (родителю).

line-height используем равным 1.3 от font-size, если не указано иначе.

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

Используйте короткую запись. Например одна строка

font: normal 14px/20px arial, sans-serif;

может заменить блок

font-weight: normal;
 font-size: 14px;
 line-height: 20px;
 font-family: arial, sans-serif;

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *