|
CSS-Attribute für Rahmen und Ränder
|
| Syntax am Beispiel eines Absatzes: |
innerhalb des BODYs: <p style="border:6px; border-color:#00FFFF; margin:4pt">Absatztext</p>
innerhalb des HEADs oder externe CSS-Datei: p {border:6px; margin:4pt} |
| border |
Z.B.: mm, cm, pt |
Definiert die Rahmenbreite. |
<p style="border:4px;
border-style:solid">
Rahmenbreite = 4 px</p> |
Rahmenbreite = 4 px
|
| border-top |
Z.B.: mm, cm, pt |
Definiert die obere Rahmenbreite. |
<p style="border-top: 4pt;
border-top-style:solid">
Obere Rahmenbreite = 4 pt </p> |
Obere Rahmenbreite
= 4 pt
|
| border-bottom |
Z.B.: mm, cm, pt |
Definiert die untere Rahmenbreite. |
<p style="border-bottom: 6pt;
border-bottom-style:solid">
Untere Rahmenbreite = 3 pt </p> |
Untere Rahmenbreite
= 3 pt
|
| border-left |
Z.B.: mm, cm, pt |
Definiert die linke Rahmenbreite. |
<p style="border-left: 4pt;
border-left-style:solid">
Linke Rahmenbreite = 4 pt. </p> |
Linke Rahmenbreite = 4 pt.
|
| border-right |
Z.B.: mm, cm, pt |
Definiert die rechte Rahmenbreite. |
<p style="border-right: 6pt;
border-right-style:solid">
Rechte Rahmenbreite = 6 pt. </p> |
Rechte Rahmenbreite = 6 pt.
|
| border-style |
|
Definiert den Rahmenstil. |
|
|
| |
solid |
Rahmenstil: durchgezogen. |
<p style="border:1; border-style:solid"
align="center"> durchgezogen </p> |
durchgezogen
|
| |
double |
Rahmenstil: Doppellinie. |
<p style="border:3; border-style:double"
align="center"> Doppellinie </p> |
Doppellinie
|
| |
groove |
Rahmenstil: 3D-Effekt mit vertieftem Rand ("Furche"). |
<p style="border:4; border-style:groove"
align="center"> vertiefter Rand </p> |
vertiefter Rand
|
| |
ridge |
Rahmenstil: 3D-Effekt mit erhöhtem Rand ("Rücken"). |
<p style="border:4; border-style:ridge"
align="center"> erhöhter Rand </p> |
erhöhter Rand
|
| |
inset |
Rahmenstil: 3D-Effekt mit vertieftem Inhalt ("Schaltläche"). |
<p style="border:4; border-style:inset"
align="center"> vertiefter Rand </p> |
vertiefter Inhalt
|
| |
outset |
Rahmenstil: 3D-Effekt mit erhöhtem Inhalt ("Scaltfläche"). |
<p style="border:4; border-style:outset"
align="center"> erhöhter Rand </p> |
erhöhter Inhalt
|
| |
dotted |
Rahmenstil: punktiert. |
<p style="border:2; border-style:dotted"
align="center"> punktierter Rand </p> |
punktierter Rand
|
| |
dashed |
Rahmenstil: gestrichelt. |
<p style="border:1; border-style:dashed"
align="center"> gestrichelter Rand </p> |
gestrichelter Rand
|
| border-top-style |
siehe border-style |
oberer Rahmenstil: punktiert. |
<p style="border-top:2;
border-top-style:dotted"
align="center"> oberer Rand punktiert </p> |
oberer Rand punktiert
|
| border-bottom-style |
siehe border-style |
unterer Rahmenstil: gestrichelt. |
<p style="border-bottom:1;
border-bottom-style:dashed"
align="center"> unterer Rand gestrichelt </p> |
unterer Rand gestrichelt
|
| border-left-style |
siehe border-style |
linker Rahmenstil: punktiert. |
<p style="border-top:2;
border-left-style:dotted"
align="center"> linker Rand punktiert </p> |
linker Rand punktiert
|
| border-right-style |
siehe border-style |
unterer Rahmenstil: gestrichelt. |
<p style="border-bottom:1;
border-right-style:dashed"
align="center"> rechter Rand gestrichelt </p> |
rechter Rand gestrichelt
|
| border-width |
Z.B.: mm, cm, px |
Definiert den Abstand zwischen Rahmenlinien. |
<p style="border-style:inset;
border-width:6px"
align="center"> Rahmenbreite 6 Pixel </p> |
Rahmenbreite 6 Pixel
|
border-top-width
border-bottom-width
border-left-width
border-right-width |
siehe border-width |
oberer Abstand
unterer Abstand
linker Abstand
rechter Abstand. |
<p style="border-style:double;
border-left-width:5px;
border-top-width:5px;
border-right-width:3px;
border-bottom-width:3px;
border-color:salmon" align="center">
Verschiedene Rahmenbreite
</p> |
Verschiedene Rahmenbreite
|
| border-color |
Z.B.: mm, cm, px |
Definiert die Farbe der Rahmenlinien. |
<p style="border:4px; border-style:solid;
border-color:#007F00"
align="center"> dunkelgrüner Rahmen </p> |
dunkelgrüner Rahmen
|
border-top-color
border-bottom-color
border-left-color
border-right-color |
siehe border-color |
Farbe des oberen Rahmens
Farbe des unteren Rahmens
Farbe des linken Rahmens
Farbe des rechten Rahmens. |
<p style="border-style:solid;
border-left-color:#007FFF;
border-right-color:#FF0000;
border-bottom-color:salmon"
border-top-color:maroon; align="center">
Verschiedene Rahmenfarben
</p> |
Verschiedene Rahmenfarben
|
| margin |
Z.B.: mm, cm, pt |
Definiert den äußeren Abstand
(Abstand zu den benachbarten Elementen). |
<p style="margin:4px">Abstand = 4 px</p> |
Außenabbstand
= 4 px
|
| margin-top |
Z.B.: mm, cm, pt |
Definiert den äußeren Abstand des oberen Randes. |
<p style="margin-top: 4pt">
Oberer Abstand = 4 pt </p> |
Oberer Abstand = 4 pt
|
| margin-bottom |
Z.B.: mm, cm, pt |
Definiert den äußeren Abstand des unteren Randes. |
<p style="margin-bottom: 6pt">
Unterer Abstand = 6 pt </p> |
Unterer Abstand = 6 pt
|
| margin-left |
Z.B.: mm, cm, pt |
Definiert den äußeren Abstand des linken Randes. |
<p style="margin-left: 24pt">
Linker Abstand = 24 pt </p> |
Linker Abstand = 24 pt
|
| margin-right |
Z.B.: mm, cm, pt |
Definiert den äußeren Abstand des rechten Randes. |
<p style="margin-right: 24pt">
Rechter Abstand = 24 pt</p> |
Rechter Abstand = 24 pt
|
| padding |
Z.B.: mm, cm, pt |
Definiert den inneren Abstand. |
<p style="padding:4px">Innenabstand = 4 px</p> |
Innenabbstand
= 4 px
|
| padding-top |
Z.B.: mm, cm, pt |
Definiert den inneren Abstand zum oberen Rand. |
<p style="padding-top: 4pt">
Abstand zum oberen Rand = 4 pt </p> |
Abstand zum oberen Rand = 4 pt
|
| padding-bottom |
Z.B.: mm, cm, pt |
Definiert den inneren Abstand zum unteren Rand. |
<p style="padding-bottom: 6pt">
Abstand zum unteren Rand= 6 pt </p> |
Abstand zum unteren Rand = 6 pt
|
| padding-left |
Z.B.: mm, cm, pt |
Definiert den inneren Abstand zum linken Rand. |
<p style="padding-left: 16pt">
Abstand zum linken Rand= 16 pt </p> |
Abstand zum linken Rand = 16 pt
|
| padding-right |
Z.B.: mm, cm, pt |
Definiert den inneren Abstand zum rechten Rand. |
<p style="padding-right: 24pt">
Abstand zum rechten Rand = 24 pt</p> |
Abstand zum rechten Rand
= 24 pt
|
