USER-MASTER.ORG

Для предотвращения несоответствия стилей между браузерами лучше всего начинать таблицу стилей с чистого листа. Другими словами, удалить встроенное в браузер форматирование и добавить собственное. Концепция устранения стилей браузера называется сбросом стилей (CSS Reset).

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

Рассмотрим шаблон сброса стандартных стилей:

html, body, div, span, 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%;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section {
    display: block;
}

body {
    line-height: 1.2;
}

ol {
    padding-left: 1.4em;
    list-style: decimal;
}

ul {
    padding-left: 1.4em
    list-style: square;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Показанный выше код сброса стилей взят из известного и авторитетного источника, составленного Эриком Мейером, который можно найти по адресу http://meyerweb.com/eric/tools/css/reset/.

Первый стиль — очень длинный групповой селектор, затрагивающий наиболее распространенные элементы и «обнуляющий» их. Он удаляет поля и отступы, устанавливая 100%-ный размер шрифта и убирая полужирное начертание.

Второй селектор (article, aside, details…) является еще одним групповым селектором, помогающим устаревшим браузерам правильно отображать новые HTML5-элементы. Третий селектор тега (body) устанавливает пространство между строками в абзаце (свойство line-height).

Еще один вариант сброса — использовать файл normalize.css — бесплатную таблицу стилей с открытым исходным кодом, которая позволяет различным браузерам отображать одни и те же элементы в согласованном виде. Он широко используется веб-дизайнерами. Найти файл normalize.css можно по адресу https://necolas.github.io/normalize.css/.

Добавить комментарий

Защитный код
Обновить

Поиск