LabEx
EntrarÚnete

Deshabilitar la selección de contenido con CSS

Beginner

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

Introducción

En este laboratorio, profundizaremos en la programación CSS y exploraremos la propiedad user-select. Este laboratorio tiene como objetivo enseñarte a deshabilitar la selección de ciertos elementos en tu página web, lo que puede ser útil para evitar que los usuarios copien contenido. Al final de este laboratorio, tendrás una mejor comprensión de cómo utilizar la propiedad user-select y su impacto en el diseño web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 88%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Deshabilitar la selección

index.html y style.css ya se han proporcionado en la VM.

Para hacer que el contenido de un elemento no sea seleccionable, agrega la propiedad CSS user-select: none al selector. Sin embargo, este método no es completamente seguro para evitar que los usuarios copien contenido.

Ejemplo:

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

.unselectable {
  user-select: none;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Deshabilitar la selección. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.