По умолчанию браузер устанавливает свои настройки для некоторых свойств в css. Но беда тут в том, что веб-обозревателей много и каждый может устанавливать свои правила. Какое решение? Узнать, как сбросить настройки css по умолчанию и перезаписать на свои. А вот о том, как это можно сделать и будет посвящена эта статья.
CSS Reset или сброс настроек по умолчанию
CSS Reset — это набор стилей, которые сбрасывают какие-то параметры, установленные браузером по умолчанию. Этот файл пишет для себя каждый веб-разработчик индивидуально, а кто-то берет готовое решение. Вот с него я и предлагаю начать. Есть много хороших вариантов сброса стилей, но мне больше всего понравился этот, составленный Эриком Мейером:
/* 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;
}
Я немного прокомментирую код. Во-первых, тут сбрасываются внутренние и внешние отступы для всех нужных элементов. Во-вторых, на лицо поддержка HTML5 элементов. Для них задано правило, которое позволит им правильно отображаться в некоторых версиях браузеров. В-третьих, заданы типичные настройки для удобной работы с таблицами (убраны отступы между ячейками и двойные границы). А еще сброшены стандартные маркеры для списков и кавычки для цитат. Эти части кода стоит удалить, если вы хотите использовать стилизацию по умолчанию.
Как сбросить настройки css самостоятельно
При более менее нормальном владении css можно попробовать самому написать пару правил. Например:
*{
margin: 0;
padding: 0;
}
Это, пожалуй, самая простая команда. Звездочка в данном случае представляет все селекторы, поэтому стили будут применены ко всем элементам на веб-странице, сбросив у них внешние и внутренние отступы. Вы удивитесь, но этих простых строчек кода может хватить для обеспечения кроссбраузерности во многих веб-обозревателях. Все остальные правила можно добавить по собственному желанию. Я советую добавить еще display: block для всех тегов HTML5.
Где разместить правила css reset
Вот выше я вам предложил код, а куда его вставлять? Тут есть два варианта:
- Вставить его в самом начале главной таблицы стилей на вашем сайте
- Создать на сервере новый css-файл и сохранить в него код, после чего сохранить и подключить ко всем страницам ПЕРЕД основной таблицей
style.css.
Подробнее о подключении таблицы стилей css к html смотрите здесь.
На мой взгляд, второй вариант хуже тем, что ухудшает производительность, добавляя в загрузку один лишний файл. С другой стороны, так вам проще будет управлять этими правилами. Но ради производительности я рекомендую использовать первый вариант.
Сброс настроек является одной из мер по обеспечению кроссбраузерности сайта, то есть одинакового отображения в разных веб-обозревателях. Конечно, это не все меры, которые обеспечат одинаковый внешний вид, об остальных я буду писать в дальнейшем на этом блоге. Подписывайтесь, если интересно.