Селекторы CSS

Чтобы освоить тему о селекторах CSS по Евгению Попову открываю в блокноте Notepad++ его статью, прилагающуюся к дополнительным материалам. Статья представлена на английском языке, чтобы не отвлекать обучающегося на ее содержание, а сосредоточится на изучаемом материале. После подключения к странице html  файла   style.css, нужно его заполнить. Для тегов кода пропишем стили. Выберем свойства для: заголовков, шрифтов, абзацев, картинок и пр. Селекторов может быть много.  Всем селекторам присущи  2 типа: свойства и значения.селекторы CSS

Теги селекторов CSS

Если в тексте все абзацы расположить на одном общем фоне. Применим общий селектор для абзацев — тег  <p>. Например, решили, что все абзацы будут на светло – голубом фоне. В файле html  запишем:

В случае применения стилей только к одному элементу — заголовкам статей, запись будет следующей:

Для выделения одинаковых строк в разных абзацах, принято применять идентификатор – css класс. В файлах стилей класс начинают писать с точки и присваивают ему название, например, ab. Получится код html:

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

Групповые 

В случаях, когда хотим создать один цвет для группы элементов, например, задать зеленый цвет всем заголовкам h3. Зададим для всех идентификатор: myList. Элементы перечисляются через запятую, получиться не несколько строк кода, а только одна:

Браузер поймет, что у трех разных элементов есть одно и то же свойство, в частности цвет.

Потомки

Главным на странице является тег HTML – «родитель», все остальные теги находятся внутри него – «слекторы потомки». Следующими вложениями внутри тега HTML являются теги head  и body. Которые содержат все остальные теги, получается иерархическое древо, из главных и подчиненных тегов.

потомки

Тег body  является родителем для тегов, находящихся внутри него, например, тег <ul>. В свою очередь, тег <ul> будет родителем тегов  <li> В видео уроке № 5 Евгений Попов приводит примеры практического применения селекторов потомков.внутри контента - body

Показывает, как раскрасить теги <li> не нумерованного списка, в тексте HTML, в ссылках внутри абзацев и в блоке<div>. 

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

псевдоатрибуты

При посещении пользователем ссылка приобретет  фиолетовую окраску. Посещенная ссылка возвращается в свой начальный цвет. Записать  в блокноте это можно следующим образом:

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

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

  • Вот уж для меня это «тёмный лес», конечно посидеть и разобраться можно, особенно по вашим записям, но пока совсем нет времени.

  • Алевтина Михайловна! У вас все получиться, вы разберетесь. А видео Евгения Попова, еще лучше моих записей, по нескольким источникам всегда можно разобраться.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *