HTML / CSS - Praxistutorial 4 - Standardanweisungen

1. Die Abschnitte

2. Die "Wildcard"-Anweisung


*
{
  margin: 0px;
  padding: 0px;  
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Erläuterung

Zunächst mal arbeiten wir hier erstmalig mit der so genannten Wildcard, also dem Sternsken-Selektor. Damit setzen wir, wie schon im zweiten Tutorial gezeigt, für alle Elemente sowohl den Außen- als auch Innenabstand auf 0. Das hat den Vorteil, dass man normalerweise(!) pixelgenau arbeiten kann.

Gleichzeitig weisen wir die entsprechenden Schriften zu. Warum machen wir Letzteres aber nicht beim body-Selektor, so wie in den ersten beiden Tutorials? Nun, weil Anweisungen bezüglich der Schrift dann nicht auf die <textarea> vererbt wird. Siehe dazu auch hier Punkt 4.

3. Standardanweisungen


body, textarea
{    
  color: #444;        
  font-size: 13px;
}

Erläuterung

Hier legen wir die Ausgangsgröße der Schrift und deren Standardfarbe fest. Weil auch das nicht von body auf textarea vererbt wird, müssen wir beide Selektoren angeben. Die bisherige Vorgehensweise unterscheidet sich also recht stark von der in den ersten beiden Tutorials. Auch arbeiten wir diesmal mit einer absoluten Schriftgröße.

4. Was denn nun?

Erst erzählt uns dieser Heini im ersten Tutorial, dass man nicht mit absoluten Schriftgrößen arbeiten soll. Dann zeigt er uns im zweiten, wie man das sauber mit relativen Angaben machen kann und jetzt kommt er wieder mit so was an. Tja, das hier ist die dritte Möglichkeit. Zuerst legen wir eine absolute Schriftgröße fest, die ja bekanntlicherweise weiter vererbet wird. Und bei allen folgenden Elementen benutzen wir dann wieder relative Angaben.

Naja, den Grund hab ich euch im zweiten Tutorial am Ende schon gezeigt. Jeder kann in seinem Browser eigene Standardvorgaben festlegen. Und da zerhaut es einem je nach Einstellung schon mal das Design. Dies ist hier also ein guter Kompromiss zwischen Aussehen und Benutzerfreundlichkeit.

Noch ein Grund

Wie ich hier schon sagte, stellt das <textarea>-Element aus einem unerfindlichen Grund eine Besonderheit dar. Ersetzt mal spaßeshalber das font-size: 13px; durch ein font-size: 0.8em; und schreibt dann etwas in das Textfeld. Dann werdet ihr sehen, dass die Schriftgröße ipsig klein ist. Gut, das lässt sich durch eine weitere Anweisung korrigieren, aber darauf verzichten wir jetzt einfach.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt