Wie erstellt man in HTML/CSS ein mit Farbe gefülltes Feld?

Übersicht

HTML und CSS sind Technologien, mit denen wir jede Form und jeden Rahmen erstellen können. Das Erstellen einer mit Farbe gefüllten Box kann mit HTML erreicht werden, da wir mit Hilfe von HTML einen einfachen Boxrahmen erstellen und ihn mithilfe von CSS-Eigenschaften mit Farbe füllen können. Wir können auch das HTML-Attribut „svg“ (skalare Vektorgrafiken) verwenden, um ein Feld zu zeichnen, und das Füllfarbenattribut, um das Feld mit Farbe zu füllen.

Grammatik

Die Syntax für die Verwendung von SVG zum Erstellen eines Felds und zum Füllen mit Farbe lautet wie folgt. Es enthält vier Attribute: x, y, Breite, Höhe und Polsterung. Die x-Achse legt also die horizontale Position der Box relativ zum Bildschirm fest, die y-Achse legt die vertikale Position fest, die Höhe legt die Höhe der Box fest, die Breite legt die Breite der Box fest und die Fülleigenschaft legt fest die Farbe der Box innerhalb der Box.

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

Algorithmus 1

• Erstellen Sie eine HTML-Datei in einem Texteditor, die HTML-Boilerplate enthält.

• Fügen Sie nun das SVG-Tag zum HTML-Text hinzu.

<svg></svg>

• Erstellen Sie nun mithilfe des semantischen Markups ein Feld innerhalb des SVG-Tags.

<rect/>

• Legen Sie nun Eigenschaften wie x, y, Breite, Höhe und Polsterung im -Tag fest.

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

• Öffnen Sie nun Ihren Browser und Sie sehen ein mit Farbe gefülltes Feld.

Beispiel 1

In diesem Beispiel verwenden wir das HTML-SVG-Tag, um mithilfe des Attributs ein Feld zu zeichnen.

    



    
 Created using svg 
    

Algorithmus 2

• Erstellen Sie eine index.html-Datei in einem Texteditor und fügen Sie der Datei ein HTML-Boilerplate hinzu

• Fügen Sie nun den div-Container zum HTML-Body hinzu

<div></div>

• Fügen Sie nun das innere Style-Tag zum HTML-Head-Tag hinzu.

<style></style>

• Nun verwenden Sie CSS-Stileigenschaften, um die Höhe, Breite und Farbe des Felds festzulegen.

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

• Öffnen Sie den Browser, das Feld wurde erfolgreich erstellt und mit Farbe gefüllt.

Beispiel 2

In diesem Beispiel erstellen wir eine Box mit einem HTML-Div-Container und verwenden CSS-Stileigenschaften, um die Box mit Farbe zu füllen.

    
    



    <div></div>

Fazit

So wie wir SVG (skalare Vektorgrafiken) zum Erstellen einer Box verwendet haben, können wir damit auch viele verschiedene Formen erstellen. Der beste Weg, ein mit Farben gefülltes Feld zu erstellen, ist die Verwendung eines einfachen Div-Containers mit einigen CSS-Stileigenschaften, da Sie das Feld mit CSS problemlos in einem separaten Stylesheet anpassen können. In kleinen Projekten mag die Arbeit mit SVG nicht schwierig erscheinen, aber wenn Sie dieselbe Box mehrmals erstellen müssen, ist das mehrfache Schreiben desselben Codes eine entmutigende Aufgabe. Wenn Sie die Position der Box nicht ändern möchten, müssen Sie die Attribute „x“ und „y“ nicht mit „“ verwenden. Diese Art von Boxen werden zum Laden von Animationen verwendet oder können als Karten zur Anzeige von Informationen verwendet werden

Das obige ist der detaillierte Inhalt vonWie erstellt man in HTML/CSS ein mit Farbe gefülltes Feld?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!