Figure -Tag in HTML

HTML5 führte eine HTML vor " Stichworte.

Stilfigurelement

Figur
Grenze: 5PX Solid #B69898;
Anzeige: Flex;
Rand: Auto;
Flex-Flow: Spalte;
Max-Breite: 290px;
Polsterung: 2px;

Die folgenden CSS -Eigenschaften werden auf das Figurenelement angewendet:

• “GrenzeEigentum ist ein Kurzeigeneignis, das die Grenze des Elements festlegt. Es gibt Werte für die Breite des Grenze, den Stil des Randes und die Farbe des Randes an.
• “Anzeige”Mit Value Flex macht Flex ein reaktionsschnelles Layout für die Elemente.
• “RandDie Eigenschaft wird verwendet, um das Element horizontal in die Mitte zu platzieren.
• “Flex-FlussEigenschaft mit der Wertspalte gibt die Richtung des Flex -Containers und das Verpackungsverhalten an.
• “maximale BreiteGibt den Wert der maximalen Breite eines Elements an.
• “Polsterung”Erzeugt Platz um den Inhalt des Elements.

Stil img Element

img
MAX-HEIGHT: 140PX;
Max-Breite: 290px;

Hier ist die Beschreibung der hinzugefügten Eigenschaften:

• “maximale Höhe”Eigenschaft mit dem Wert 140px legt die maximale Höhe des Elements auf 140px fest.
• “maximale Breite”Eigenschaft mit dem Wert 140px legt die maximale Breite des Elements auf 140px fest.

Derzeit sieht unsere Webseite so aus:

Style nun das Element im folgenden Abschnitt.

Style Figcaption -Element

Figcaption
Hintergrundfarbe: RGB (25, 11, 104);
Farbe: Ghostwhite;
Text-Align: Mitte;
Schriftart: kursiv kleinere ohne Serif;
Polsterung: 6px;

Wenden Sie die folgenden CSS -Eigenschaften auf das Figcaption -Element an:

• “HintergrundfarbeDie Eigenschaft wird verwendet, um Farbe auf den Hintergrund des Elements anzuwenden.
• “FarbeGibt die Schriftfarbe an.
• “TextausrichtungDie Eigenschaft legt die Ausrichtung des Elements nach seinem Wert fest.
• “SchriftartEigenschaft mit dem Wert, der als kursiv kleiner serif eingestellt ist.
• “PolsterungEigenschaft fügt Platz um den Inhalt des Elements hinzu.

Durch die Bereitstellung der oben genannten CSS -Eigenschaften für die Elemente erhalten wir das Ergebnis, wie unten gezeigt:

Wir haben die wesentlichen Informationen zum HTML -Abbildung -Tag in HTML zusammengestellt.

Abschluss

Es gibt verschiedene Eigenschaften, die wir auf die HTML-Elemente anwenden können, um sie gut aussehend und organisiert zu machen. Ebenso werden die ODER -Tags verwendet, um Bilder in die HTML einzufügen. Insbesondere übernimmt das Element die Inhaltsgruppe wie Codeauflistung, Diagramme oder Fotos. Es kann auch den Inhalt enthalten, um eine Beschriftung zu verleihen. Dieser Artikel hat die Verwendung des HTML -Figur -Tags mit einem praktischen Beispiel gezeigt.