CSS Eigenschaften (Properties) für Texte Textformatierung

Eigenschaften (Properties) für Texte

Home • CSS • Textgestaltung

Beispiel

CSS-Code

Download

PDF drucken

7) Textgestaltung

01 02 03 04 05 06 07 08 09 10 11 12 13 14 CSS-Einführung

Bei der Textformatierung müssen Sie sich nicht auf Schrifttype, -größe oder Textfarbe beschränken. Auf dieser Seite finden Sie eine Übersicht, weiter unten auch Beispiele zur Text- und Absatzformatierung und eine PDF-Datei zum Download.

Die wichtigsten CSS-Formatierungen für Texte

Ein Beispiel für CSS-Angaben für die Textgestaltung (zum Experimentieren) finden Sie in der Kopfzeile oben als Textdatei oder ZIP-Download.

Linktipp - habe ich im Netz gefunden: Einfach in der linken Box einen Text eintragen und unten die Einstellungen verändern. Veranschaulicht sehr schön, wie der CSS-Code aussehen soll. Kann man dann kopieren und in seine CSS-Datei als eigenes Style einbinden. (Grafik anklicken)

Eigenschaften Textformatierung

Häufig verwendete Anweisungen zur Textformatierung mit CSS. Erst einmal eine Übersicht / Kurzbeschreibung - eine ausführlichere Tabelle finden Sie weiter unten.

Beschreibung	Anweisung	Beispieleintrag
Farbe	color	#0000FF
Schrifttypen-Familie	font-family	Arial
Schrifthöhe	font-size	11px
Gewichtung	font-weight	bold
Schriftyp-Stil	font-style	italic
Schrifttyp Variante	font-variant	small-caps
Zeichenabstand	letter-spacing	0.5em
Einrückung	text-indent	30px
Textumbruch	white-space	pre
Textausrichtung	text-align	left
Textdekoration	text-decoration	underline
Umwandlung der Buchstaben	text-transform	uppercase
Vertikale Ausrichtung	vertical-align	middle
Wortabstand	word-spacing	4px
Zeilenhöhe	line-height	120%

Anweisungsblöcke für alle HTML-Selektoren:

Möchten Sie ihre Schriften mit CSS-Anweisungen festlegen, gehen Sie systematisch vor.

Notieren Sie Anweisungsblöcke für vorhandene HTML-Selektoren ihrer Seite. Eingeleitet durch die entsprechenden Selektoren der HTML-Formatierung, werden die Anweisungsblöcke im StyleSheet eingetragen. Wählen Sie danach Textfarbe und -größe angepasst an Layout und zu erwartende Besuchergruppe.

Auf dieser Seite beschränke ich mich nun nicht mehr auf die (älteren) Basisformate des W3C CSS1, sondern beziehe auch die neueren Regeln von CSS2 ein (Auflistung unten).

HTML-Selektoren

body
a
ul, ol, li
h1, h2, h3, h4, h5
img
b, i, u, pre
p
table, td

gesamte Seite
Links
Listen und Listelemente
Überschriften
Bilder
Textformatierungen
Absätze
Tabellen, Tabelleninhalte

Auflistung: CSS-Eigenschaften (Properties) für Text

Ich liste hier Beispiele der gängigen Eigenschaften und Werte der CSS-Formatierungen für Text auf. Es ist kein Problem, erst einmal mit den Basiseigenschaften zu beginnen und weitere Feinheiten später nachzutragen.

Es werden zum Teil mehrere Möglichkeiten der Wertzuweisungen aufgezählt. Die Erklärungen dazu in einem separaten Beitrag später.

 font-family: Arial;
 font-family: Arial,Verdana,Helvetica;

 font-size: 16pt;      (Größe in Punkt )
 font-size: small;     (oder: xx-small smaller large xxlarge ...)
 font-size: 14px;      (Größe in Pixel )
 font-size: 0.8em;     (relativ zur Normalgröße, 30px x 0.8em = 24px )
 font-size: 80%;       (relativ zur Normalgröße )

 font-weight: bold;    (Fettschrift)
 font-weight: bolder;  (Fettschrift)
 font-weight: lighter; (extra dünn)
 font-weight: 200;     (100-900, extra dünn bis extra fett )
 font-weight: normal;

 font-style: italic; (Kursiv)
 font-style: normal;

 font-variant: small-caps; (Kapitälchen)
 font-variant: normal;

 line-height: 16pt;      (Größe in Punkt )
 line-height: 14px;      (Größe in Pixel )
 line-height: 1.3em;     (relativ zur Normalhöhe, 30px x 1.3em = 39px )
 line-height: 130%;

 text-decoration: underline; (unterstrichen)
 text-decoration: line-through; (durchgestrichen)
 text-decoration: none;

 text-align: center;
 text-align: right;
 text-align: left;
 text-align: justify; (Blocksatz)

 text-transform: lowercase; (Kleinschreibung)
 text-transform: uppercase; (Großschreibung)
 text-transform: capitalize; (Wortanfang in Großbuchstaben)
 text-transform: none;

 background: #0000FF;
 background: blue;

 color:#FF0000;
 color:red;

Zwischenbemerkungen zur Schriftgröße

1) Abhängig vom Bildschirm, Betriebssystem und Browsereinstellungen können die Darstellungen abweichen. Außerdem sollte man die relativen Größenangaben 1em und 100% nicht benutzen.

CSS-Schriftgrößen Fehlersuche

2) Textformatierungen für wichtige Textbereiche sollte man nicht in fixen Punkt- oder Pixelgrößen festlegen. Ohne benutzerseitige CSS-Datei hätte der Seitenbesucher nicht mehr die Möglichkeit die Schriftgröße durch Browserfunktion zu verändern.

Eine Alternative, die Größe einiger Textpassagen durch den Seitenbesucher festlegen zu lassen, ohne das Design zu gefährden. Dort beschreibe ich auch, wie in den Browsern die Schriftgröße angepasst werden kann, und was Strg + Mausrad mit dem Schriftgrad der Seite anstellt.

Ein Stückchen Barrierefrei

3) Eine ausführlichere Beschreibung für die Maßeinheiten bei Schriftgraden, mit der Unterscheidung absolut und relativ, finden Sie auf Seite 10.

Maßeinheiten - Textgrößen / Schriftgrad

4 Beispiele der Absatzformatierung - Selektor :

Rand + Padding für alle Beispiele:

<p style="padding:5px; border:1px solid #0090E0;">

a) Rand + text-indent

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Einrückung 1. Zeile: text-indent: 0.8cm

b) Rand + text-transform

Text-Umwandlung (erster Buchstabe): text-transform:capitalize

c) Rand + letter-spacing

Zeichenabstand: letter-spacing: 2px

d) Rand + line-height

Zeilenabstand: line-height: 1.4em

4 Beispiele der Textformatierung / Rand - Selektor :

a) Rand + Position

Text innerhalb des -Selektors

<span style="
padding:5px;
border:1px solid #0090E0;
font-size:12px;
position:relative; left:40px">

Text innerhalb des <span>-Selektors

</span>

b) linker Rand + Position

Text innerhalb des -Selektors

<span style="
border-left: 12px solid #FF0000;
font-size:12px;
position:relative; left:40px;">

&nbsp;&nbsp;Text innerhalb des <span>-Selektors

</span>

c) Rand + Position

Text innerhalb des -Selektors

<span style="
padding:5px;
border:4px dotted #0090E0;
font-size:12px;
position:relative; left:40px;">

Text innerhalb des <span>-Selektors

</span>

d) Rand + Position

Text innerhalb des -Selektors

<span style="
padding:5px;
border:4px double #0090E0;
font-size:12px;
position:relative; left:40px;">

Text innerhalb des <span>-Selektors

</span>

Download

anzeigen / ausdrucken / abspeichern

Kurzreferenz als PDF-Datei
CSS-Eigenschaften für Text
Format: DIN A4
Dateigröße: 10 kB

Überblick der wichtigsten CSS-Eigenschaften (Properties) für Text. Identisch mit den auf dieser Seite gelisteten Anweisungen. Für weitere Info empfehle ich SELFHTML.

Keywords:
CSS, Textformatierung, Formate, styles, styletags, befehle, Farbe, color, Schrifttypen-Familie, font-family, Schrifthöhe, font-size,Gewichtung, font-weight, Schriftyp-Stil, font-style, font-variant, small-caps, Zeichenabstand, letter-spacing, text-indent, text-align, text-decoration, text-transform, vertical-align, Wortabstand, word-spacing, Zeilenhöhe, Beispiele