Punktmuster-Hintergrund: CSS-Gestaltungsgrundlagen

Einführung

In diesem Lab werden wir die Grundlagen der CSS-Programmierung erkunden und lernen, wie man CSS verwendet, um Webseiten zu gestalten und zu formatieren. Durch eine Reihe von praktischen Übungen werden Sie ein solides Verständnis von CSS-Syntax, Selektoren, Eigenschaften und Werten erwerben und in der Lage sein, optisch ansprechende und reaktionsfähige Webseiten zu erstellen. Am Ende dieses Labs werden Sie eine solide Grundlage in CSS haben und bereit sein, an fortschrittlicheren Webentwicklungsprojekten teilzunehmen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35229{{"Punktmuster-Hintergrund"}} css/colors -.-> lab-35229{{"Punktmuster-Hintergrund"}} css/width_and_height -.-> lab-35229{{"Punktmuster-Hintergrund"}} css/positioning -.-> lab-35229{{"Punktmuster-Hintergrund"}} css/backgrounds -.-> lab-35229{{"Punktmuster-Hintergrund"}} end

Punktmuster-Hintergrund

index.html und style.css wurden bereits in der virtuellen Maschine (VM) bereitgestellt.

Um ein Punktmuster-Hintergrund zu erstellen, können Sie die folgenden Schritte ausführen:

Setzen Sie die Eigenschaft background-color auf schwarz.
Verwenden Sie die Eigenschaft background-image mit zwei radial-gradient()-Werten, um zwei Punkte zu erstellen.
Geben Sie die Größe des Musters mit der Eigenschaft background-size an. Verwenden Sie background-position, um die beiden Gradienten richtig zu platzieren.
Setzen Sie background-repeat auf repeat.
Beachten Sie, dass die festgelegten height- und width-Werte des Elements nur zu Demonstrationszwecken dienen.

Hier ist ein Beispiel für HTML-Code für ein div-Element mit der Klasse polka-dot:

<div class="polka-dot"></div>

Und hier ist der entsprechende CSS-Code:

.polka-dot {
  width: 240px;
  height: 240px;
  background-color: #000;
  background-image:
    radial-gradient(#fff 10%, transparent 11%),
    radial-gradient(#fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position:
    0 0,
    30px 30px;
  background-repeat: repeat;
}

Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Web-Service auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzusehen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Punktmuster-Hintergrund" abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.