CSS – Ein Beispiel

27.10.2016 04:31 Uhr
h1 {
color: blue;
font-family: helvetica;
}

p {
color: green;
}

body {
background: yellow;
}

b {
color: red;
font-weight: 100;
font-size: 30pt;
}

u {
font-style: italic;
font-family: mono-space;
font-weight: 100;
font-size: 3pt;
text-decoration:none;
}

Mit diesem Testbeispiel sehen wir uns nun die Wirkungen der wichtigsten Property / Wert Paare an.

1. Die Properties color und background-color (auch abgekürzt: background akzeptieren als Werte die Namen der wichtigsten Farben in Englischer Sprache.

2. Das Property font-size regelt die Schriftgröße und erwartet als Wert eine von mehreren möglichen Größenangaben. Die wichtigsten Varianten sind:

  • Absolute Angaben, als Zahlen mit „pt“ am Ende. („Druckerpunkte“.) z.B: 12pt
  • Einen Prozentwert: 150%
  • Eine „Längenangabe“, bezogen auf die Länge des Buchstabens „m“ in der eingestellten Schriftart:

3. Das Property font-family wählt die Schriftart aus.

  • Entweder durch Angabe eines Namens einer auf dem jeweiligen Rechner vorhandenen Schrift, z.B. times oder helvetica
  • oder durch Angabe einer „Familienbezeichnung“ – am wichtigsten serif und sans-serif.

4. Das Property font-style wählt zwischen normal und italic.

5. Das Property font-weight wählt aus wie fett die Schrift sein soll:
normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 sind die wichtigsten Werte.

6. Das Property text-decoration wählt spezielle, selbsterklärende Darstellungsmodi:
none, underline, overline und blink.


Hier zwei Einführungen / Übersichten im Web:

  1. css4you
  2. CSS auf SelfHTML.org
Schlagwörter: