Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 34): Rahmen

HTML & CSS für Einsteiger (Teil 34): Rahmen

Kommt die Sprache auf Rahmen, denken die meisten sicherlich zunächst an Tabellen. Und tatsächlich spielen Rahmen in Verbindung mit Tabellen eine wichtige Rolle. Allerdings lassen sich durch CSS eben auch noch andere Elemente mit Rahmen ausstatten. Und wie diese Rahmen dann letztendlich aussehen, kann man ebenfalls per CSS-Definitionen explizit bestimmen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


In CSS existieren mit border und outline zwei verschiedene Rahmenarten. Während border immer einen rechteckigen Rahmen kennzeichnet, sind die in CSS2 eingeführten outline-Rahmen für nicht eckige Bereiche gedacht. Und noch einen Unterschied gibt es: Bei outline erfolgt die Umrandung außerhalb des Rahmen, wodurch ein Element sowohl einen Rahmen mit border als auch eine Umrandung mit outline zugewiesen bekommen kann.

Die in diesem Tutorial vorgestellten Rahmendefinitionen sind vor allem für solche Elemente interessant, die einen eigenen Absatz bilden. Prinzipiell lassen sie sich aber natürlich auch auf andere Elemente anwenden.


Rahmen definieren

Mit border kann das Aussehen des gesamten Rahmens um ein Element bestimmt werden.

Bei der allgemeinen border-Eigenschaft handelt es sich um eine Zusammenfassung der folgenden Werte, auf die noch ausführlich eingegangen wird:

border-color
border-style
border-width

Die Werte zu den einzelnen Eigenschaften werden durch Leerzeichen voneinander getrennt notiert. Die Reihenfolge, in der man die Eigenschaften angibt, spielt dabei keine Rolle. Für border existieren zudem vier Untereigenschaften, durch die Angaben zu Rahmenfarbe, Rahmendicke und Rahmentyp für einzelne Elementseiten gemacht werden können.

border-top – Rahmen oben
border-right – Rahmen rechts
border-bottom – Rahmen unten
border-left – Rahmen links

Das folgende Beispiel zeigt die Verwendung von border. Durch diese Definition wird ein drei Punkt breiter, schwarzer und durchgezogener Rahmen erzeugt.
<p style="border:3pt solid #000000;">
   Herzlich willkommen
</p>

 
Das Ergebnis im Browser:

Bilder



Die Rahmenfarbe

Über border-color wird die Rahmenfarbe bestimmt. Erlaubt sind dabei die folgenden Werte:

transparent – transparenter Rahmen
• Farbwert

Wird nur ein Wert angegeben, gilt dieser für alle Rahmenseiten. Um für die einzelnen Seiten verschiedene Farben zu definieren, gibt man mehrere Werte, jeweils durch Leerzeichen getrennt, an.

• Zwei Werte – der erste Wert für die obere und untere, der zweite für die linke und rechte Rahmenfarbe.
• Drei Werte – der erste Wert für die obere, der zweite für die linke und rechte, der dritte für die untere Rahmenfarbe.
• Vier Werte – erster Wert für oben, zweiter für die rechte, dritter für die untere und der vierte für die linke Rahmenfarbe.

Ebenso können auch die folgenden border-Untereigenschaften verwendet werden:

border-top-color – Rahmenfarbe oben
border-right-color – Rahmenfarbe rechts
border-bottom-color – Rahmenfarbe unten
border-left-color – Rahmenfarbe links

Ein Beispiel:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px">
   PSD-Tutorials.de
</p>

Und hier das Ergebnis im Browser:

Bilder



 

Die Linienart

Über border-style lässt sich die Linienart des Rahmens festlegen.

Nachfolgend findet ihr eine Auflistung der möglichen Rahmenvarianten:

none – unsichtbarer Rahmen
dotted – gepunktet
dashed – gestrichelt
solid – durchgezogen
double – doppelt durchgezogen
groove – 3D-Linie
ridge – 3D-Linie
inset – 3D-Linie
outset – 3D-Linie

Hier ein Beispiel, wie die Rahmenarten aussehen:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 p.none {border-style:none;}
 p.dotted {border-style:dotted;}
 p.dashed {border-style:dashed;}
 p.solid {border-style:solid;}
 p.double {border-style:double;}
 p.groove {border-style:groove;}
 p.ridge {border-style:ridge;}
 p.inset {border-style:inset;}
 p.outset {border-style:outset;}
 p.hidden {border-style:hidden;}
 </style>
 </head>
 <body>
 <p class="none">none</p>
 <p class="dotted">dotted</p>
 <p class="dashed">dashed</p>
 <p class="solid">solid</p>
 <p class="double">double</p>
 <p class="groove">groove</p>
 <p class="ridge">ridge</p>
 <p class="inset">inset</p>
 <p class="outset">outset</p>
 <p class="hidden">hidden</p>
 </body>
 </html>

 
Das Ergebnis im Browser:

Bilder



Gibt man nur einen Wert an, gilt der für alle Seiten des Rahmens. Um für die einzelnen Seiten Rahmentypen zu definieren, notiert man mehrere Werte, jeweils durch Leerzeichen getrennt.

• Zwei Werte – der erste Wert für die obere und untere, der zweite für die linke und rechte Rahmenart.
• Drei Werte – der erste Wert für die obere, der zweite für die linke und rechte, der dritte für die untere Rahmenart.
• Vier Werte – erster Wert für oben, zweiter für die rechte, dritter für die untere und der vierte für die linke Rahmenart.

Ebenso können auch die folgenden border-Untereigenschaften verwendet werden:

border-top-style – Rahmenart oben
border-right-style – Rahmenart rechts
border-bottom-style – Rahmenart unten
border-left-style – Rahmenart links

 
Auch hierzu ein Beispiel:
<p style="border-bottom-style: dashed;">
   Gestrichelter Rahmen
</p>

Und so sieht es im Browser aus:

Bilder



 

Die Rahmenbreite festlegen

Durch border-width wird die Breite des Rahmens bestimmt.

• Längenangabe
thin – dünner Rahmen
medium – mittelstarker Rahmen
thick – dicker Rahmen

Wird nur ein Wert angegeben, gilt der für alle Seiten des Elements. Um für einzelne Seiten unterschiedliche Rahmendicken festzulegen, gibt es zwei Möglichkeiten. Bei der ersten Variante notiert man mehrere durch Leerzeichen getrennte Werte.

• Zwei Werte – der erste Wert für die obere und untere, der zweite für die linke und rechte Rahmenbreite.
• Drei Werte – der erste Wert für die obere, der zweite für die linke und rechte, der dritte für die untere Rahmenbreite.
• Vier Werte – erster Wert für oben, zweiter für die rechte, dritter für die untere und der vierte für die linke Rahmenbreite.

Ebenso könnt ihr auch die folgenden border-Untereigenschaften verwenden:

border-top-width – Rahmendicke oben
border-right-width – Rahmendicke rechts
border-bottom-width – Rahmendicke unten
border-left-width – Rahmendicke links

Ein Beispiel:
<p style="border-width:2px;border-style: dotted;">
   Herzlich willkommen
</p>


 

Die Rahmenfarbe für outline

Über die Eigenschaft outline-color wird die Rahmenfarbe definiert. Die Angabe ist identisch mit border-color.

invert – es wird eine Farbe invertiert. Diese Farbe entsteht durch die Umkehrung aller Bits eines hexadezimalen Farbwerts.
• Farbangabe

Ein Beispiel:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;">
   PSD-Tutorials.de
</p>

So sieht es im Browser aus:

Bilder



 

Der Rahmentyp für outline

Die Angabe outline-style bestimmt die Art der Kontur. Erlaubt sind die gleichen Werte wie bei border-style.

none – unsichtbarer Rahmen
dotted – gepunktet
dashed – gestrichelt
solid – durchgezogen
double – doppelt durchgezogen
groove – 3D-Linie
ridge – 3D-Linie
inset – 3D-Linie
outset – 3D-Linie

Ein Beispiel:
<p style="outline-style:solid;outline-width:2px; outline-color:red;">
   PSD-Tutorials.de
</p>


Die Rahmendicke für outline

Die Angabe outline-width ist mit border-width identisch. Auch hierüber wird die Rahmendicke definiert. Um eine sichtbare Rahmenlinie zu erzeugen, kombiniert man outline-width immer mit outline-style.

medium – mittelstarker Rahmen
thin – dünner Rahmen
thick – dicker Rahmen
• Längenangabe – bestimmt die Rahmendicke

Ein Beispiel:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
    Herzlich willkommen
</p>

Und wie bei border gibt es auch für outline-Rahmen eine allgemeine Eigenschaft.
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>PSD-Tutorials.de</title>
 <style>
 p {
 border:red solid thick;
 outline:green dotted thick;
 }
 </style>
 </head>
 <body>
 <p>Willkommen auf PSD-Tutorials.de!</p>
 </body>
 </html>

Diese fasst dann die folgenden Eigenschaften zusammen:

outline-width
outline-style
outline-color

Das Prinzip ist hier dann identisch mit dem der allgemeinen border-Eigenschaft.

Bilder


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Hexe6
  • 12.10.2016 - 17:09

Vielen Dank für das Video.

Portrait von Monti7
  • 13.07.2015 - 10:20

Super! Vielen herzlichen Dank für das PDF

Portrait von Kiasa
  • 20.04.2015 - 18:17

Danke für das weitere Video-Tutorial!

Portrait von rocking_sid
  • 19.03.2015 - 17:06

Vielen Dank für das lehrreiche Tutorial!

Portrait von winzling
  • 19.03.2015 - 16:33

Vielen Dank!

Portrait von MARIA52
  • 19.03.2015 - 15:44

Vielen Dank für das Tutorial.

Portrait von BOPsWelt
  • 19.03.2015 - 15:15

Vielen Dank für einen weiteren Teil. :)

Portrait von dlieb
  • 19.03.2015 - 15:07

Vielen Dank für den Teil 34

Portrait von jmittendorf
  • 19.03.2015 - 14:51

Danke für dieses sehr interessante und lehrreiche Tutorial.

Bin schon auf weitere Folgen gespannt.

Portrait von fe_web
  • 19.03.2015 - 13:32

Super diese Tutorialreihe und sehr lehrreich - Danke

Portrait von teste123
  • 19.03.2015 - 13:19

vielen Dank
MfG

Portrait von pallasathena
Portrait von samtron
  • 19.03.2015 - 13:14

vielen Dank
MfG

Portrait von renate_C
  • 19.03.2015 - 13:13

Ich bedanke mich für das interessante Texttutorial.

Portrait von Caesarion2004
  • 19.03.2015 - 13:11

Vielen Dank für das weitere Tutorial der interessanten und informativen Reihe.

Portrait von Kundentest
  • 19.03.2015 - 13:03

Herzlichen Dank für das Tutorial.

Portrait von Enigmon
  • 01.02.2015 - 12:17

Schön einfach erklärt.. Vielen Dank!!

Portrait von pemis
  • 28.01.2015 - 13:34

Wieder ein sehr leicht nachvollziehbares Video zum Internetseitenbau.

Portrait von fe_web
  • 26.01.2015 - 19:18

Toll gemacht - immer wieder interessant zum dazu lernen

Portrait von Dineria
  • 24.01.2015 - 10:40

Danke für den weiteren Teil! Eine Sache ist mir allerdings abermals aufgefallen: Klar, wenn man Top kennt, sind Left, Right und Bottom wenig überraschend, aber Du zeigst es nur so zackzack, dass man es kaum sieht... Da denke ich mir, entweder doch eine halbe Sekunde länger oder gleich bleiben lassen... ;-)

x
×
×