LabEx
EntrerRejoindre

Guide de base pour les fondamentaux de CSS

Beginner

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

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS. Ce laboratoire est conçu pour aider les débutants à commencer avec CSS et à apprendre à l'utiliser pour créer des pages web belles et réactives. Au cours du laboratoire, nous aborderons divers sujets tels que les sélecteurs, les propriétés et les valeurs, et fournirons des exercices pratiques pour renforcer les concepts.

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 95%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Triangle

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

Pour créer une forme triangulaire avec du CSS pur, suivez ces étapes :

  1. Utilisez trois bordures avec la même largeur de bordure (20px) pour créer la forme triangulaire.
  2. Définissez la couleur de bordure du côté opposé à celui vers lequel pointe le triangle sur la couleur souhaitée. Les bordures adjacentes devraient avoir une couleur de bordure de transparent.
  3. Pour ajuster la taille du triangle, modifiez les valeurs de largeur de bordure.

Voici un extrait de code d'exemple :

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

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.

Résumé

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