LabEx
LoginBeitreten

Inhaltselektion mit CSS deaktivieren

Beginner

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

Einführung

In diesem Lab werden wir uns mit der CSS-Programmierung befassen und die Eigenschaft user-select untersuchen. Ziel dieses Labs ist es, Ihnen zu beibringen, wie Sie die Auswahl bestimmter Elemente auf Ihrer Webseite deaktivieren können, was hilfreich sein kann, um zu verhindern, dass Benutzer Inhalte kopieren. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie die Eigenschaft user-select verwendet wird und wie sie auf die Web-Designs einwirkt.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 88% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Auswahl deaktivieren

index.html und style.css wurden bereits in der VM bereitgestellt.

Um den Inhalt eines Elements nicht auswählbar zu machen, fügen Sie der Selektor die CSS-Eigenschaft user-select: none hinzu. Diese Methode ist jedoch nicht vollständig sicher, um zu verhindern, dass Benutzer Inhalte kopieren.

Beispiel:

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

.unselectable {
  user-select: none;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Auswahl deaktivieren" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.