Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.
* { Описание правил стиля }
В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
В
примере 1.50 показано одно из возможных приложений универсального
селектора — выбор шрифта и размера текста для всех элементов документа.
Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY. Универсальный селектор часто применяется для обнуления отступов и полей у всех элементов, как показано в примере 1.51.
Несмотря
на внешние удобства универсального селектора и его широкое
распространение, ни в коем случае не идите на поводу «моды» и не
используйте селектор, как показано в примере выше. Доводы следующие.
Универсальный селектор применяет стиль ко всем элементам веб-страницы, включая невидимые, что приводит к замедлению браузера, поскольку ему требуется некоторое время для построения дерева элементов и добавления к ним стилей. Чем больше элементов в коде, тем сильнее выражено замедление. В некоторых крайних случаях вообще может появиться «зависание» браузера на несколько секунд.
При неверном использовании универсального селектора результат может оказаться непредсказуемым. Пример ниже является полностью корректным с точки зрения CSS, но приводит страницу к парадоксальному виду.
«Обнуление стилей» (см. пример 1.51) прививает у разработчика дурную манеру вёрстки. Вместо того чтобы знать, какие значения свойств установлены по умолчанию, разработчик перекладывает эту работу на браузер, насильно устанавливая все значения в ноль. В результате некоторые значения применяются к свойствам, для которых не могут устанавливаться или к свойствам, у которых данное значение и так нулевое. Это опять же приводит к повышению нагрузки на браузер и замедлению его работы.
Применение одного стиля сразу ко всем элементам иногда приводит к ошибкам отображения элементов в отдельных браузерах. В примере ниже к ссылкам добавляется пунктирное подчеркивание, которое не показывается в IE7 из-за заданного обнуления полей у ссылок.
Несмотря на указанные особенности, универсальный
селектор можно и нужно включать в стиль. но в комбинации с другими
селекторами. Так, если требуется изменить стиль всех элементов в форме,
то следует использовать контекстный селектор FORM * или селектор, показанный в примере 1.52.
В данном примере рамка и фон добавляется ко всем элементам формы, расположенных внутри абзаца
(тег <p>).