kurz & gut:
CSS angewendet - Einstieg in Design über CSS.

Anhand einfacher Beispiele wird die Grundlage geschaffen.

CSS-Anwendung einfach gemacht

Anhand von den verschiedenen Elementen wollen wir das Zuweisen von Design über CSS zeigen. Im ersten Beispiel wird der Überschrift h1 die Größe 28pt, die Farbe Orange und die Schriftart Arial zugewiesen.

Farbe und Schriftartgestaltung über CSS

Für die Gestaltung der Schrift werden folgende CSS-Befehle benötigt:

color:#FF9F00;
Farbe: orange, kann entweder als Hex-Wert:"#FF9F00" oder als Farbnamen angegeben werden: "orange", also "color:orange;" - die Farbnamen sind immer auf Englisch!
font-size:28pt;
Schriftgröße: hier als 28pt, kann auch relativ in EM angegeben werden
font-family:arial, "lucida console", sans-serif;
Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann "lucida console" und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift
Schriften mit Serifen (Standfüßchen)
font-family:courier, serif; 
<style type="text/css">
<!--

/* folgende Definition bezieht sich auf TAG h1 */
h1 {
  color:#FF9F00;   /* Farbe orange */
  font-size:28pt;  /* Größe 28pt   */
  font-family:arial, "lucida console", sans-serif; /* Schriftart */
}

-->
</style>


<h1>wichtigste Überschrift h1</h1>

<p>Und nun ein normaler Absatz</p>

<h2>Überschrift h2</h2>

<p>Und nun ein normaler Absatz</p>

<h2>Überschrift h2</h2>

<p>Noch ein normaler Absatz</p>

Ausgabe:

mit CSS Farben und Design von Schriften definieren

Weitere Definitionen, die sich auf Schriften auswirken

font-weight:bold;
Die Schriftstärke, zur Auswahl stehen normal|bold|bolder|lighter
font-style:italic;
Anzeige der Schrift (kurz ob kursiv oder normal)
italic = kursive
oblique = schräggestellt
normal = normal
text-indent:1.5em;
Einrückung der ersten Zeile eines Textblockes um den vorgegebenen Abstand

Aufgabe:

Gestalten Sie normale Absätze (<p>) mit folgenden Eigenschaften:

  • Farbe: dunkles Violett
  • Schriftstärke: fett
  • Schriftschnitt: kursiv
  • Texteinrückung der ersten Zeile: 1.5em;

Die Ausgabe sollte ungefähr folgendes Bild haben:

Design über CSS von Absätzen

An diesem Beispiel ist schön zu sehen, dass durch einmalige Definition alle Absätze einer Seite das gleiche Design haben.

Schrift und Abstände

line-height:2em;
Zeilenhöhe bestimmen, wenn der Text mehrzeilig angezeigt wird - dabei ist ratsam, das Ganze relativ zur Schriftgröße anzugeben, also in EM
letter-spacing:0.3em;
Abstände zwischen den einzelnen Buchstaben - sollte relativ angegeben werden, also in EM
word-spacing:0.5em;
Abstände zwischen den einzelnen Wörtern - sollte relativ angegeben werden, also in EM

Aufgabe

Bitte Überschrift 2 (<h2>) mit folgendem Design:

  • Farbe: rostbraun
  • Zeilenhöhe: 2em
  • Abstände zwischen den einzelnen Buchstaben: 0.3em
  • Abstände zwischen den einzelnen Wörtern: 3.5em
und für Absätze:
  • Zeilenhöhe: 2em
  • Abstände zwischen den einzelnen Buchstaben: 0.3em

CSS Design von Buchstabenabständen

Anmerkung: An diesem Beispiel ist die Auswirkung des Zeilenabstands erst beim mehrzeiligen Text zu sehen.

Farbe: Vordergrund- und Hintergrundfarbe

color:#FF9F00;
Farbe für Vordergrund - angewendet auf Schrift ist dies die Farbe der Schrift. Kann entweder als Hex-Wert:"#FF9F00" oder als Farbnamen angegeben werden: "orange"
background-color:#FF00FF
Farbe für den Hintergrundbereich; auch diese als Hex-Wert oder Farbnamen.

Aufgabe:

Hintergrundfarben für:

  • h1 - #FF00FF;
  • h2 - lightgrey;
  • p - yellow;

CSS Design der Hintergrundfarben

Rahmen

border-color:#00FFFF;
Rahmenfarbe - soll nur ein Teil des Rahmens gefärbt werden, dann:
border-top-color, border-right-color, border-bottom-color und border-left-color
border-width:4px;
Rahmenstärke in Pixel
soll nur ein Bereich geändert werden:
border-top-width, border-right-width, border-bottom-width und border-left-width
border-style: dotted;
Rahmenart bestimmen - folgende Möglichkeiten gibt es:
solid = durchgezogen
double = doppelt
none = kein Rahmen (unsichtbar)
hidden = kein Rahmen (unsichtbar)
dotted = gepunktet
dashed = gestrichelt
groove = 3D-Effekt
ridge = 3D-Effekt
inset = 3D-Effekt
outset = 3D-Effekt

Soll nur ein Teil des Rahmen definiert werden, dann:
border-top-style, border-right-style, border-bottom-style und border-left-style

Aufgabe:

Design für Rahmen für

  • h1 - Farbe lila, Breite 1px und solid
  • h2 - hellgrau, nur links und oben mit Rahmenstärke von 10px und solid
  • p - Schrift schwarz, unten und rechts gepunktet orange

CSS Design Rahmen mit Farbe und Art

Ausrichtung von Elementen

text-align:right;
Ausrichtung von Text, möglich sind: left|center|right|justify
left = linksbündig ausgerichtet (Standard)
center = zentriert ausgerichtet
right = rechtsbündig ausgerichtet
justify = als Blocksatz ausgerichtet
vertical-align:top;
über "vertical-align:" kann die vertikale Ausrichtung bestimmen werden. Möglich sind:
top = obenbündig
middle = mittig
bottom = untenbündig
baseline = ausrichten an Basislinie falls vorhanden, ansonsten unten bündig
sub = tieferstellen (ohne Änderung der Schriftgröße)
super = höherstellen (ohne Änderung der Schriftgröße)
text-top = am oberen Schriftrand
text-bottom = am unteren Schriftrand

Aufgabe:

  • h1 - Textausrichtung rechts und Hintergrundfarbe lightskyblue
  • h2 - Textausrichtung zentriert, Schriftfarbe weiß, Hintergrundfarbe limegreen

Schriftausrichtung über CSS zentriert, rechts oder links

Grafik und Bilder

background-image: url("hintergrund.jpg");
Für das Element wird ein Hintergrundbild geladen und in der Größe des Elements angezeigt
background-repeat:no-repeat;
Verhaltensweise des Bilds - ob es nur einmal angezeigt wird oder wiederholt - folgende Werte sind möglich:
repeat = wiederholen (Standard)
repeat-y = nur in Y-Richtung, also senkrecht wiederholen
repeat-x = nur in X-Richtung, also waagerecht wiederholen
no-repeat = nicht wiederholen, nur einmal anzeigen
background-attachment:fixed;
Wasserzeicheneffekt - Bild bleibt trotz Scrollen stehen - mögliche Werte:
scroll = mitscrollen (Standard)
fixed = Hintergrundbild bleibt fixiert
background-position:right;
Ausrichtung des Bilds, mögliche Werte:
top = vertikal oben
bottom = vertikal unten
center = zentriert (horizontal wie vertikal)
left = horizontal links
right = horizontal rechts
Anmerkung: vertikal und Horizontal kann auch vermengt werden, z.B. soll es rechts oben sitzen: background-position:right top;

Beispiel:

CSS Design - Bild im Hintergrund von Schrift

spezielleres

white-space:nowrap;
in bestimmten Fällen ist es notwendig, dass kein automatischer (willkürlicher Umbruch) im ausgegeben Text stattfindet. Dies kann über die white-space: beeinflusst werden.
normal = Zeilenumbruch automatisch (nur nicht bei HTML-Tags <pre> und <nowrap>)
pre = Zeilenumbruch wie vorgegeben
nowrap = kein Zeilenumbruch - Umbruch benötigt HTML-Tag
text-transform:
eine automatisierte Umsetzung des Textes während der Anzeige. Mögliche Werte: capitalize = alle Wortanfänge als Großbuchstaben
uppercase = nur Großbuchstaben
lowercase = nur Kleinbuchstaben
none = normal (Standard)

Kurzschreibweisen

Für viele CSS-Elemente gibt es Kurzschreibweisen, durch die eine schnellere Zuweisung erfolgen kann - inwieweit das für Einsteiger zum einfachen lernen und der Übersichtlichkeit hilft, muss jeder selber entscheiden:)

border: 1px dotted #ffee66;
Rahmen: Stärke, Art des Rahmentyps und Farbe
border-width:4px 10px;
Es können sofort die Rahmenstärken für oben/unten (im Beispiel 4px) und rechts/links angegeben werden

Die kann auch für alle 4 Seiten erfolgen, wobei die Lesweise oben im Uhrzeiger sind beginnt: Beispiel "border-width:4px 10px 6px 7px;" bedeutet, das oben 4 Pixel, rechts 10 Pixel, unten 6 Pixel und links 7 Pixel Rahmenstärke vergeben werden.
font: 100.01% #FF9F00 Arial,Verdana,sans-serif;
In der Kurzschreibweise können die Font-Definitionen abkürzen werden, möglich sind:
'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' und 'font-family'
Beispiel: "font: normal small-caps 120%/80% courier;"
in langer Form ausgeschrieben wäre das: font-style: normal; font-variant: small-caps; font-size: 120%; line-height: 80%; font-family: courier;

Unter-, Durchstreichungen und Co

text-decoration:line-through;
Mögliche Werte der "Dekoration" des Textes (wird gerne genutzt bei Links
none = normal (keine Text-Dekoration)
underline = unterstrichen
overline = überstrichen
line-through = durchgestrichen
vorheriges Kapitel: CSS in HTML einbinden
nächstes Kapitel: Box-Modell
CSS in HTML einbindenSeitenanfangBox-Modell
eBook HTML-Seminar.de
del.icio.usMister Wong         CSS in HTML einbindenSeitenanfangBox-Modell
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de