Das Meistern der Anpassung der Textauswahl mit CSS

Einführung

In diesem Lab werden wir die Welt der CSS-Programmierung erkunden und lernen, wie man Webseiten mit verschiedenen CSS-Eigenschaften und -Selektoren gestaltet. Ziel dieses Labs ist es, Einsteigern und Entwicklern mittleren Niveaus praktische Erfahrungen zu vermitteln, um ihre Fähigkeiten bei der Erstellung visuell ansprechender Webseiten zu verbessern. Durch dieses Lab lernen Sie auch, wie Sie häufige CSS-Probleme beheben und bewährte Methoden in Ihrem Code anwenden.

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 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Anpassung der Textauswahl

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

Um den Stil des ausgewählten Texts zu ändern, verwenden Sie den Pseudoselektor ::selection. Hier ist ein Beispielcodeausschnitt, um Text innerhalb eines Paragraph-Elementes auszuwählen und zu stylen:

<p class="custom-text-selection">Wählen Sie einen Teil dieses Texts aus.</p>

::selection {
  background: aquamarine;
  color: schwarz;
}

.custom-text-selection::selection {
  background: deeppink;
  color: weiß;
}

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 zur Anpassung der Textauswahl abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.