|
Schriftformatierung
font-family: (Schriftart)
|
.klasse {font-family:"Times New Roman",Times,serif;}
|
|
<span style="font-family:'Times New Roman',Times,serif">xxx</span>
|
font-style: (Schriftstil)
|
.klasse {font-style:italic;}
|
|
<span style="font-style:italic">xxx</span>
|
font-variant: (Schriftvariante)
|
.klasse {font-variant:small-caps;}
|
|
<span style="font-variant:small-caps">xxx</span>
|
font-size: (Schrifgröße)
|
.klasse {font-size:6pt;}
|
|
<span style="font-size:6pt">xxx</span>
|
font-weight: (Schrifgewicht)
|
.klasse {font-weight:100;}
|
|
<span style="font-weight:100">xxx</span>
|
font: (Schrift allgemein)
|
.klasse {font:Arial italic small-caps 14pt 100;}
|
|
<span style="font:Arial italic small-caps 14pt 100">xxx</span>
|
word-spacing: (Wortabstand)
|
.klasse {word-spacing:6pt;}
|
|
<span style="word-spacing:6pt">xxx</span>
|
letter-spacing: (Zeichenabstand)
|
.klasse {letter-spacing:2pt;}
|
|
<span style="letter-spacing:2pt">xxx</span>
|
text-decoration: (Textdekoration)
|
.klasse {text-decoration:underline;}
|
|
<span style="text-decoration:underline">xxx</span>
|
text-transform: (Texttransformation)
|
.klasse {text-transform:capitalize;}
|
|
<span style="text-transform:capitalize">xxx</span>
|
color: (Textfarbe)
|
.klasse {color:blue;}
|
|
<span style="color:blue">xxx</span>
|
Ausrichtung und Absatzkontrolle
text-indent: (Texteinrückung)
|
.klasse {text-indent:0.5cm;}
|
|
<span style="text-indent:0.5cm">xxx</span>
|
line-height: (Zeilenhöhe)
|
.klasse {line-height:130%;}
|
|
<span style="line-height:130%">xxx</span>
|
vertical-align: (Vertikale Ausrichtung)
|
.klasse {vertical-align:middle;}
|
|
<span style="vertical-align:middle">xxx</span>
|
text-align: (Horizontale Ausrichtung)
|
.klasse {text-align:center;}
|
|
<span style="text-align:center">xxx</span>
|
white-space: (Textumbruch)
|
.klasse {white-space:nowrap;}
|
|
<span style="white-space:nowrap">xxx</span>
|
Außenrand und Abstand
margin-top: (Außenrand/Abstand oben)
|
.klasse {margin-top:100px;}
|
|
<span style="margin-top:100px">xxx</span>
|
margin-bottom: (Außenrand/Abstand unten)
|
.klasse {margin-bottom:18pt;}
|
|
<span style="margin-bottom:18pt">xxx</span>
|
margin-left: (Außenrand/Abstand links)
|
.klasse {margin-left:100px;}
|
|
<span style="margin-left:100px">xxx</span>
|
margin-right: (Außenrand/Abstand rechts)
|
.klasse {margin-right:1.3cm;}
|
|
<span style="margin-right:1.3cm">xxx</span>
|
margin: (Außenrand/Abstand allgemein)
|
.klasse {margin: 1cm 2cm 3cm 4cm;}
|
|
<span style="margin: 1cm 2cm 3cm 4cm">xxx</span>
|
Innenabstand
padding-top: (Innenabstand oben)
|
.klasse {padding-top:3cm;}
|
|
<span style="padding-top:3cm">xxx</span>
|
padding-bottom: (Innenabstand unten)
|
.klasse {padding-bottom:2cm;}
|
|
<span style="padding-bottom:2cm">xxx</span>
|
padding-left: (Innenabstand links)
|
.klasse {padding-left:20%;}
|
|
<span style="padding-left:20%">xxx</span>
|
padding-right: (Innenabstand rechts)
|
.klasse {padding-right:20px;}
|
|
<span style="padding-right:20px">xxx</span>
|
padding: (Innenabstand allgemein)
|
.klasse {padding:50px;}
|
|
<span style="padding:50px">xxx</span>
|
Rahmen
border-width: (Rahmendicke)
|
.klasse {border-style:solid; border-width:thin;}
|
|
<span style="border-style:solid; border-width:thin">xxx</span>
|
border-color: (Rahmentyp)
|
.klasse {border-style:solid; border-color:red;}
|
|
<span style="border-style:solid; border-color:red">xxx</span>
|
border-style: (Rahmentyp)
|
.klasse {border-style:double;}
|
|
<span style="border-style:double">xxx</span>
|
border: (Rahmen allgemein)
|
.klasse {border:1px solid grey;}
|
|
<span style="border:1px solid grey">xxx</span>
|
Hintergrundfarben/Bilder
background-color: (Hintergrundfarbe)
|
.klasse {background-color:#E0E0E0;}
|
|
<span style="background-color:#E0E0E0">xxx</span>
|
background-image: (Hintergrundbild)
|
.klasse {background-image:url(img/snow.jpg);}
|
|
<span style="background-image:url(img/snow.jpg)">xxx</span>
|
background-repeat: (Wiederholungs-Effekt)
|
.klasse {background-image:url(img/snow.jpg);background-repeat:repeat-y;}
|
|
<span style="background-image:url(img/snow.jpg);background-repeat:repeat-y">xxx</span>
|
background-attachment: (Wasserzeichen-Effekt)
|
.klasse {background-image:url(img/snow.jpg);background-repeat:no-repeat;
background-attachment:fixed;}
|
|
<span style="background-image:url(img/snow.jpg);background-repeat:no-repeat;
background-attachment:fixed">xxx</span>
|
background-position: (Hintergrundposition)
|
.klasse {background-image:url(img/snow.jpg);background-position:30px 20px;}
|
|
<span style="background-image:url(img/snow.jpg);background-position:30px 20px;>xxx</span>
|
background: (Hintergrund allgemein)
|
.klasse {background:url(img/snow.jpg) no-repeat fixed 20px 30px;}
|
|
<span style="background:url(img/snow.jpg) no-repeat fixed 20px 30px">xxx</span>
|
Listenformatierung
list-style-type: (Darstellungstyp)
|
ul {list-style-type:disc;}
|
|
<ul style="list-style-type:disc">xxx</ul>
|
list-style-position: (Listeneinrückung)
|
ul {list-style-position:inside;}
|
|
<ul style="list-style-position:inside">xxx</ul>
|
list-style-image: (eigene Bullet-Grafik)
|
ul {list-style-image:url(img/orangebu.gif);}
|
|
<ul style="list-style-image:url(img/orangebu.gif)">xxx</ul>
|
list-style: (Listendarstellung allgemein)
|
ol {list-style:lower-roman inside;}
|
|
<ol style="list-style:lower-roman inside">xxx</ol>
|
Tabellenformatierung
caption-side: (Ausrichtung der Tabellenüberschrift)
|
caption {caption-side:bottom;}
|
|
<caption style="caption-side:bottom">xxx</caption>
|
table-layout: (fixe/variable Breiten)
|
table {table-layout:fixed;}
|
|
<table style="table-layout:fixed">xxx</table>
|
border-collapse: (Rahmenmodell)
|
table {border-collapse:collapse;}
|
|
<table style="border-collapse:collapse">xxx</table>
|
border-spacing: (Rahmenabstand im Gitternetz)
|
table {border:thin solid red; border-spacing:10px;}
|
|
<table style="border:thin solid red; border-spacing:10px">xxx</table>
|
empty-cells: (Anzeige/Nichtanzeige leerer Zellen)
|
table {border:1px solid black; empty-cells:show;}
|
|
<table style="border:1px solid black; empty-cells:show">xxx</table>
|
Positionierung
position: (Positionsart)
|
.klasse {position:relative;left:10pt;}
|
|
<span style="position:relative;left:10pt">xxx</span>
|
width: (Breite)
|
.klasse {width:200px;background-color:#E0E0E0;padding:5px;}
|
|
<span style="width:200px;background-color:#E0E0E0;padding:5px">xxx</span>
|
height: (Höhe)
|
.klasse {width:200px;height:70px;background-color:#E0E0E0;padding:5px;}
|
|
<span style="width:200px;height:70px;background-color:#E0E0E0;padding:5px">xxx</span>
|
overflow: (Elementbereich mit übergroßem Inhalt)
|
.klasse {overflow:hidden;width:200px;height:70px;
background-color:#E0E0E0;padding:5px;}
|
|
<span style="overflow:hidden;width:200px;height:70px;
background-color:#E0E0E0;padding:5px">xxx</span>
|
float: (Textumfluss)
|
.klasse {width:400px;float:left;color:green;}
|
|
<span style="width:400px;float:left;color:green">xxx</span>
|
z-index: (Schichtposition bei Überlappung)
|
.klasse {position:absolute; top:100px; left:100px;
z-index=1;}
|
|
<span style="position:absolute; top:100px; left:100px;
z-index=1">xxx</span>
|
visibility : (Anzeige bzw. Nichtanzeige mit Platzhalter)
|
.klasse {visibility:hidden;}
|
|
<span style="visibility:hidden">xxx</span>
|
clip:rect() (Anzeigebereich eingrenzen)
|
.klasse {position:absolute; top:100px; left:100px;
clip:rect(0px 130px 100px 0px);}
|
|
<span style="position:absolute; top:100px; left:100px;
clip:rect(0px 130px 100px 0px)">xxx</span>
|
|
|
Schriftformatierung