Motif de fond en points de polka : les bases du style CSS

Introduction

Dans ce laboratoire (lab), nous explorerons les bases de la programmation CSS et apprendrons à utiliser CSS pour styliser et formater des pages web. Grâce à une série d'exercices pratiques, vous acquerrez une solide compréhension de la syntaxe CSS, des sélecteurs, des propriétés et des valeurs, et pourrez créer des pages web visuellement attrayantes et réactives. À la fin de ce laboratoire, vous aurez une solide base en CSS et serez prêt à aborder des projets de développement web plus avancés.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) 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{{"Motif de fond en points de polka"}} css/colors -.-> lab-35229{{"Motif de fond en points de polka"}} css/width_and_height -.-> lab-35229{{"Motif de fond en points de polka"}} css/positioning -.-> lab-35229{{"Motif de fond en points de polka"}} css/backgrounds -.-> lab-35229{{"Motif de fond en points de polka"}} end

Motif de fond en points de polka

index.html et style.css ont déjà été fournis dans la machine virtuelle (VM).

Pour créer un motif de fond en points de polka, vous pouvez suivre ces étapes :

Définissez la propriété background-color sur noir.
Utilisez la propriété background-image avec deux valeurs radial-gradient() pour créer deux points.
Spécifiez la taille du motif à l'aide de la propriété background-size. Utilisez background-position pour placer correctement les deux dégradés.
Définissez background-repeat sur repeat.
Notez que la hauteur (height) et la largeur (width) fixes de l'élément sont uniquement à des fins de démonstration.

Voici un exemple de code HTML pour un élément div avec la classe polka-dot :

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

Et voici le code CSS correspondant :

.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;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations! Vous avez terminé le laboratoire (lab) sur le motif de fond en points de polka. Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.