• Einbindung von CSS in ein HTML-Dokument
• Definition eines Stils
• Schriften
• Umrahumungen
• Abstand
• Umfließen von Text mit float
• Navigationsleisten
• Transparenz und Fading

Einige Webdesigner versuchen, Ihre Seiten auch für den Internet Explorer zugänglich zu machen. Das kostet viel Zeit, die man mit vernünftigen Dingen verbringen kann, beispielsweise Nasebohren. Wer meine Seiten mit einem Internet Explorer besucht, muss ggf nach den Inhalten suchen, kann bestimmte Effekte nicht nutzen oder sieht verwackelte Websites. Wenn also hier etwas nicht funktioniert, wechseln Sie doch einmal den Browser.

Einbindung von CSS in ein HTML-Dokument

• Im Tag: Die Stile können direkt in jedem Tag definiert werden.

  <H2 style="color:red;"> &Uuml;berschrift in rot </H2>
  

• Im HEAD des HTML-Dokuments: Die Stile können im Kopf des HTML-Dokuments definiert werden. Dann sind sie für das komplette Dokument gültig. Dazu werden sie in das Tag-Paar style eingebettet. Das Beispiel würde alle H2-Überschriften des Dokuments rot färben.

  <style type="text/css">
  H2 {color:red;}
  </style>
  ...
  </head>
  

• Externe CSS-Datei: Werden die Stile in mehreren Dateien gebraucht, wie das bei den meisten Webseiten ist, so können sie in einer separaten Datei abgelegt werden, die von den einzelnen Seiten durch eine Zeile eingebunden wird:

  <link rel=stylesheet type="text/css" href="aw.css">
  

Definition eines Stils

Wirkungsbereich {
  Attribut:Wert;
  Attribut:Wert;
}

Wirkungsbereich

Tag

H2 {color:red;}

body {font-family:sans-serif;}

Klasse

.morgenrot { color:red; }

<p class=morgenrot>Rotes Morgenrot</p>
<span class=morgenrot>Rotes Morgenrot</span>
<H2 class=morgenrot>Rotes Morgenrot</H2>

pre.source {
    width:100%;
    background-color:lightblue;
}

ID

#testid { font-style: italic;background-color:yellow;}

<div id=testid>Navi</div>

Kommentare

Schriften

font-weight

normal bold bolder light lighter. Man kann auch einen Wert von 100 bis 900 in Hunderterschritten angeben.

font-style

italic oder normal

font-size:

Es gibt sprechende Namen für die Zeichensatzgröße:
sxx-small, x-small, small, medium, large, x-large, xx-large, smaller und larger.
Daneben kann man auch direkte Größenangaben machen.

pt	Punkt (= 1/72 inches)
pc	Pica (= 12 Punkt)
in	Inch (= 2,54 cm)
mm	Millimeter
cm	Zentimeter
em	Größe des M im Standardzeichensatz

font-family

Hier werden die Namen der Schriftarten angegeben. Bereits vordefiniert sind: serif, sans-serif, cursive, fantasy und monospace. Bei den anderen Schriften besteht die Abhängigkeit davon, welche Schriften auf dem Rechner installiert sind.

color

Angegeben wird die Farbe, in der der Text erscheinen soll.

background-color

Angegeben wird die Farbe, in der der Hintergrund erscheinen soll.

text-decoration

underline line-through blink none

text-shadow

Hier wird die Farbe des Schattens angegeben oder none für keinen Schatten.

Umrahmungen

border-width

Die Breite des Randes. Mögliche Werte sind: thick, thin und medium.

border-color

Farbe des Randes.

border-style

none dotted dashed solid groove ridge inset outset

Abstand

text-indent stellt die Erstzeileneinrückung ein.

Die horizontale Ausrichtung erfolgt mit text-align . Die Werte sind left center right und justify (Blocksatz). Vertikal ist es vertical-align. Die Werte hier sind top middle bottom sub und super.

Der white-space kann auf pre oder nowrap eingestellt werden. Zurückgesetzt wird er durch normal.

Umfließen von Text mit float

Anordnung und Spaltensatz per CSS

Die folgende Ausrichtung ist typisch. Die Bezeichnungen entsprechen denen, die für HTML-5 vorgesehen sind. Wann immer alle Browser damit kompatibel sein werden, können Sie diese direkt verwenden. Sie können aber als Klasse eingesetzt werden.

+------------------------------------------+
| header                                   |
+-----+------------------------------------+
| nav | article                            |
|     |                                    |
|     |                                    |
|     |                                    |
|     |                                    |
+-----+------------------------------------+
| footer                                   |
+------------------------------------------+

Diese Seite ist mit CSS unterstützt genau so aufgebaut! Zum Vergleich habe ich die gleiche Anordungen mit einer einfachen Tabelle realisiert. Zum Test sollten Sie mit verschiedenen Browsern die Seiten auseinander und zusammenschieben. Der Vorteil von CSS liegt allerdings darin, dass Tabellen auf kleinen Geräten (Smartphones) zu sehr kleinen Zeichen führt.

Spaltensatz

• column-width: 250; Die Spalte wird 250 Pixel breit. Die Anzahl der Spalten ergibt sich automatisch, wenn Sie mit width:800; die verwendete Breite vorgeben.
• column-count: 3; Hier werden drei Spalten definiert. Der Text wird in drei Spalten organisiert.
• column-rule-style: solid; (oder dotted) erzeugt eine Trennlinie zwischen den Spalten.
• column-break-before: column; Dies kann bei Überschriften gesetzt werden, damit die Spalteneinteilung aufgebrochen wird. Das ist durchaus sinnvoll, weil die Spalte ansonsten sehr weit nach unten geht. Im Gegensatz zu Papier hört eine Webseite unten ja nicht auf.
• column-break-after: column; Beispielsweise bei Bildern kann dafür gesorgt werden, dass sie den Abschluss der Spaltenaufteilung bewirken.
• column-span: all; Damit wird das Element den Raum aller Spalten einnehmen.
• column-break-inside: avoid; verhindert, dass dieser Abschnitt von einer Spalte zur nächsten umgebrochen wird.

Navigationsleisten

• Homepage
• Programmierer
• Autor
• Service
• Links

Die Leiste selbst sieht im HTML-Code wie eine gewöhnliche UL-Liste aus:

  <ul id="Navigation">
    <li><span>Homepage</span></li>
    <li><a href="prog.htm">Programmierer</a></li>
    <li><a href="veroeff.htm">Autor</a></li>
    <li><a href="csw.htm">Service</a></li>
    <li><a href="links.htm">Links</a><div></div></li>
  </ul>

Lediglich die Einfügung id="Navigation" im UL-Tag ist deutet daraufhin, dass hier CSS verwendet wird. Sie sorgt dafür, dass von der UL bald kaum noch etwas zu erkennen ist.

• display: inline; sorgt dafür, dass die Liste waagerecht statt senkrecht ist.
• list-style: none; bewirkt, dass die Punkte verschwinden.
• hover wird aktiviert, wenn sich der Mauszeiger über dem Element befindet.

Die komplette Style-Definition sieht so aus:

  ul#Navigation {
    margin: 0; padding: 0.4em;
    text-align: center;
    border: 1px solid black;
    background-color: silver;
  }
  ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0; padding: 0;
  }
  ul#Navigation a, ul#Navigation span {
    float: left; width: 8em;
    margin: 0.2em; padding: 0.1em 1em;
    text-decoration: none; font-weight: bold;
    border: 2px solid black;
    border-left-color: white; border-top-color: white;
    color: darkblue; background-color: #ccc;
  }
  ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: darkblue;
  }
  ul#Navigation div {
     clear: left;
  }

Transparenz und Fading

Eine normale Zeile

Eine Zeile mit 25% Transparenz

Maus schaltet Zeile deutlich

.detrans {
 opacity: .25;
}
.detrans:hover {
  opacity: 1;
}

Man kann die Durchsichtigkeit mit dem Attribut transition langsam einblenden.

Maus macht Zeile langsam durchsichtig

.fadeout {
  transition: all 2s ease-in-out;
}
.fadeout:hover {
  opacity: 0.25;
}

<img src="../cpp/cppcover2.jpg" class=fadeout>

Link: about tech: Make Things Fade In and Out with CSS3