Wie man ein Rechteck in HTML oder CSS zeichnet

Ein Rechteck kann durch Verwendung von HTML sowie einer Kombination von HTML und CSS erstellt werden. Während der Verwendung der CSS -Eigenschaften zum Zeichnen eines Rechtecks ​​ist einfach erforderlich, um den entsprechenden Selektor des HTML -Elements hinzuzufügen und einige Styling -Eigenschaften im CSS -Stilelement anzuwenden. Wenn der Entwickler jedoch ein Rechteck zeichnen möchte, ohne ein separates CSS -Style -Element hinzuzufügen, kann das Inline -Styling innerhalb der HTML -Öffnungs -Tags verwendet werden.

In diesem Artikel wird erläutert, wie ein Rechteck durch die folgenden Methoden zeichnet:

• Methode 1: Zeichnen eines Rechtecks ​​mit CSS
• Methode 2: Zeichnen eines Rechtecks ​​mit HTML

Methode 1: Zeichnen eines Rechtecks ​​mit CSS

Um ein Rechteck mit dem CSS -Stilelement zu zeichnen, muss ein einfaches HTML -Element hinzugefügt werden, indem es ihm eine Klasse oder eine ID zugewiesen wird. Anschließend können die Eigenschaften dann über die ID- oder Klassenauswahl auf das Element angewendet werden. Es formt das Element in Form eines Rechtecks.

Beispiel
Verstehen wir das obige Konzept mit Hilfe eines Beispiels:

In der obigen HTML -Aussage eine ““"Containerelement wurde mit einer Klasse hinzugefügt, die als" als "deklariert als" erklärt wurdeRechteck”.

Nach dem Erstellen eines "Element, die CSS -Eigenschaften können darauf angewendet werden, um den Div -Behälter als Rechteck in der Ausgangsschnittstelle darzustellen:

.Rechteck

Breite: 300px;
Höhe: 150px;
Hintergrund: Pink;
Marge-Links: 25%;

Im obigen Code -Snippet:

• Der Klassenauswahl.RechteckWurde hinzugefügt, um sich auf das jeweilige Div -Containerelement zu beziehen.
• Innerhalb des Klassenwählers die “Breite"Eigenschaft wurde hinzugefügt und definiert als"300px”. Dadurch wird die Rechteckbreite auf 300 Pixel festgelegt.
• In ähnlicher Weise die “Höhe"Eigenschaft setzt die Höhe des Rechtecks ​​auf"150px”.
• “Hintergrund"Eigentum wurde als" definiert als "Rosa”. Dies färbt das Rechteck rosa.
• Der "linksDie Eigenschaft wurde gerade hinzugefügt, um das Rechteck leicht nach rechts zu bewegen, um eine bessere visuelle Darstellung des Rechtecks ​​zu erhalten.

Dadurch wird ein Rechteck auf der Webseite erstellt:

Methode 2: Zeichnen eines Rechtecks ​​mit HTML

Ein weiterer Ansatz besteht darin, alle Eigenschaften hinzuzufügen, die zum Zeichnen eines Rechtecks ​​in den HTML -Eröffnungs -Tags erforderlich sind.

Beispiel
Lassen Sie uns dies mit einem einfachen Beispiel verstehen, indem Sie das HTML -Tag in das "" -Tag "" im Haupt -Div -Tag) hinzufügen:

Im obigen Code -Snippet:

• A ""Containerelement wurde hinzugefügt, um eine DIV mit der ID zu erstellen"rechte”.
• Innerhalb des Eröffnungs -Div -Tags, das Inline -CSS “Rand”Eigenschaft definiert die vertikale Platzierungsposition des Rechtecks ​​oder des Divs als“100px"Und die horizontale Platzierungsposition als" als "150px”.
• Im Inneren ""Element, da ist das"”(Skalierbares Vektorgrafikelement) Element zum Hinzufügen von Grafiken zum“" Element.
• Als nächstes eine """Element wurde mit der Klasse hinzugefügt, die als" als "deklariert" hinzugefügt wurdeRechteck”.
• Das Inline -CSS -Styling in der “"Tag definiert die Farbe des Rechtecks ​​als"lila" durch das "Füllung: lila" Eigentum.
• Der "Breite" und das "HöheInline -Eigenschaften definieren die horizontale und vertikale Länge des Rechtecks.

Das Folgende ist das Ergebnis, das über den oben genannten Code -Snippet generiert wird:

Wir haben zwei Methoden zum Zeichnen eines Rechtecks ​​gezeigt.

Abschluss

Ein Rechteck kann beim Auftragen des Inline -Stylings leicht gezeichnet werden. In diesem Fall ist es einfach erforderlich, das hinzuzufügen “Rand","Höhe" Und "BreiteEigenschaften in den Eröffnungs -Tags der Elemente. Fügen Sie beim Hinzufügen eines separaten CSS -Stilelements das hinzu “Höhe","Breite" Und "FarbeEigenschaften im CSS -Stilelement. In diesem Blog wurde die Ansätze zum Zeichnen eines Rechtecks ​​in HTML oder CSS besprochen.