HOME 

 WEBMASTER 

 • Workshops 
 HTML Grundlagen 
 Tabellen 
 Grafiken 
 Frames 
 Hyperlinks 
 CSS Grundlagen 
 • Tools 
 • Weblog 
 WEBMAIL 

 SERVICE 

 • Jetzt anmelden 
 • Login 
 • Support 
 • Passwort? 
 • Informationen 
 • Kontakt 
 ANMELDUNG 

Quick Navigation FreeCity » Webmaster » Workshops » CSS
Cascading Stylesheets: Gestaltung von Rahmen

Ein besonders wichtiges Designelement für Webseiten stellen Rahmen dar. CSS-Befehle lassen sich hier besonders gut verwenden, da sie sich jeweils auf die ganze Seite beziehen.


Für die Formatierung des Rahmens sind folgende Attribute möglich:

Rahmendicke
border-width:Wert; /* alle Seiten */
border-top-width:Wert; /* nur oben */
border-bottom-width:Wert; /* nur unten */
border-left-width:Wert; /* nur links */
border-right-width:Wert; /* nur rechts */


Für Wert einen numerischen Wert wie 2px oder 1mm oder einen der folgenden Werte notieren:
thin = dünn.
medium = mittelstark.
thick = dick
Rahmenfarbe
border-color:Wert; /* alle Seiten */
border-top-color:Wert; /* nur oben */
border-bottom-color:Wert; /* nur unten */
border-left-color:Wert; /* nur links */
border-right-color:Wert; /* nur rechts */

 
Für Wert eine Farbangabe wie #FFCC99, red oder RGB (96,255,0) notieren
Wenn Sie die Farbcodes nicht kennen, dann können Sie ganz bequem in der » FreeCity-Farbtabelle nachschauen.
Rahmentyp
border-style:Wert; /* alle Seiten */
border-top-style:Wert; /* nur oben */
border-bottom-style:Wert; /* nur unten */
border-left-style:Wert; /* nur links */
border-right-style:Wert; /* nur rechts */
 
Für Wert einen der folgenden Werte notieren:
none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen),
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt

Rahmen
border:Wert; /* alle Seiten */
border-top:Wert; /* nur oben */
border-bottom:Wert; /* nur unten */
border-left:Wert; /* nur links */
border-right:Wert; /* nur rechts */
 
Für Wert jeweils drei Angaben mit geeigneten Werten für border-style, border-width und border-color mit Leerzeichen dazwischen notieren.
z.B. border:3px solid #FFCC99; oder border:bottom:1cm inset red;

 
Beispiele:  
Gestrichelter roter Tabellenrahmen

  <table style="border-width: 1px; border-color: red; border-style: dashed;" width="240" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>Test</td>
</tr>
</table>

 

Mehrfarbiger Rahmen mit 3D-Effekten

  <table style="border-width: 2px; border-color: blue; border-style: ridge;" width="240" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>Test</td>
</tr>
</table>

» Einführung CSS
» Textformatierung
» Übersicht

Gratis anmelden! 
Username

Passwort

Passwort vergessen? 
Dienste pflegen
Fragen - Antworten

DatenschutzerklärungNutzungsbedingungen | Impressum

FreeCity ein Dienst der KONTENT GmbH