07

Псевдоклассы и -элементы

Псевдоклассы и псевдоэлементы

Цель: изучить псевдоклассы и псевдоэлементы, получить навыки стилизации элементов, используя псевдоклассы и псевдоэлементы.

Порядок выполнения лабораторной работы:

  1. Изучить:

    • Псевдоклассы:
      • :root
      • :link
      • :visited
      • :hover
      • :active
      • :focus
      • Псевдоклассы группы child
      • Псевдоклассы группы type
      • :checked
      • :disabled, :enabled
      • :required
    • Псевдоэлементы:
      • ::first-letter
      • ::first-line
      • ::selection
      • ::marker
      • ::before
      • ::after
      • ::placeholder
    • примеры их использования.

  2. Для выполнения работы необходимо:

    1. В index.html:

      • заменить стандартное выделение (::selection);
      • оформить поля формы под стиль графического макета (цвета, шрифты, размеры);
      • для ссылок и кнопок создать стили с псевдоклассами hover, active, focus;
      • стилизовать подсказки (placeholder) в полях;

    2. В form.html:

      • выделить ярлык, с которым связано поле, находящееся в фокусе;
      • для текста у выбранных радиокнопок и чекбоксов изменить оформление;
      • отключить кнопку сброса формы и стилизовать ее соответствующим образом;
      • стилизовать поля, обязательные для заполнения;
      • добавить еще одну форму:
        • в начале формы добавить список определений псевдоэлемента и псевдокласса (теги: dl, dt, dd);
        • для термина (dt) задать буквицу;
        • для определения (dd) через псевдоэлемент добавить ”🛈” (U+1F6C8);
        • два список чекбоксов: для псевдоэлементов и для псевдоклассов. Отметить с помощью атрибута checked те элементы и классы, которые использованы в работе.
        • ярлыки отмеченных элементов должны быть вычеркнуты;
        • четные элементы списка псевдоэлементов и нечетные элементы списка псевдоэлементов должны быть стилизованы иначе.

  3. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.

  4. Загрузить проект на сервер через sftp или используя ssh.

Требования к html и css:

  • Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
  • Код отформатирован;
  • Корректное использование тегов;
  • Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница, сгенерированная с помощью команды npm run build, на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

Псевдоклассы

Псевдоэлементы

Вопросы для защиты

  1. Что такое псевдокласс?
  2. Что такое псевдоэлемент?
  3. Приведите примеры псевдоклассов/псевдоэлементов.
  4. Чем отличаются псевдоклассы группы child от type?
  5. Какие псевдоклассы нужны чтобы стилизовать радиокнопки во всех состояниях?
  6. Где в дереве создаются псевдоэлементы ::before и ::after?
  7. Какое свойство используется с псевдоэлементами ::before и ::after?
Задать вопрос наставнику
Предыдущая Следующая