Сброс стилей CSS (CSS Reset).


Сброс стилей CSSКогда мы приступаем формировать файл стилей для нашего html-документа, то очень важно выполнить так называемый сброс стилей. Сброс стилей в css (CSS Reset) – это, по сути, обнуление основных свойств и атрибутов, установленных браузером по умолчанию для различных элементов страницы, например, окно браузера может иметь ненужные вам отступы и т.п. Чтобы обнулить все заданные свойства по умолчанию, т.е. выполнить сброс стилей, мы должны начать формировать наши таблицы стилей с прописывания определенного набора стилей. И это должно стать правилом в работе.

Существует несколько способов сбросить стили по умолчанию. Я приведу здесь два наиболее распространенных.

Первый способ заключается в простой конструкции, которую необходимо поместить в начало вашего css-файла:

*{margin:0;padding:0;}

Здесь мы обнуляем все отступы для любого элемента страницы.

Второй вариант – более объемный, но затрагивающий значительно больше свойств и атрибутов. Автор данного метода – 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%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Именно этот метод я и люблю использовать при верстке сайтов.

Этот код также можно вставить в начало css-документа, либо же сохранить его отдельным файлом, а в новой таблице стилей сделать его вызов:

@import «/style/reset.css»;

Только нужно помнить, что старые версии браузеров могут не поддерживать правило @import.





Случайные посты

Категория: Используем CSS

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