ГРУППА КУРСА
|
Главная >
Учебник CSS >
СелекторыСелектор указывает элемент или группу элементов, которым устанавливается стиль. Ко всем элементам на странице, которые совпадают с селекторм, будет применён стиль, указанный для этого селектора. Селекторов достаточно много, одни используются постоянно, другие реже. В этой теме мы рассмотрим основные. Селектор по тегуСелектор по тегу определяет стиль всех элементов страницы, созданных определённым тегом. Например, для всех тегов <h1> или для всех тегов <p>. Для создания этого селектора указывается имя тега без скобок. Для примера создадим страницу и добавим на неё заголовок. Стиль будем задавать через тег <style>. Укажем в нём стиль для заголовков первого уровня.
Если Вы всё сделали правильно то заголовок будет отображаться красным цветом и маленьким шрифтом. Вы можете добавить на страницу ещё тэги <h1> и увидите, что все они отображаются с тем же стилем. Селектор по idЛюбому тэгу можно установить атрибут id. Это идентификатор - уникальное имя элемента. На странице может быть только один элемент с конкретным id. Добавим на страницу тэг <p> и установим ему атрибут id:
Для указания селектора по id ставится знак #, а затем без пробела значение 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 |