css-reset.jpgДля чего нужен так называемый CSS reset? CSS reset — это в переводе называется сброс CSS стилей. Необходимо это только для верстальщиков, которые переводят макеты сайтов в HTML код.

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов, нам их и надо сбросить, чтобы сайты отображались одинаково во всех браузерах.

Самый распространенный вариант сброса стилей это такой код:

* {padding: 0; margin: 0}

Звездочка — универсальный селектор, который перебирает все теги по порядку. И иногда использует намного больше ресурсов компьютера, поэтому опытные верстальщики используют явное описание сброса для каждого HTML тега. Выглядит профессиональный CSS reset чаще всего так.

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; /* больше всего для картинок в IE6 */
outline: 0; /* точечная граница вокруг ссылок в Firefox */
font-size: 100%;
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; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse; /* cellspacing="0" */
border-spacing: 0;
}

Я лично сам практически не пользуюсь множеством тегов при верстке макетов, такие как abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var и другие — поэтому их можно вообще убрать. Получается, что каждый верстальщик вырабатывает CSS reset свой собственный, в котором нет ничего лишнего.

Категория: PHP, HTML, CSS... | Теги:

Оставьте свой комментарий