css-Lehrgang zweiter Tag

Teil 2 des heutigen Tages

  • Pseudoformate
  • Die Elemente div und span
  • Maßeinheiten in css

Pseudoformate

Pseudoformate dienen u.a. zur Formatierung von Hyperlinks. So unterscheidet man zwischen

  • a: link - noch nicht besuchter Verweis
  • a: visited - für bereits besuchte Verweisziele
  • a: hover - Mouseover über einen Verweis
  • a: active - für angeklickte Verweise

Schauen wir uns dies an einem Beispiel an:

css-lehrgang Pseudoformate

Wie nicht anders zu erwarten sehen wir nun drei Verweise in der "hässlichen" Art.

css-lehrgang pseudoformate

Nun können wir endlich diese stylen:

css-lehrgang pseudoformate

Nachfolgend ein paar Angaben zu neuen css-Eigenschaften:

  • "display:block;" versetzt den Selektor in ein Block-Element. Darauf werde ich später noch einmal genauer eingehen, da dies eine wichtige Eigenschaft ist.
  • "text-decoration:none" unterdrückt die Unterstreichung bei Hyperlinks. Folgende Formatierungen sind mit text-decoration möglich: underline = unterstrichen,oberline = mit Überstrich, line-through = durchgestrichen, blink = blinkend.

Das Ergebnis hat nun folgendes Erscheinungsbild:

css-lehrgang pseudoformate

Wir haben nun eine Navigation, die schon ein recht brauchbares Erscheinungsbild hat. Wir wollen nun ergänzen.

Hier der html-Teil:

css-lehrgang pseudoformate

Und das dazugehörige css:

css-lehrgang pseudoformate

Das Ergebnis:

css-lehrgang pseudoformate

Wir haben nun schon ein kleine Webseite mit Navigation links und Inhaltsbereich rechts. Hier haben wir wieder ein neues Element: ein "div". Dazu nun im folgenden Teil mehr.

Die Elemente "div" und "span"

Ein div ist ein allgemeines Block-Element, in das man mehrere Block-Elemente einschließen kann. div steht für division = Bereich. Block-Element bedeutet, dass dieses Element einen Zeilenumbruch erzwingt. Ein anderes Blockelement ist z.B. <h1></h1>.

Ein Beispiel:

css-lehrgang div und span Die Ausgabe im Browser: css-lehrgang div und span

Wir sehen, dass das div einen Zeilenumbruch erzwungen hat, genau wie das h3-Element.

So ein div lässt sich auf vielfältigste Weise formatieren:

css-lehrgang div und span Das Ergebnis ist nun etwas anders als erwartet: css-lehrgang div und span

Der Text im div-Element ist teilweise verschwunden, kommt jedoch dann zum Vorschein, wenn wir mit der Maus über das Blockelement fahren.

Der Grund dafür ist folgender: Wir haben dem Element einen zu kleinen Bereich zugewiesen. Mit "overflow:hidden" haben wir dann den überschüssigen Text versteckt. Mit :hover vergrößern wir dann das div mit height:120px;

Als Pendant zum div-Element gibt es das span, Das im Unterschied zum div keinen Zeilenumbruch erzwingt, also ein sog. inline-Element ist.

css-lehrgang div und span

Als Ausgabe erhalten wir:

css-lehrgang div und span

Das span ist nun also im Textfluss. Das Ergebnis ist eine Art "Textmarker". Ebenso wie das div lässet sich das span vielfältig einsetzen. Tatsächlich gehören diese beiden Elemente zu den am häufigsten verwendeten.

Der Unterschied zwischen Block- und Inline-Elementen ist sehr wichtig, sonst werden wir und des Öfteren über merkwürdiges Verhalten von Elementen wundern und viel Zeit für die Fehlersuche aufwenden.

Wichtige Blockelemente sind: address, blockquote, center, del, dir, div, dl, fieldset, form, h1-6, hr, ins, isindex, menu, noframes, noscript, ol, p, pre, table, ul (center, dir, isindex, menu und noframes nur bei HTML Transitional).

Und wichtige Inline-Elemente: a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn, em, font, i, img, ins, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var (applet, basefont, font, iframe, u, s und strike nur bei HTML Transitional).

Maßeinheiten in css

Größeneinheiten können im css in vielfältiger Weise vorgenommen werden. Die Tabelle gibt einen Überblick:

ZeichenTypBedeutungBeispiele
ptabsolutbedeutet Punkt. Typografische Maßeinheit. 1 Punkt entspricht 1/72 Inches.font-size:12pt;
line-height:14pt;
pcabsolutbedeutet Pica. Typografische Maßeinheit. 1 Pica entspricht 12 Punkt.font-size:1pc;
line-height:1.2pc;
inabsolutbedeutet Inch. Allgemeines Längenmaß im angelsächsischen Raum, 1 Inch entspricht 2.54 Zentimetern.border-width:0.1in;
margin-left:1in;
mmabsolutbedeutet Millimeter. Allgemeines Längenmaß, 1000. Teil des Meters.margin-bottom:10mm;
width:70mm;
cmabsolutbedeutet Zentimeter. Allgemeines Längenmaß, 100. Teil des Meters.font-size:1cm;
top:2.54cm;
pxabsolut/relativbedeutet Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und dasselbe Ausgabegerät bezogen.border-width:3px;
margin-right:60px;
emrelativbedeutet bezogen auf die Schriftgröße des Elements. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Schriftgröße des Elternelements.font-size:1.2em;
line-height:1.5em;
exrelativbedeutet bezogen auf die Höhe des Kleinbuchstaben x in diesem Element. Ausnahme: wenn die font-size-Eigenschaft (also die Schriftgröße) selbst mit dieser Maßangabe gesetzt wird, steht diese für bezogen auf die Höhe des Kleinbuchstaben x im Elternelement.text-transform:uppercase;
font-size:1.3ex;
%relativbedeutet Prozent. Je nach CSS-Eigenschaft relativ zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (line-height) relativ zur Schriftgröße (font-size) zu interpretieren.font-size:10pt;
line-height:120%;

Und nachfolgend ein paar Anwendungsbeispiele, zunächst Schriften:

css-lehrgang Maßeinheiten

Die Anzeige im Browser:

css-lehrgang Maßeinheiten

Und nun am Beispiel von div-Elementen

css-lehrgang Maßeinheiten

Die Browserausgabe:

css-lehrgang Maßeinheiten

« zurück