<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textdekoration</title>
</head>
<body>
<span style="text-decoration:underline">Dies ist ein Text</span>
<span style="text-decoration:overline">Dies ist ein Text</span>
<span style="text-decoration:line-through">Dies ist ein Text</span>
</body>
</html>
CSS: Eigenschaften
Die Textdekoration
Eigenschaft: text-decoration
Wert: none, underline, overline, line-through, blink
Beispiel ansehen: Textdekoration
Ausrichtung von Text
Eigenschaft: text-align
Wert: left, right, center, justify
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textdekoration</title>
</head>
<body>
<p style="text-align:left">Dies ist ein Text</p>
<p style="text-align:right">Dies ist ein Text</p>
<p style="text-align:center">Dies ist ein Text</p>
</body>
</html>
Beispiel ansehen: Textausrichtung
Textfarbe
Eigenschaft: color
Wert: Farbnamen, RGB, Hexadezimalwerte
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textdekoration</title>
</head>
<body>
<p style="color:red">Dies ist ein Text</p>
<p style="color:rgb(255,0,0)">Dies ist ein Text</p>
<p style="color:#ff0000">Dies ist ein Text</p>
<p style="color:#f00">Dies ist ein Text</p>
</body>
</html>
Beispiel ansehen: Farbe
Hintergrundfarbe
Eigenschaft: background-color
Wert: siehe Textfarbe
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textdekoration</title>
</head>
<body style="background-color:yellow">
<p style="color:red">Dies ist ein Text</p>
<p style="color:rgb(123,123,123)">Dies ist ein Text</p>
<p style="color:#ffaacc">Dies ist ein Text</p>
<p style="color:#fbd">Dies ist ein Text</p>
</body>
</html>
Beispiel ansehen: Hintergrundfarbe
Hintergrundbilder
Eigenschaft: background-image
Wert: url, none
body {background-image:url(back.gif)}
div {background-image:none}
Schriftart
Eigenschaft: font-family
Wert:family-name, generic-family
Unter family-name versteht man die Namen der Schriften, wie man sie z.B. aus WORD kennt: Arial, Verdana, Helvetica usw. generic-family bestimmt die Schriftfamilie: serif, sans-serif, cursive, fantasy, monospace. Helvetica gehört zur Schriftenfamilie sans-serif. Folgende Angaben sind möglich:
body {font-family: Verdana, Arial,"new century schoolbook", serif}
Zuerst wird die Schriftart Verdana auf dem Computer gesucht. Ist diese nicht vorhanden, dann Arial. Ist diese nicht vorhanden New Century Schoolbook. Dieser Name muss in Anführungszeichen gesetzt werden, da er aus drei Namensbestandteilen besteht. Ist auch diese Schrift nicht vorhanden, dann soll eine Schrift mit Serifen gewählt werden.
Schriftstil
Eigenschaft: font-style
Wert: normal, italic
p {font-style:italic}
Schriftgröße
Eigenschaft: font-size
Wert: absolut, relativ, Länge, Prozent
Es gibt sieben absolute Schriftgrößen: xx-small, x-small, small, medium, large, x-large und xx-large.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textdekoration</title>
</head>
<body >
<p style="font-size:xx-small">Dies ist ein Text</p>
<p style="font-size:x-small">Dies ist ein Text</p>
<p style="font-size:small">Dies ist ein Text</p>
<p style="font-size:medium">Dies ist ein Text</p>
<p style="font-size:large">Dies ist ein Text</p>
<p style="font-size:x-large">Dies ist ein Text</p>
<p style="font-size:xx-large">Dies ist ein Text</p>
</body>
</html>
Beispiel ansehen: Abolute Size
Der Wert für Länge besteht aus einer natürlichen Zahl und der gewünschten Einheit. pt steht für Punkt (1/72 inches), pc für Pica (12 Punkte), in für Inch (2,54cm), mm für Millimeter und cm für Zentimeter.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textdekoration</title>
</head>
<body >
<p style="font-size:14pt">Dies ist ein Text</p>
<p style="font-size:2pc">Dies ist ein Text</p>
<p style="font-size:1in">Dies ist ein Text</p>
<p style="font-size:5mm">Dies ist ein Text</p>
<p style="font-size:1cm">Dies ist ein Text</p>
</body>
</html>
Beispiel ansehen: Länge
Abstände
Man unterscheidet margin-EIgenschaften und padding-Eigenschaften. Der erste Wert steht für den äußeren Abstand zu einem anderen Element, der zweite Wert zeigt den inneren Abstand an.
Eigenschaft: margin-top, margin-bottom, margin-left, margin-right,
margin
Wert: Länge, Prozentsatz, Auto
h1 {margin-bottom:10px}
h1 {margin:10px 20px 10px 20px}
10px oben, rechts, unten, links
h1 {margin:10px}
10px oben, rechts, unten, links
h1 {margin: 10 px 20px}
10 px obern und unten, 20 px links und rechts
h1 {margin: 10 px 20px 30 px}
10 px nach oben, 20 px nach rechts und links, 30 px nach unten
Die padding-Eigenschaft wird analog verwendet.
Rahmen
Die border-Eigenschaft bestimmt die Rahmendicke eines Elements.
Eigenschaft: border-top-width, border-right-width, border-left-width,
border-bottom-width, border
Wert: thon, thick, medium, Länge
Rahmen können auch farbig sein. Mit border-color kann die Farbe bestimmt werden. Daneben gibt es noch den rahmentyp: none, dotted, dashed, solid, double, groove, ridge, inset und outset.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Textdekoration</title>
</head>
<body >
<p style="border-style:dotted">Dies ist ein Text</p>
<p style="border-style:dashed">Dies ist ein Text</p>
<p style="border-style:solid">Dies ist ein Text</p>
<p style="border-style:double">Dies ist ein Text</p>
<p style="border-style:groove">Dies ist ein Text</p>
<p style="border-style:ridge">Dies ist ein Text</p>
<p style="border-style:inset">Dies ist ein Text</p>
<p style="border-style:outset">Dies ist ein Text</p>
</body>
</html>
Beispiel ansehen: Rahmenlinien
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Rahmen</title>
</head>
<body>
<div style="border:15px groove #00FF00">
<b>Der Rahmen ist groovy, 15 Pixel stark und grün.</b>
</div>
<br /><br />
<div align="center" style="border:thick dotted blue;
padding-top:1cm;padding-bottom:1cm">
<b>Dieser Text ist zentriert mit einem gepunkteten
blauen Rahmen ringsherum versehen, wobei die (inneren) Abstände des
Textes nach unten und nach oben zum Rahmen jeweils 1cm betragen.
</b>
</div>
<h1 style="border-left:1em double red; padding-left:20px">Wie Sie sehen,
ist die Anwendung der Eigenschaften einfach.</h1>
</body>
</html>