Xiper

Сброс стилей

Автор: Евгений Рыжков Дата публикации:

Проблема

Сделать сброс стилей всех необходимых элементов не используя универсальный селектор (*). О его недостатках было рассмотрено в предыдущей статье «Обнуление отступов».

Решение

Рассмотрим контролируемый сброс стилей. К этому решению пришел Эрик Мейер (Eric Meyer) при содействии Тантека Челика.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; /* обнуляем внешние отступы */
	padding: 0; /* обнуляем внутренние отступы */
	border: 0; /* убираем бордюры */
	outline: 0; /* убираем контуры */
	font-size: 100%; /* задаем базовый размер шрифта, значение по умолчанию = 16px */
	vertical-align: baseline; /* устанавливаем базовое вертикальное выравнивание */
	background: transparent; /* устанавливаем фон прозрачным */
}
body {
	line-height: 1; /* устанавливаем базовую высоту */
}
ol, ul {
	list-style: none; /* убираем маркеры для нумерованных и обычных списков */
}
blockquote, q {
	quotes: none; /* убираем кавычки для цитат */
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: ''; /* убираем */
	content: none; /* и скрываем генерируемое содержимое */
}
:focus {
	outline: 0; /* убираем контуры вокруг ссылок при фокусе */
}
ins {
	text-decoration: none; /* убираем подчеркивание для вставленного текста */
}
del {
	text-decoration: line-through; /* убираем перечеркивание для удаленного текста */
}
table {
	border-collapse: collapse; /* убираем рамки двойной толщины */
	border-spacing: 0; /* убираем расстояние между ячейками */
}

Преимущества:

  • точно можно задать, что нужно
  • избегаем проблем, возникающих с универсальным селектором

Недостатки:

  • для многих небольших проектов — избыточность кода

Имеет смысл данный код подстраивать под каждый свой проект. Например, задавать имя шрифта и его цвет, удалить теги, которые не будут использоваться. Для этого можно использовать сервис «Сборка reset.css»