Мастерство в настройке выделения текста с использованием CSS

Введение

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Настройка выделения текста

В ВМ уже предоставлены index.html и style.css.

Для изменения стиля выделенного текста используйте псевдо-селектор ::selection. Вот пример фрагмента кода для выбора и стилизации текста внутри элемента абзаца:

<p class="custom-text-selection">Select some of this text.</p>

::selection {
  background: aquamarine;
  color: black;
}

.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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