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:
- die Rahmenfarbe (border-color)
- die Rahmenstärke (border-width)
- die Rahmenart (border-style)
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:
- solid = durchgezogen
- double = doppelt
- none = kein Rahmen (unsichtbar)
- hidden = kein Rahmen (unsichtbar)
- dotted = gepunktet
- dashed = gestrichelt
- groove = 3D-Effekt
- ridge = 3D-Effekt
- inset = 3D-Effekt
- outset = 3D-Effekt
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:
- border-top-color
- border-right-color
- border-bottom-color und
- border-left-color
Für die Rahmenstärke
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
Für die Rahmenart
- border-top-style,
- border-right-style
- border-bottom-style
- border-left-style
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;
}- Startseite
- Video-Kurs
- HTML lernen
- CSS lernen
- Einbinden von CSS
- Aufbau CSS-Anweisung
- CSS kontrollieren mit CSS-Validator
- CSS und Farbe
- Schriften mit CSS gestalten
- Rahmen in CSS
- CSS Box Modell Hierarchie
- Hintergrundbilder mit CSS
- CSS-Selektoren
- Layout über CSS
- horizontale Navigation
- einfache vertikale Steuerung
- Tabellen mit CSS formatieren
- Formulare über CSS gestalten
- Erklärung zu display
- CSS Tipps und Tricks
- Webhosting u. Domain
- Werkzeuge
- Rund um Websites
- Impressum
hier klicken für
mehr Informationen