Использование

CSS-селекторов

практическое занятие

Виджет рейтинга

Задача: сверстать виджет рейтинга (star rating) на HTML+CSS.

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

Виджет рейтинга

• для разметки используем radiobutton + label
• радиокнопки объединяются в одну группу и помещаются в один контейнер
• для закрашивания предыдущих кнопок используем селекторы с ~
• поскольку нужно закрашивать не следующие, а предыдущие элементы нужно расположить элементы в обратном порядке

Виджет рейтинга

• CSS-свойство direction. Это свойство определяет направление текста (в том числе поведение инлайн-блоков)

• direction может принмать значения ltr (left-to-right) или rtl (right-to-left)

Виджет рейтинга

В качестве изображения используется SVG-иконка

Схема подключения:

Стилизация SVG

• для заливки SVG-формы используется CSS-свойство fill (аналог background-color)
• для определения цвета обводки SVG-формы используется CSS-свойство stroke (аналог border-color)