Erstellen Sie einen farbigen Rahmen mit HTML und CSS

Ein Rand in Ihren HTML-Seiten kann dazu beitragen, die Aufmerksamkeit auf einen Textabschnitt zu lenken oder andere HTML-Elemente zu umgeben.

Wie unten zu sehen ist, kann mit HTML und CSS auf Ihrer Webseite ein Rand um jeden Text erstellt werden. Im folgenden Beispiel haben wir einen Absatz () mit einem roten Rahmen umgeben.

Erstes Beispiel mit Text, der von einem roten Rand umgeben ist.

Dieses Beispiel hat auch mehrere Zeilen.

Um das obige Beispiel zu erstellen, wurde der folgende Code verwendet.

Erstes Beispiel mit Text, der von einem roten Rand umgeben ist.

Dieses Beispiel hat auch mehrere Zeilen.

Im obigen Code definiert der Stil die Rahmengröße (px für Pixel), den Stiltyp und die Rahmenfarbe. Der Stil des Rahmens ist, wie der Rahmen auf dem Bildschirm angezeigt wird. Andere Arten von Randstilen sind gepunktet, gestrichelt, doppelt, Nut, First, Einfügung und Anfang. Die Rahmenfarbe definiert die Farbe, die Sie für den Rand verwenden möchten. Im obigen Beispiel wurde der Farbcode # FF0000 verwendet, der Farbcode für Rot.

Stil mit CSS definieren

Das Erscheinungsbild von Elementen auf einer Webseite kann auch mit Inline-CSS definiert werden. Inline-CSS wird in Ihrem HTML-Dokument im Element definiert. Sie können das CSS auch in einer externen Datei mit der Erweiterung .css definieren . Sie können dann von jedem HTML-Dokument aus einen Link zu dieser Datei erstellen, und Elemente in diesem Dokument haben Zugriff auf die CSS-Stile. Mit dem folgenden CSS-Code wird beispielsweise eine neue Klasse mit dem Namen "borderexample" erstellt, die auf alle anderen HTML-Tags angewendet werden kann.

.borderexample {border-style: solid; Rahmenfarbe: # 287EC7; }

Wenn Sie mit dem obigen Code diesen Rahmenstil auf einen HTML-Absatz anwenden möchten, können Sie etwas ähnlich dem folgenden Beispiel eingeben.

Hier ist ein Beispiel für einen Rahmen, der mit CSS erstellt wurde