Maison > interface Web > tutoriel CSS > Comment créer une boîte remplie de couleurs en HTML/CSS ?

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

WBOY
Libérer: 2023-09-07 13:29:02
avant
1555 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion
  • Créez maintenant une boîte à l'intérieur de la balise svg en utilisant le balisage sémantique .

<rect/>
Copier après la connexion
  • 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" />
Copier après la connexion
  • 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 .



     create box using svg 


    

Created using svg

<rect width="100" height="100" fill="green" />
Copier après la connexion

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>
Copier après la connexion
  • Ajoutez maintenant la balise de style interne à la balise d'en-tête HTML.

<style></style>
Copier après la connexion
  • 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>
Copier après la connexion
  • 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.



     create u=box using simple HTML and CSS
    


    <div></div>

Copier après la connexion

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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal