CSS-Programmierung | Webentwicklung | Gestaltung von HTML-Elementen

Einführung

In diesem Lab werden wir die CSS-Programmierung erkunden, indem wir verschiedene Techniken anwenden, um HTML-Elemente zu gestalten. Durch praktische Übungen werden wir lernen, wie Selektoren, Eigenschaften und Werte verwendet werden, um visuell ansprechende Webseiten zu erstellen. Am Ende dieses Labs werden Sie ein solides Verständnis von CSS haben und es auf Ihre eigenen Webentwicklungsprojekte anwenden können.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35181{{"CSS-Stylegrundlagen für die Webentwicklung"}} css/colors -.-> lab-35181{{"CSS-Stylegrundlagen für die Webentwicklung"}} css/borders -.-> lab-35181{{"CSS-Stylegrundlagen für die Webentwicklung"}} css/width_and_height -.-> lab-35181{{"CSS-Stylegrundlagen für die Webentwicklung"}} css/backgrounds -.-> lab-35181{{"CSS-Stylegrundlagen für die Webentwicklung"}} end

Kreis

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

Um eine kreisförmige Gestalt mit reinem CSS zu erstellen, verwenden Sie die Eigenschaft border-radius: 50%, um die Kanten des Elements zu krümmen. Stellen Sie sicher, dass Sie sowohl width als auch height auf den gleichen Wert setzen, um einen perfekten Kreis zu gewährleisten. Wenn unterschiedliche Werte verwendet werden, wird stattdessen eine Ellipse erstellt. Hier ist ein Beispielcodeausschnitt:

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

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 Kreis-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.