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.