CSS: Eigenschaften

 

Die Textdekoration

Eigenschaft: text-decoration
Wert: none, underline, overline, line-through, blink

<!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>

Beispiel ansehen: Textdekoration

Ausrichtung von Text

Eigenschaft: text-align
Wert: left, right, center, justify

<!doctype html>
<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

<!doctype html>
<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

Tabelle 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&uuml;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&auml;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>