Селекторы CSS тема освещена Евгением Поповым, открываю в блокноте Notepad++ его статью, прилагающуюся к дополнительным материалам. Статья дана только для изучения селекторов и представлена на английском языке, чтобы не отвлекать обучающегося на ее содержание, а сосредоточится на изучаемом материале.
Cелекторы CSS — теги
После подключения к странице html файла style.css, нужно его заполнить. Для тегов кода пропишем стили. Выберем свойства для: заголовков, шрифтов, абзацев, картинок и пр. Селекторов может быть много. Всем селекторам присущи 2 типа: свойства и значения.Если в тексте все абзацы расположить на одном общем фоне. Применим общий селектор для абзацев — тег <p>. Например, решили, что все абзацы будут на светло – голубом фоне. В файле html запишем:
1 | [php]p{ color: #DEFFFF; }p[/php] |
В случае применения стилей только к одному элементу — заголовкам статей, запись будет следующей:
1 | [php]h2{ color: #B54D19 }h2[/php] |
Для выделения одинаковых строк в разных абзацах, принято применять идентификатор – css класс. В файлах стилей класс начинают писать с точки и присваивают ему название, например, ab. Получится код html:
1 | [pho].ab{ color: #00FFA9; }[/php] |
Теперь не нужно для каждого элемента, в отдельности записывать стили, достаточно присвоить css class.
Cелекторы CSS — групповые
В случаях, когда хотим создать один цвет для группы элементов, например, задать зеленый цвет всем заголовкам h3. Зададим для всех идентификатор: myList. Элементы перечисляются через запятую, получиться не несколько строк кода, а только одна:
1 | [php]p, h4, #myList{color: #FFF9D0;}[/php] |
Браузер поймет, что у трех разных элементов есть одно и то же свойство, в частности цвет.
Потомки
Главным на странице является тег HTML – «родитель», все остальные теги находятся внутри него – «селекторы потомки». Следующими вложениями внутри тега HTML являются теги head и body. Которые содержат все остальные теги, получается иерархическое древо, из главных и подчиненных тегов.
Тег body является родителем для тегов, находящихся внутри него, например, тег <ul>. В свою очередь, тег <ul> будет родителем тегов <li> В видео уроке № 5 Евгений Попов приводит примеры практического применения селекторов потомков.
Показывает, как раскрасить теги <li> не нумерованного списка, в тексте HTML, в ссылках внутри абзацев и в блоке<div>.
Псевдоселекторы CSS относятся к ссылкам, которые могут быть в разных состояниях. Например, в начальном состоянии они обычно синие. Цвета других состояний выберем сами. При наведении мыши ссылка может стать красной. Все это запишем в таблице стилей.
При посещении пользователем ссылка приобретет фиолетовую окраску. Посещенная ссылка возвращается в свой начальный цвет. Записать в блокноте это можно следующим образом:
1 2 3 4 5 | [php] a:link{ color:#FFDD00; }a[/php] |
Цвет возьмем из программы колормания, ее удобно открывать, если ярлык закреплен в строке состояний компьютера. Программа откроется рядом со строчкой кода, выберем цвет, скопируем и перенесем в код. Вышеперечисленные селекторы CSS являются наиболее часто употребляемыми при построении сайтов.