LabEx
EntrarJunte-se

Desabilitar Seleção de Conteúdo com CSS

Beginner

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

Introdução

Neste laboratório, mergulharemos na programação CSS e exploraremos a propriedade user-select. Este laboratório tem como objetivo ensinar como desabilitar a seleção de certos elementos em sua página web, o que pode ser útil para impedir que os usuários copiem conteúdo. Ao final deste laboratório, você terá uma melhor compreensão de como usar a propriedade user-select e seu impacto no design web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 88%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Desabilitar Seleção

index.html e style.css já foram fornecidos na VM.

Para tornar o conteúdo de um elemento não selecionável, adicione a propriedade CSS user-select: none ao seletor. No entanto, este método não é totalmente seguro para impedir que os usuários copiem conteúdo.

Exemplo:

<p>You can select me.</p>
<p class="unselectable">You can't select me!</p>
.unselectable {
  user-select: none;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Desabilitar Seleção. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.