So erstellen Sie mit HTML und CSS einen farbigen Rahmen um Text

Mithilfe von Rahmen können Sie einen Rahmen um Text hinzufügen und den Rahmen auf nahezu jede Farbe festlegen oder ändern. Ein Rahmen in Ihren HTML-Seiten hilft dabei, die Aufmerksamkeit auf einen Textabschnitt zu lenken oder ein anderes HTML-Element zu umgeben.

Wie unten gezeigt, kann mithilfe von HTML und CSS auf Ihrer Webseite ein Rahmen um jeden beliebigen Text erstellt werden. Im folgenden Beispiel haben wir einen Absatz (

) mit einem roten Rand umgeben.

Erstes Beispiel mit rot umrandetem Text.
Auch dieses Beispiel hat mehrere Zeilen.

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

<p style="border:3px; border-style:solid; border-color:#FF0000; padding: 1em;">First example with text surrounded by a red border.<br>This example also has multiple lines.</p>

Im obigen Code definiert der Stil die Rahmengröße (“px” kurz für Pixel), den Stiltyp und die Rahmenfarbe. Der Stil des Rahmens gibt an, wie der Rahmen auf dem Bildschirm angezeigt wird. Andere Arten von Umrandungsstilen umfassen gepunktet, gestrichelte, doppelt, Rille, Grat, Einsatz und Anfang. Die Rahmenfarbe definiert die Farbe, die Sie für den Rahmen verwenden möchten. Im obigen Beispiel wird der Farbcode #FF0000 verwendet, der der Farbcode für Rot ist.

Stil mit CSS definieren

Das Aussehen von Elementen auf einer Webseite kann auch mit Inline-CSS definiert werden. Inline-CSS wird in Ihrem HTML-Dokument im Element definiert. Oder Sie können das CSS in einer externen Datei mit der Erweiterung .css definieren. Dann können Sie von jedem HTML-Dokument aus auf diese Datei verlinken, und Elemente in diesem Dokument haben Zugriff auf die CSS-Stile. Mit dem folgenden CSS-Code wird beispielsweise eine neue Klasse namens „borderexample“ erstellt, die auf jedes andere HTML-Tag angewendet werden kann.

<style>
.borderexample {
 border-style:solid;
 border-color:#287EC7;
}
</style>

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

<p class="borderexample">Here is an example of a border created using CSS</p>