Универсальный селектор. Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS. Подробнее про универсальный селектор

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

* { свойство: значение; свойство: значение; ... }

Пример использования универсального селектора CSS

Параграф 1

Параграф 2

Параграф 3

Результат в браузере

Параграф 1

Параграф 2

Параграф 3

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

Так вот, многие верстальщики (а вы сейчас учитесь именно верстке) создают так называемый «Сброс стилей CSS», то есть в самом начале таблицы стилей они обнуляют все возможные ненулевые значения CSS, а потом, в процессе работы, добавляют стили элементам, но уже, естественно, со своими значениями. Таким образом можно быть уверенным, что во всех браузерах HTML-страница будет выглядеть одинаково.

Очень часто для сброса стилей как раз и применяется универсальный селектор, хотя некоторые предпочитают вместо него просто перечислять через запятую некоторые селекторы тегов, а другие вообще не используют сброс, полагаясь на свою внимательность. Как будете поступать вы - решать только вам, но в любом случае пока об этом думать рано. И будьте уверены, что со временем у вас сам собой выработается свой стиль написания стилей (извините за тавтологию) так что не заморачивайтесь на этом.

Домашнее задание.

Делать домашнее задание по универсальному селектору я не вижу смысла, так как тут все слишком очевидно, поэтому займемся немного другим.

1. Измените стили тега таким образом, чтобы он стал похож на параграф. Какое свойство для этого нужно подумайте сами.
2. Измените тег параграфа так, чтобы он наоборот стал похож на тег выделения длинных цитат.
3. Превратите тег из элемента уровня строки (inline) в блочный элемент. Используйте для этого свойство

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

Схема CSS-кода выглядит следующим образом:

Селектор { CSS-свойство: значение; CSS-свойство: значение; ... и т.д. }

В универсальном селекторе, в качестве селектора, выступает знак звёздочки * :

* { CSS-свойство: значение; CSS-свойство: значение; ... и т.д. }

Универсальный селектор , влияет сразу на все теги HTML-документа.

Например, можно убрать все внутренние и внешние отступы у всех тегов HTML-документа:

* { margin: 0; padding: 0; }

Допустим, у нас есть HTML-документ содержащий следующий код:

Снежный барс

следующим образом .

Давайте с помощью универсального селектора, сделаем цвет шрифта у всех тегов зелёным green , имя шрифта arial , стиль шрифта oblique (наклонный).

Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг. Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными пятнами.

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

Страница в браузере будет выглядеть следующим образом .

Также можете поэкспериментировать с внешним отступом, сделайте его сначала 0 , а затем 15px , добавьте в CSS-код.

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

В CSS3 универсальный селектор применяется также в комбинации с пространством имён.

• ns|* - все элементы в пространстве имён ns .
• *|* - все элементы во всех пространствах имён.
• |* - все элементы без явного указания пространства имён.

Синтаксис

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

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

Обозначения

Пример

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Примечание

Браузер Internet Explorer до шестой версии включительно понимает конструкцию * html , что нелогично, поскольку тег является тегом верхнего уровня и выше него никаких элементов быть не может. Эта ошибка иногда применяется, чтобы создать стиль для IE6, например конструкция * html body { ... } будет добавлять стиль для селектора body в IE6 и ниже и не работает в других браузерах.

В браузере Internet Explorer 7 при добавлении универсального селектора перед именем селектора без пробелов, он воспринимается как контекстный селектор. Так, запись *body работает только в IE7 и игнорируется другими браузерами.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

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

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

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

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

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

Пример 14.1. Использование универсального селектора

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Вопросы для проверки

1. Какой стиль установит красный цвет текста в абзаце?

1. * HTML P { color: red; }
2. HTML * P { color: red; }
3. P * { color: red; }
4. BODY * P { color: red; }
5. BODY P * { color: red; }

2. Что означает следующая запись в стилях?

* DIV * { background: green; }

1. Установить фоновый цвет для всех элементов веб-страницы.
2. Задать цвет для всех текстовых элементов документа.
3. Установить фоновый цвет для всех элементов внутри контейнера
   .
4. Установить фоновый цвет только для тегов
   , вложенных в другие контейнеры.
5. Зеленый цвет фона для всех тегов
   в коде.

3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

1. Lorem
2. consectetuer
3. nostrud

Ответы

1. HTML * P { color: red; }

2. Установить фоновый цвет для всех элементов внутри контейнера