Webmaster-Crashkurs

Rahmen in CSS

Jedem Element kann über CSS einen Rahmen verpasst werden. Die Welt ist also eine Box. Erstellen Sie zum Testen eine Seite mit der Überschrift „CSS ist toll“ und 2 Absätze mit Inhalt.

<h1>CSS ist toll</h1>
<p>Über CSS kann man klasse Design machen und jedes Element 
in eine Box stecken und Ihm einen Rahmen verpassen.</p>

Ein Rahmen benötigt 3 Angaben. Erst wenn diese 3 Angaben vorhanden sind, wird der Rahmen auch sichtbar. Die Angaben für einen Rahmen in CSS sind:

Rahmenfarbe

Die Rahmenfarbe kann wie bereits im Kapitel Farbe gezeigt auf verschiedene Arten angegeben werden. Wir können die englischen Farbnamen verwenden oder z.B. den entsprechenden Hexadezimalen Code.

Wenn wir nun die Überschrift mit einem grünen Rahmen versehen wollen, lautet der erste Teil der CSS-Anweisung:

h1 {
    border-color: green;
}

Rahmenstärke

Zusätzlich muss die Rahmenstärke angegeben werden. Denn ein Rahmen mit einer Breite von 0 Pixel wird nicht zu sehen sein. Wir erweitern also unsere bisherigen CSS-Anweisungen um

h1 {
    border-color: green;
    border-width: 5px;
}

Rahmenart

Und bevor nicht die dritte Angabe gemacht wurde, ist noch kein Rahmen zu sehen. In der dritten Angabe geben wir das Design des Rahmens mit. Dabei haben wir verschiedene Möglichkeiten. Von einer einfachen durchgezogenen Linie, über eine gepunktete, gestrichelte und doppelte Linie und mehr.

Es gibt die Anweisungen:

Die Erweiterung der CSS-Anweisungen lautet für eine durchgezogene Linie also:

h1 {
    border-color: green;
    border-width: 5px;
    border-style: solid;
}

Jetzt sollte um Ihre Überschrift ein Rahmen mit der Rahmenstärke von 5 Pixel, und soliden Rahmenart und der Rahmenfarbe grün erscheinen.

Probieren Sie es auch bei Ihren Absätzen aus!

Jede Rahmenseite anders

Wird nicht angegeben, auf welche Seite sich die Angaben beziehen, wird es auf alle Seiten gesetzt.

Sie können aber durch Angabe von top, bottom, right und left es bestimmen. So sind 4 farbige Rahmen möglich. Die entsprechenden CSS-Anweisungen sind:

Für die Farbe:

Für die Rahmenstärke

Für die Rahmenart

Aufgabe: Basteln Sie nun folgendes Erscheinungsbild nach

Kurzschreibweise für die CSS-Anweisung für Rahmen

Es gibt auch eine Kurzschreibweise für Rahmen in CSS. Dazu wird nur border: angegeben und die 3 Werte.

h1 {
    border: 1px solid red;
}

Auch für die Rahmenseite gibt es Kurzschreibweisen

h1 {
    border-top:  10px solid red;
    border-right:  6px dotted yellow;
    border-bottom:  12px double blue;
    border-left:  8px dashed green;
}
HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2023   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: