Attribute

CSS-Attribute Überblick

CSS-Attribute zur Steuerung von Schrifteigenschaften

Syntax am Beispiel eines Absatzes:		innerhalb des BODYs: <p style=”font-size:9pt; font-weight:600; color: #0000FF”>Absatztext</p> innerhalb des HEADs oder externe CSS-Datei: p {font-family: Arial, Verdana, Helvetica; font-size: 9pt; color: blue}
font-size	mm, cm, in (inch), pt (1/72 inch), pc (pica=12 pt)	Definiert die Schriftgröße.	<p style=”font-size:12pt”>Absatztext </p>	Absatztext
font-family	Schriftname z.B.: serif, sans-serif, cursive, monospace, fantasy, Times	Definiert die Schriftfamilie (falls das aktuelle System die erste Schriftart nicht hat, wird die nächste verwendet usw., ist keine der angegebenen Schriftarten verfügbar, wird die Standardschriftart verwendet).	<p style=”font-family: Times, serif”> Absatztext</p>	Absatztext
font-style	z.B.: normal, italic, oblique	Definiert den Schriftstil.	<p style=”font-style: italic; font-size: 9pt”> Absatztext </p>	Absatztext
font-weight	100 - 900 (normal = 400, bold = 700)	Definiert die Schriftstärke.	<p style=”font-weight: 800″> Absatztext </p>	Absatztext
font-variant	normal, small-caps	Definiert Varianten der Schriftart.	<p style=”font-variant: small-caps”> Absatztext </p>	Absatztext
text-transform	none, lowercase, uppercase	Steuert die Groß/ Kleinschreibung.	<p style=”text-transform: lowercase”> AbsatzText </p>	AbsatzText
text-decoration	normal, underline, overline, blink, capitalize, line-trough	Definiert Hervorhebungen der Schriftart.	<p style=”text-decoration: overline”> Absatztext </p>	Absatztext
letter-spacing	Z.B.: mm, cm, pt	Steuert den Buchstaben- abstand.	<p style=”letter-spacing: 8pt”> Sperrschrift </p>	Sperr schrift
word-spacing	Z.B.: mm, cm ,pt	Steuert den Wortabstand.	<p style=”word-spacing: 6pt”> Größerer Abstand der Worte </p>	Größerer Abstand der Worte

CSS-Attribute zur Textausrichtung in Absätzen

text-align	left, right, center, justify	Definiert die horizontale Ausrichtung eines Absatzes.	<p style=”text-align: justify”> Dieser Absatz wurde im Blocksatz formatiert (Die Ausrichtung erfolgt links- u. rechtsbündig). </p>	Dieser Absatz wurde im Blocksatz formatiert (Die Ausrichtung erfolgt links- u. rechtsbündig).
vertical-align	baseline, bottom, middle, sub, super, top, text-top, text-bottom	Definiert die vertikale Ausrichtung eines Absatzes.	<p id=”tabbeige” style=”vertical-align: middle”> Dieser Absatz ist vertikal zentriert. </p>	Dieser Absatz ist vertikal zentriert.
line-height	Z.B.: mm, cm, pt oder relativer Wert	Definiert die Zeilenhöhe eines Absatzes.	<p style=”line-height: 20pt”> Absatz mit 20 pt Zeilenhöhe. </p>	Absatz mit 20 pt Zeilenhöhe.
text-indent	Z.B.: mm, cm, pt	Definiert den Erstzeileneinzug eines Absatzes.	<p id=”tabbeige” style=”text-indent: 16pt”> Ein Absatz mit Erstzeileneinzug. </p>	Ein Absatz mit Erstzeileneinzug.

CSS-Attribute für Rahmen und Ränder

		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

CSS-Attribute für Listen

list-style-type		Definiert die Anzeigeform der Liste.
Typ “ol”	decimal, lower-alpha, upper-alpha, lower-roman, upper-roman	Definiert den Typ der Aufzählungs- zeichen (Voreinstellung: decimal).	<ol style=”list-style-type: lower-alpha”>	1. Eintrag 2. Eintrag
Typ “ul”	disc, circle, square	Definiert den Typ der Aufzählungs- zeichen (Voreinstellung: disc).	<ul type=”list-style-type: circle”>	1. Eintrag 2. Eintrag
list-style-position		Definiert den Texteinzug der Liste (Voreinstellung: outside).
	outside	Text wird eingezogen.	<ol style=”list-style-position: outside”>	Steinpilz: Boletus edulis Schönfußröhrling: Boletus calopus
	inside	Aufzählungs-zeichen werden integriert.	<ul type=”list-style-position: inside”>	Butterpilz: Suillus luteus Kuhpilz: Suillus bovinus
list-style-image	url(dateiname)	Definiert eine Grafik als Aufzählungs-zeichen.	<ul style=”list-style-image: url (nabu/images /blueball.gif)”>	1. Eintrag 2. Eintrag

CSS-Attribute für Tabellen

caption-side

left | right | top |
bottom

Definiert die Position der Tabellen-überschrift.

Titel

</caption>

<tr><td>1. Spalte</td></tr>

<tr><td>2. Spalte</td></tr>

</table>

**Titel**
1. Spalte	2. Spalte

table-layout

fixed | auto

Steuert die Breite der Tabellenzellen (günstig mit dem <colgroup>-Tag anzuwenden,

um Tabellen mit festen Spaltenbreiten zu erzeugen).

</colgroup>

<tr><td>1. Spalte</td>

<td>2. Spalte</td></tr>

</table>

1. Spalte

2. Spalte

empty-cells

hide | show

Steuert die Sichtbarkeit des Rahmens von Zellen mit leerem Inhalt.

<table border=”2″

style=”empty-cells:show”>

<tr><td>1. Zeile</td></tr>

</table>

1. Zeile

border
border-top
border-left
border-right
border-bottom

Breite Stil Farbe

(Reihenfolge beliebig)

Steuert die Eigenschaften der Rahmen

(kann für die gesamte Tabelle [im table-Tag, äußerer Rahmen]

oder einzelne Zellen [im th- oder td-Tag] angegeben werden).

Details: siehe Menüpunkt Rahmen-gestaltung

<tr>

<td style=”border:2pt dotted coral”>
1. Spalte</td>

<td style=”border:dashed blue 3px”>
2. Spalte</td>

</tr>

</table>

1. Spalte

2. Spalte

border-collapse

collapse | separate

Steuert das Zusammenfallen der Zellenrahmen.

<table border=”2″

style=”border:solid maroon 2px;

border-collapse:collapse”>

<tr><td>1. Zeile</td></tr>

<tr><td>2. Zeile</td></tr>

</table>

(Rechte Tabelle: border-collaps:separate)

1. Zeile

2. Zeile

1. Zeile

2. Zeile

border-spacing

Pixel | Punkt

Steuert den Abstand zum Tabellenrahmen.

<tr><td>1. Zeile</td></tr>

<tr><td>2. Zeile</td></tr>

</table>

1. Zeile

2. Zeile

padding
padding-top
padding-left
padding-right
padding-bottom

Pixel | Punkt

Steuert den Abstand zum Zellenrahmen.

<tr><td style=”padding-left:8px”>
1. Zeile</td></tr>

<tr><td>2. Zeile</td></tr>

</table>

1. Zeile

2. Zeile

CSS-Attribute zur Cursordarstellung

cursor		Definiert die Darstellung des Cursors, wenn dieser über das entsprechende Element bewegt wird.	Den Cursor in die Anzeige bewegen, um die Cursordarstellung zu testen.
	auto	Cursor wird entsptechend dem aktuellen Kontext dargestellt (Standard).	<span style=”cursor:auto”> Cursor = auto </span>	Cursor = auto
	crosshair	Cursor wird als Fadenkreuz dargestellt.	<span style=”cursor:crosshair”> Cursor = crosshair </span>	Cursor = crosshair
	default	Cursor wird entsptechend dem Standardcursor dargestellt.	<span style=”cursor:default”> Cursor = default </span>	Cursor = default
	hand	Cursor wird als Hand dargestellt.	<span style=”cursor:hand”> Cursor = hand </span>	Cursor = hand
	help	Cursor wird als Fragezeichen mit Pfeil dargestellt.	<span style=”cursor:help”> Cursor = help </span>	Cursor = help
	move	Cursor wird als Pfeilkreuz dargestellt.	<span style=”cursor:move”> Cursor = move </span>	Cursor = move
	e-resize	Cursor wird als Pfeil in Richtung Ost dargestellt.	<span style=”cursor:e-resize”> Cursor = e-resize </span>	Cursor = e-resize
	n-resize	Cursor wird als Pfeil in Richtung Nord dargestellt.	<span style=”cursor:n-resize”> Cursor = n-resize </span>	Cursor = n-resize
	ne-resize	Cursor wird als Pfeil in Richtung Nordost dargestellt.	<span style=”cursor:ne-resize”> Cursor = ne-resize </span>	Cursor = ne-resize
	nw-resize	Cursor wird als Pfeil in Richtung Nordwest dargestellt.	<span style=”cursor:nw-resize”> Cursor = nw-resize </span>	Cursor = nw-resize
	s-resize	Cursor wird als Pfeil in Richtung Süd dargestellt.	<span style=”cursor:s-resize”> Cursor = s-resize </span>	Cursor = s-resize
	se-resize	Cursor wird als Pfeil in Richtung Südost dargestellt.	<span style=”cursor:se-resize”> Cursor = se-resize </span>	Cursor = se-resize
	sw-resize	Cursor wird als Pfeil in Richtung Südwest dargestellt.	<span style=”cursor:sw-resize”> Cursor = sw-resize </span>	Cursor = sw-resize
	w-resize	Cursor wird als Pfeil in Richtung West dargestellt.	<span style=”cursor:w-resize”> Cursor = w-resize </span>	Cursor = w-resize
	text	Cursor wird als Textcursor dargestellt.	<span style=”cursor:text”> Cursor = text </span>	Cursor = text
	wait	Cursor wird als Sanduhr dargestellt.	<span style=”cursor:wait”> Cursor = wait </span>	Cursor = wait