Comment créer une boîte remplie de couleurs en HTML/CSS ?

Vue d'ensemble

HTML et CSS sont des technologies avec lesquelles nous pouvons créer n'importe quelle forme et n'importe quel cadre. Créer une boîte remplie de couleur peut être réalisé en utilisant HTML car nous pouvons créer un simple cadre de boîte à l'aide de HTML et le remplir de couleur à l'aide des propriétés CSS. Nous pouvons également utiliser l'attribut HTML "svg" (graphiques vectoriels scalaires) pour dessiner une boîte et l'attribut fill color pour remplir la boîte de couleur.

Grammaire

La syntaxe pour utiliser svg pour créer une boîte et la remplir de couleur est la suivante. Il contient quatre attributs : x, y, width, height et padding. Ainsi, l'axe des x définit la position horizontale de la boîte par rapport à l'écran, l'axe des y définit la position verticale, la hauteur définit la hauteur de la boîte, la largeur définit la largeur de la boîte et les jeux de propriétés de remplissage la couleur de la boîte à l'intérieur de la boîte.

<svg>
   <rect x=“” y=“” width=“” height=“” fill=“” />
</svg>

Algorithme 1

• Créez un fichier HTML dans un éditeur de texte contenant un passe-partout HTML.

• Ajoutez maintenant la balise svg au corps HTML.

<svg></svg>

• Créez maintenant une boîte à l'intérieur de la balise svg en utilisant le balisage sémantique .

<rect/>

• Définissez maintenant les propriétés telles que x, y, width, height et padding dans la balise .

<rect width="100" height="100" fill="green" />

• Maintenant, ouvrez votre navigateur et vous verrez une boîte remplie de couleurs.

Exemple 1

Dans cet exemple, nous utiliserons la balise HTML svg pour dessiner une boîte à l'aide de l'attribut .

    


    
 Created using svg 
    

Algorithme 2

• Créez un fichier index.html sur un éditeur de texte et ajoutez un passe-partout HTML au fichier

• Ajoutez maintenant le conteneur div au corps HTML

<div></div>

• Ajoutez maintenant la balise de style interne à la balise d'en-tête HTML.

<style></style>

• Utilisez maintenant les propriétés de style CSS pour définir la hauteur, la largeur et la couleur de la boîte.

<style>
   div{
      width: 10rem;
      height: 10rem;
      background-color: green;
   }	
</style>

• Ouvrez le navigateur, la boîte est créée avec succès et remplie de couleurs.

Exemple 2

Dans cet exemple, nous allons créer une boîte avec un conteneur HTML div et utiliser les propriétés de style CSS pour remplir la boîte de couleur.

    
    


    <div></div>

Conclusion

Tout comme nous avons utilisé SVG (graphiques vectoriels scalaires) pour créer une boîte, nous pouvons également créer de nombreuses formes différentes avec. La meilleure façon de créer une boîte remplie de couleurs est d'utiliser un simple conteneur div avec quelques propriétés de style CSS, car avec CSS, vous pouvez facilement personnaliser la boîte dans une feuille de style distincte. Dans les petits projets, travailler avec SVG peut ne pas sembler difficile, mais si vous devez créer la même boîte plusieurs fois, écrire le même code plusieurs fois est une tâche ardue. Si vous ne souhaitez pas changer la position de la case, vous n'êtes pas obligé d'utiliser les attributs "x" et "y" avec "". Ces types de cases sont utilisées pour charger des animations ou peuvent être utilisées comme cartes pour afficher des informations

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!