25.10.2015      297      2
 

Селекторы 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 Евгений Попов приводит примеры практического применения селекторов потомков.селекторы body

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

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

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

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

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


Об авторе: Ксенья Юрьевна Бастрикова

Обсуждение: 2 комментария
  1. Алевтина:

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

  2. Ксенья Юрьевна Бастрикова:

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

Ваш комментарий

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

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности

Яндекс.Метрика