Свежее на сайте:

Вопросы (FAQ)

СТАТЬИ Administrator 17098 Hits
Популярные вопросы от новичков

О графическом редакторе Adobe Photoshop CS6

СТАТЬИ Administrator 27377 Hits 1 Comments
ВСЯ ПРАВДА О ADOBE PHOTOSHOP CS6 Краткое описаниеПрежде, чем мы начнем описание, хотелось бы отметить, что…
показать все

Универсальный селектор

E-mail

Close

Изучаем CSS - Уроки верстки сайтов

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



Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

В примере 1.50 показано одно из возможных приложений универсального селектора — выбор шрифта и размера текста для всех элементов документа.

Верстка веб-сайтов с помощью css

Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY.
Универсальный селектор часто применяется для обнуления отступов и полей у всех элементов, как показано в примере 1.51.

Верстка веб-сайтов с помощью css
Несмотря на внешние удобства универсального селектора и его широкое распространение, ни в коем случае не идите на поводу «моды» и не используйте селектор, как показано в примере выше. Доводы следующие.

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

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

Верстка веб-сайтов с помощью css

«Обнуление стилей» (см. пример 1.51) прививает у разработчика дурную манеру вёрстки. Вместо того чтобы знать, какие значения свойств установлены по умолчанию, разработчик перекладывает эту работу на браузер, насильно устанавливая все значения в ноль. В результате некоторые значения применяются к свойствам, для которых не могут устанавливаться или к  свойствам, у которых данное значение и так нулевое. Это опять же приводит к повышению нагрузки на браузер и замедлению его работы.

Применение одного стиля сразу ко всем элементам иногда приводит к ошибкам отображения элементов в отдельных браузерах. В примере ниже к ссылкам добавляется пунктирное подчеркивание, которое не показывается в IE7 из-за заданного обнуления полей у ссылок.
Верстка веб-сайтов с помощью css
Несмотря на указанные особенности, универсальный селектор можно и нужно включать в стиль. но в комбинации с другими селекторами. Так, если требуется изменить стиль всех элементов в форме, то следует использовать контекстный селектор FORM * или селектор, показанный в примере 1.52.

Верстка веб-сайтов с помощью css
В данном примере рамка и фон добавляется ко всем элементам формы, расположенных внутри абзаца
(тег <p>).


источник: designjunkie.ru

 

Комментарии:

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

КОММЕНТАРИИ

You are here СТАТЬИ - Универсальный селектор