LabEx
EntrerRejoindre

Techniques de style CSS pour le développement web

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer la programmation CSS en pratiquant différentes techniques pour styliser les éléments HTML. Par des exercices pratiques, nous apprendrons à utiliser les sélecteurs, les propriétés et les valeurs pour créer des pages web visuellement attrayantes. À la fin de ce laboratoire, vous aurez une compréhension solide de CSS et serez capable de l'appliquer à vos propres projets de développement web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 89%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Cercle

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

Pour créer une forme circulaire à l'aide de CSS pur, utilisez la propriété border-radius: 50% pour courber les bords de l'élément. Assurez-vous de définir à la fois width et height sur la même valeur pour obtenir un cercle parfait. Si des valeurs différentes sont utilisées, une ellipse sera créée à la place. Voici un extrait de code d'exemple :

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

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

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire Cercle. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.