Представьте, что вы создаете веб-страницу, используя только HTML, без прикрепления или применения файлов таблиц стилей CSS. Почему же при отображении сайта в браузере ссылки окажутся синими и подчеркнутыми, а текст в абзацах — черным? И почему по умолчанию внешний отступ у элемента заголовка верхнего уровня 14pt в браузере Internet Explorer и 0,67em в браузере Firefox?

Ответом на эти вопросы является таблица стилей браузеров. Эти файлы таблицы стилей встроены в браузер, у каждого браузера он свой и определяет, как отображать веб-сайты, если браузеру явно не указывается другое.

Указать браузеру использовать код CSS веб-сайта вместо таблицы стилей браузера можно с помощью связывания или встраивания таблицы стилей веб-сайта, или использования строчных стилей. После этого браузер принимает простое решение:

• Если новые стили конфликтуют с правилами из таблицы стилей браузера, стили веб-сайта будут использованы для отображения.

• Все, что не задано в таблице стилей веб-сайта, будет взято из таблицы стилей браузера.

Это подталкивает веб-разработчиков к попытке создать гигантские таблицы стилей для сброса кода CSS, которые пытаются задать каждому свойству CSS наиболее распространенное значение по умолчанию. При применении такой таблицы стилей к веб-сайту полностью исключается возможность использования таблицы стилей браузера. После этого веб-дизайнер или веб-разработчик может создавать специальный код CSS для веб-сайта, будучи вполне уверенным, что браузер не станет неожиданно применять свое значение какого-то свойства, которое не было указано.

Таблицы стилей для сброса кода CSS часто выступают предметом споров, как мы уже писали, и некоторые предпочитают более легкий подход. Например:

<div style="color: red;">
        <p>This is some text <span>in color.</span>
</div>

Цвет текста абзаца, унаследованный от родительского блока, будет красным. Но что делать, если нужно, чтобы цвет текста внутри тега span стал черным? Можно воспользоваться одним из двух способов. Традиционный подход такой:

<div style="color: red;">
        <p>This is some text <span style="color: #000;">in color.</span>
</div>

А вот второй вариант:

<div style="color: red;">
        <p>This is some text <span style="color: initial">in color.</span>
</div>

Значение по умолчанию сбрасывает свойство на его значение по умолчанию в таблице стилей браузера. Это может быть особо удобно, когда стили, которые нужно поменять, длинные, сложные или трудно запоминаемые:

div {
        border: 3px dotted green;
}
div.special {
        border: initial;
}
/* сбрасывает значение рамки блока у блоков класса .special на значение, указанное в таблице стилей браузера, т. е., отсутствие рамки */

Обратите внимание, все версии браузера Internet Explorer не поддерживают значение по умолчанию.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование значения свойства CSS ширины по размеру содержимого
• Использование разных способов применения стилей CSS
• Использование свойства CSS перспективы