ГРУППА КУРСА
|
Главная >
Учебник CSS >
СелекторыСелектор указывает элемент или группу элементов, которым устанавливается стиль. Ко всем элементам на странице, которые совпадают с селекторм, будет применён стиль, указанный для этого селектора. Селекторов достаточно много, одни используются постоянно, другие реже. В этой теме мы рассмотрим основные. Селектор по тегуСелектор по тегу определяет стиль всех элементов страницы, созданных определённым тегом. Например, для всех тегов <h1> или для всех тегов <p>. Для создания этого селектора указывается имя тега без скобок. Для примера создадим на странице заголовок и зададим всем заголовкам первого уровня определённый стиль. Для этого внутри тега <head> создадим тег <style> и в нём будем указывать стиль. Таким образом, страница будет выглядеть так:
Если Вы всё сделали правильно то заголовок будет отображаться красным цветом и маленьким шрифтом. Вы можете добавить на страницу ещё тэги <h1> и увидите, что все они отображаются с тем же стилем. Селектор по idЛюбому тэгу можно установить атрибут id. Это идентификатор - уникальное имя элемента, по которому этот элемент можно найти для разных целей. В том числе для установки стиля. На одной странице может быть только один элемент с конкретным id. Если на странице есть несколько элементов с одинаковым значением id, то это ошибка. Для указания селектора по id ставится знак #, а затем без пробела значение id. Для примера добавим на страницу тэг <p> и установим ему атрибут id:
Укажем стиль этому элементу. Добавим внутрь тэга <style> такой код:
Абзац должен отображаться на странице зелёным цветом. Селектор по классуЛюбому тэгу можно установить атрибут class. Смысл этого атрибута примерно такй же, как у id. Но один и тот же класс может быть у любого количества элементов страницы. И всем этим элементам можно установить определённый стиль. Для указания селектора по классу ставится точка, затем без пробела значение атрибута class. Для примера добавим на страницу список и зададим пунктам списка атрибут class:
Теперь добавим внутрь тэга <style> такие строки:
Список должен отображаться синим цветом. Один и тот же класс может быть у разных тегов. При этом, можно указать стиль не всем элементам класса, а только определённым тэгам. Для этого пишется сначала тэг, затем без пробела точка и класс. Такой селектор будет выглядеть так:
Определённый элемент может относиться одновременно к нескольким классам. Для этого в атрибуте class все классы перечисляются через пробел. Пример:
Этот элемент будет относиться к двум классам. При этом, к нему будут применены и свойства класса registration, и свойства класса inform. Универсальный селекторУниверсальный селектор устанавливает стиль для всех элементов. Он создаётся с помощью знака * Для примера изменим шрифт всем элементам страницы. Добавим в стиль следующий код:
Составной селекторЧасто нужно применять стиль к элементу, только если он находится внутри другого элемента. Для этого существует составной селектор, который состоит из нескольких селекторов. Селекторы перечисляются через пробел. Сначала указывается внешний элемент, а затем вложенный элемент, к которому применяется стиль. Для примера установим стиль тэгам <span>, которые находятся внутри тэгов <p>. Добавим на страницу абзац с тэгом <span>, а также отдельный тэг <span>, к которому стиль не должен применяться.
Добавим в стиль такой код:
Первый тэг <span> изменил цвет, а второй остался неизменным, потому что он не находится внутри тэга <p>. Составной селектор может состоять не только из тэгов, но и из любых других селекторов. Для примера установим стиль тэгу <span>, который находится внутри элемента определённого класса. Добавим на страницу блок и зададим ему класс:
Добавим в стиль такие строки:
Установка стиля нескольким селекторамЕсли нескольким селекторам нужно установить один и тот же стиль, то не обязательно указывать его каждому селектору по-отдельности. Можно перечислить селекторы через запятую и один раз указать им стиль. Это может быть применено к любым селекторам. Пример:
Один и тот же селектор может быть указан в стиле несколько раз. Это используется, например, в тех случаях, когда селекторы перечислены через запятую и им заданы определённые свойства. А затем, каждому селектору отдельно установлены остальные свойства. Приоритет селекторовИногда определённому элементу страницы разные селекторы устанавливают стили, противоречащие друг другу. То есть в этих селекторах есть одно и то же свойство, но с разными значениями. В этом случае применяется стиль того селектора, у которого выше приоритет. При этом, у второго селектора не применяется только то свойство, которое противоречит приоритетному селектору. Остальные свойства будут работать. Приоритет селектора определяется специфичностью. Специфичность - это число, которое складывается по определённым правилам. Каждый тип простых селекторов имеет свою специфичность. Селектор по тэгу имеет специфичность 1 Селектор по классу и псевдоклассу имеет специфичность 10 Селектор по id имеет специфичность 100 Например, если есть селекторы div и .inf, то будет использован стиль селектора .inf, потому что у него больше специфичность. У сложных и составных селекторов специфичность складывается из специфичности простых селекторов, которые входят в их состав. Например: Селектор #bl .inf специфичность 100+10=110 Селектор p.inf специфичность 1+10=11 |