Inhaltselektion mit CSS deaktivieren

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.

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.