Программирование CSS | User-Select | Веб-дизайн

Отключить выбор содержимого с помощью CSS

CSSBeginner

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом лабе мы углубимся в программирование CSS и исследуем свойство user-select. Эта лабораторная работа旨在教您如何禁用网页中某些元素的选择功能，这在防止用户复制内容方面可能会很有用。在本实验结束时，您将更好地理解如何使用user-select属性及其对网页设计的影响。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") subgraph Lab Skills css/selectors -.-> lab-35189{{"Отключить выбор содержимого с помощью CSS"}} end

Отключить выбор

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

Чтобы сделать содержимое элемента невыбережаемым, добавьте в селектор CSS свойство user-select: none. Однако этот метод не является полностью безопасным для предотвращения копирования содержимым пользователями.

Пример:

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>

.unselectable {
  user-select: none;
}

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

Резюме

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