Cascading Style Sheet

Willemers Informatik-Ecke

Einbindung von CSS in ein HTML-Dokument

Definition eines Stils

Der grundsätziche Aufbau eines Stils sieht so aus:

Wirkungsbereich {
  Attribut:Wert;
  Attribut:Wert;
}

Wirkungsbereich

Tag

Der Wirkungsbereich kann durch das Tag gekennzeichnet werden. Sie können beispielsweise alle H2-Tags rot färben, indem Sie folgende Definition schreiben:
H2 {color:red;}
Der HTML-Code von H2-Überschriften muss nicht verändert werden. Durch Ändern des Tags BODY können Sie ein komplettes Dokument mit seinen eingebetteten Tags verändern.
body {font-family:sans-serif;}
Dies führt dazu, dass das komplette Dokument eine serifenlose Schrift verwendet.

Klasse

Sie können auch eine Klasse definieren. Der Name einer Klasse beginnt in der Definition mit einem Punkt.
.morgenrot { color:red; }
Sie wird verwendet, indem der Klassenname hinter class= in einem tag verwendet wird. Dabei kann ein beliebiges Tag verwendet werden.
<p class=morgenrot>Rotes Morgenrot</p>
<span class=morgenrot>Rotes Morgenrot</span>
<H2 class=morgenrot>Rotes Morgenrot</H2>
Es kann auch Tag und Klasse kombiniert werden. Die folgende Stildefinition wirkt nur auf pre-Bereiche der Klasse source:
pre.source {
    width:100%;
    background-color:lightblue;
}

ID

Eine ID dient dazu, einen bestimmten Bereich in einem HTML-Dokument eindeutig zu referenzieren. Darum darf die ID auch nur einmal pro Dokument verwendet werden. Ansonsten ähnelt sie der Klasse.

#testid { font-style: italic;background-color:yellow;}
Für die Verwendung wird statt eine id gesetzt. Sie kann wie bei der Klasse auch mit einer Tag gekoppelt werden.
<div id=testid>Navi</div>

Kommentare

/* Kommentare */ werden wie bei C in /* und */ eingeschlossen. Achtung: Weder // noch # funktionieren. Ist eine CSS syntaktisch nicht in Ordnung funktioniert sie einfach nicht mehr. Wenn man besonderes Pech hat, nur teilweise.

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.
Man kann die Attribute zusammenfassen, indem man einfach font: angibt. Weitere Textmanipulationen sind mit folgenden möglich.
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

Die Abstäde zu den Nachbarn ist durch die Tags margin-top , margin-bottom , margin-left und margin-right eingestellt.

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

CSS kann auch mitten im Text verwendet werden. Dazu kann das Tag span verwendet werden. Es umklammert einen beliebigen Bereich und eignet sich dazu, diesem direkt einige Style Sheet Eigenschaften zuzuordnen. Dieser Absatz wurde mit
<span style="float:left; font-size:3em; width:3em;"><font size=8>CSS</font></span>
eingeleitet. Auf diese Weise kann das Wort CSS umflossen werden. Dabei ist float das Schlüsselwort, das angibt, dass der Text umflossen wird.

Anordnung und Spaltensatz per CSS

Klassischerweise wurde Spaltensatz mit einer HTML-Tabelle gemacht. Und manche tun dies immer noch. Darüber rümpfen viele Designer die Nase. Aber: Es funktioniert. Und das hat seinen Charme. Selbst der Internet Explorer schafft eine solche Anordnung!

Wenn es denn unbedingt CSS sein muss, werden Sie erleben, dass Sie viel Spaß mit diversen Browsern haben werden.

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.

Navigationsleisten

Für meine Homepage wollte ich eine Navigationsleiste bauen, die nicht auf JavaScript basierte. Auf der Seite SelfHTML fand ich einige Beispiele, die mir weiterhalfen, die folgende Leiste zu bauen. Alle Quelltexte basieren auf den dort vorgestellten Quelltexten, so dass für diesen Abschnitt auch das Copyright von SelfHTML gilt.

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.

Die Veränderungen der Border-Stile dafür, dass die Button-Effekte entstehen. Die Farbspielereien sorgen dafür, dass die 3D-Effekte entstehen und der Button angewählt wirkt.

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

opacity stellt die Durchsichtigkeit von Objekten ein. Dazu können Bilder, aber auch Texte gehören. Ist der Wert der opacity 0, ist das Objekt komplett durchsichtig, bei 1 ist es voll da und hat keine Transparenz.

Eine normale Zeile

Eine Zeile mit 25% Transparenz

Die Maus kann ein ein transparentes Objekt voll sichtbar machen. Dazu muss eine Klasse geschrieben werden, die das Objekt erst transparent erscheinen lässt und bei hover die opacity auf 1 setzt:

Maus schaltet Zeile deutlich

.detrans {
 opacity: .25;
}
.detrans:hover {
  opacity: 1;
}
Die Zeile erhielt einfach nur das Attribut class="detrans".

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;
}
Das gleiche gelingt auch mit einem Bild. Bewegen Sie die Maus auf das Bild unten.
<img src=../cpp/cppcover2.jpg class=fadeout>

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


Homepage (C) Copyright 1999, 2013 Arnold Willemer