В процессе веб-разработки часто бывает нужным иметь по-крайней мере базовые знания 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;
Русский