CSS-Formatierung | Link-Manipulation | Webentwicklung

Einführung

In diesem Lab werden wir die CSS-Programmierung erkunden und lernen, wie man Links ohne Text formatiert. Insbesondere werden wir die Pseudoklassen :empty und :not sowie die Eigenschaft content und die Funktion attr() verwenden, um die Link-URL im Pseudoelement ::before anzuzeigen. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie Sie das Erscheinungsbild von Links in Ihren Webseiten manipulieren können.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35190{{"Links ohne Text formatieren"}} css/pseudo_classes -.-> lab-35190{{"Links ohne Text formatieren"}} css/pseudo_elements -.-> lab-35190{{"Links ohne Text formatieren"}} end

Links ohne Text formatieren

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

Um die Link-URL für Links ohne Text anzuzeigen, können Sie die Pseudoklasse :empty verwenden, um solche Links auszuwählen, die Pseudoklasse :not verwenden, um Links mit Text auszuschließen, und die Eigenschaft content in Kombination mit der Funktion attr(), um die Link-URL im Pseudoelement ::before anzuzeigen. Hier ist ein Beispielcodeausschnitt:

<a href="https://30secondsofcode.org"></a>

a[href^="http"]:empty::before {
  content: attr(href);
}

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 "Links ohne Text formatieren" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.