Сброс стилей с помощью CSS Reset
2013-06-05Доброго времени суток, друзья!
Применение каскадных таблиц стилей CSS значительно облегчает работу по верстке страниц сайта, но составляя файл стилей для нового сайта всегда следует помнить о проблеме кроссбраузерности, которая может “пустить под откос” весь наш дизайн при отображении сайта в какой-то из программ. Поэтому очень желательно применять сброс CSS стилей.
Cовременные браузеры имеют свои особые настройки для отображения элементов сайта по умолчанию. То есть, если мы явно не зададим в файле стилей style.css параметры для какого-то элемента, например, table, то в разных браузерах увидим отличные друг от друга отступы у одной и той же таблицы. И не только отступы, рамка также может быть иной. Это происходит потому, что браузеры используют свои личные обобщенные правила CSS, которые очень часто вступают в противоречие с задумками веб-дизайнера, искажая верстку. Именно поэтому некоторые браузеры вносят полнейший беспорядок в страницы, которые идеально отображаются другим браузером. Наша задача в такой ситуации, как грамотных сайтостроителей, добиться нейтрализации обобщенных правил браузеров с помощью CSS. Помещение в самое начало файла стилей специального CSS кода-ластика, поможет нам эффективно решить проблему кроссбраузерности, позволяя строить стили CSS нового сайта на единой основе.
Ранее я уже затрагивала пути решения проблемы кроссбраузерности в статье Проблема совместимости сайта с различными браузерами и их версиями и статье Как убрать ненужные поля и отступы, а сегодня хочу более детально остановиться на разных способах переопределить стили браузера по умолчанию, приведя несколько наборов кодов CSS Reset, то есть кодов перезагрузки правил.
Приведенные ниже коды следует вставлять в начало файла style.css. Необходимые значения свойств элементов дизайна, обнуленные с помощью CSS reset, прописываются ниже.
Сокращенный Reset 1
Это глобальный сброс отступов и полей элементов, ранее упоминаемый мной в статье Как убрать ненужные поля и отступы.
|
1 |
* { padding: 0; margin: 0; } |
Сокращенный Reset 2
К глобальному сбросу значений отступов и полей добавлено уничтожение всех границ по умолчанию:
|
1 |
* { padding: 0; margin: 0; border: 0; } |
Сокращенный Reset 3
Дополнительно убирает стили по умолчанию для внешних границ элементов:
|
1 |
* { outline: 0; padding: 0; margin: 0; border: 0; } |
Сброс стилей от Yahoo
|
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 |
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content:''; } abbr,acronym { border: 0; } |
CSS Reset от Chris Poteet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
* { vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0; } body { padding: 5px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { margin: 20px 0; } li, dd, blockquote { margin-left: 40px; } table { border-collapse: collapse; border-spacing: 0; } |
Сброс стилей от Eric Mayer
Этот код адаптирован под HTML5.
|
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 45 46 47 |
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } |
На основе этих готовых решений вы можете создать свой собственный код CSS Reset, отвечающий вашим потребностям.
