Селекторы CSS типы и свойства изучим по Евгению Попову

Селекторы CSS тема освещена Евгением Поповым, открываю в блокноте Notepad++ его статью, прилагающуюся к дополнительным материалам. Статья дана только для изучения селекторов и представлена на английском языке, чтобы не отвлекать обучающегося на ее содержание, а сосредоточится на изучаемом материале. селекторы CSS

Cелекторы CSS — теги

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

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

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

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

Cелекторы CSS — групповые

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

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

Потомки

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

селекторы потомков

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

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

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

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

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

Оставить комментарий

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Что будем искать? Например,Человек

Мы в социальных сетях