Главная » Шпаргалка » PHP MYSQL javascript » CSS » Сброс стилей CSS

Сброс стилей с помощью CSS Reset

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

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

1
 
* {padding: 0; margin: 0}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
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 свой собственный, в котором нет ничего лишнего.