HTML/Tutorials/Einstieg/Kapitel8

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

1000 tolle Sachen, die man mit CSS machen kann

Toben wir uns aus

Auf der vorigen Seite mussten wir Sie noch mit den Grundregeln und den Vorbereitungen langweilen. Nun aber haben wir uns das vom Halse geschafft und können aus dem Vollen schöpfen.

Schreiben Sie Ihre Gestaltungswünsche einfach in die Datei formate.css, und alle HTML-Seiten der Schreinerei bekommen automatisch das neue Design!

Keine Bescheidenheit beim Gestalten

Machen wir mal was mit der Überschrift:

Beispiel: für die Gestaltung der Überschriften h1
h1 { font-size: 2.5em; background-color: orange; text-align: center; }

Ganz am Anfang waren wir noch recht bescheiden und haben bei unserem ersten Beispiel-Element nur die Schriftgröße verändert. Hier machen wir gleich mal drei Sachen auf einmal: Schriftgröße (font-size), Hintergrundfarbe (background-color) und Ausrichtung (text-align).

Ja, das geht! Wir müssen nur dran denken, die einzelnen Anweisungen jeweils durch ein Semikolon zu trennen. Dann können wir da so viel reinschreiben, wie es uns beliebt.

Kommen wir also zur (knappen) Erklärung:

  • font-size: 2.5em;
    Schriftgröße: zweieinhalb Mal so groß wie die Standard-Schriftgröße des Browsers
  • background-color: orange;
    Hintergrundfarbe: orange (eine Liste von erlaubten Farbnamen finden Sie unter Grafik/Farbpaletten#Farbnamen)
  • text-align: center;
    Ausrichtung des Textes: mittig/zentriert (weitere Infos dazu: Text-align)

Bauen wir's zusammen!

Natürlich müssen wir die Anweisung zum p-Element vom Anfang wieder mit dazunehmen, wenn wir unsere Seiten Stück für Stück „durchstylen“ wollen. Und damit Sie nicht vor Langeweile einschlafen, haben wir auch die h2-Überschrift gleich mal mit reingenommen. Sie sehen, das folgt dem gleichen Schema wie bei h1, nur die Werte sind teilweise anders: 2,2 mal so groß wie die Standard-Schriftgröße soll die Schrift sein, und die Hintergrundfarbe soll diesmal gelb (yellow) sein.

Beispiel: für die Gestaltung von h1, h2 und p ansehen …
p { font-size: 1.5em; }
h1 { font-size: 2.5em; background-color: orange; text-align: center; }
h2 { font-size: 2.2em; background-color: yellow; text-align: center; }

Nun ja, wenn man bedenkt, dass wir lediglich drei Zeilen in unsere formate.css-Datei geschrieben haben, ist das Ergebnis jetzt nicht sooo schlecht, oder?

Großigkeiten und Kleinigkeiten

Schriftgröße von Listen und Preistabelle

Was jetzt noch ziemlich stört, ist, dass die Schrift in der Preistabelle und in den Listen so klein ist. Deshalb könnten wir die entsprechenden Elemente jetzt eigentlich mit einer passenden Schriftgrößen-Angabe ausstatten:

Beispiel: Noch nicht ganz optimale Schriftgrößen-Anpassung der Listen und Tabellen
li { font-size: 1.7em; }
tr { font-size: 1.7em; }

Allerdings ist das so für die Liste noch nicht ganz richtig, denn die Schriftgröße em orientiert sich leider nicht nur an der Standard-Schriftgröße des Browsers, sondern auch am Aufbau der HTML-Seite.

Schon am Anfang dieses Kurses haben Sie doch unsere „Liste in der Liste“ gesehen:

Beispiel: Schriftgrößen-Anpassung der Listen und Tabellen
    <ul>
      <li>Möbel nach Ihren Wünschen
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>

Wenn Elemente so wie hier ineinander verschachtelt sind, wird die em-Schriftgröße der äußeren Liste als neue „Standard-Schriftgröße“ an die innere Liste weitergereicht. Die Standard-Schriftgröße des Browsers wird also von der äußeren Liste um den Faktor 1,7 vergrößert, und dann wird diese Schrift von der inneren Liste noch einmal um 1,7 vergrößert. Gewiss nicht das, was wir uns wünschen, da der Text in der inneren Liste damit ziemlich riesig werden würde.

Allgemein ist dieses „Durchreichen“ von außen nach innen eigentlich ein wichtiges und normalerweise sehr sinnvolles Grundprinzip von CSS, das man fachsprachlich übrigens „Vererbung“ nennt (unter CSS/Vererbung wird es ausführlich und präzise erläutert). Unglücklicherweise ist die Vererbung bei em meist ziemlich unpraktisch.

Die Lösung ist hingegen recht einfach: Wir sagen dem Browser lediglich, dass er die Schriftgröße bei der „Liste in der Liste“ nicht weiter erhöhen soll! Wenn wir bei CSS speziell ein Element in einem anderen Element ansprechen wollen, führen wir einfach das äußere und dann das innere Element auf, dazwischen ein Leerzeichen:

li li. Damit sagen wir: Diese CSS-Anweisung gilt nur für li-Elemente, die sich jeweils innerhalb eines anderen li-Elements befinden.

Beispiel: Richtige Schriftgrößen-Anpassung der Listen und Tabellen
li { font-size: 1.7em; }
li li { font-size: 1em; }
tr { font-size: 1.7em; }

Die Schrift in den normalen li-Elementen soll also weiterhin um den Faktor 1,7 vergrößert werden. Da die li-Elemente innerhalb von anderen li-Elementen (li li) bereits von der äußeren Liste eine um 1,7 vergrößerte Schrift erhalten, soll die Schrift nicht mehr weiter vergrößert werden, sondern bleibt so, wie sie ist: 1em.

Absätze: Blocksatz und serifenlose Schrift

Dann sieht's bei Absätzen mit entsprechend viel Text auch immer ganz nett aus, wenn links und rechts ein gleichmäßiger Rand ist, auch „Blocksatz“ genannt. Dabei wird zwischen die einzelnen Wörter automatisch vom Browser entsprechend mehr Leerraum eingefügt, so dass die Zeilen am rechten Rand alle gleichmäßig abschließen.

Vielleicht wäre eine serifenlose Schrift für Absätze noch ganz schön? Serifen, das sind diese winzigen Verzierungen an jedem Buchstaben, die wir meist gar nicht bewusst wahrnehmen. Bei einer serifenlosen Schrift (sans-serif) gibt es eben keine Serifen. Kann auch ganz nett aussehen. Nachher gibt es noch ein Anzeigebeispiel, dann können Sie sich selbst eine Meinung dazu bilden. Die dazugehörige Eigenschaft heißt font-family; die Details dazu erhalten Sie unter Font-family#Generische_Schriftfamilien.

Beides können wir unserer bisherigen Anweisung recht einfach hinzufügen:

Beispiel: Blocksatz und serifenlose Schrift für Absätze
p { font-size: 1.5em; text-align: justify; font-family: sans-serif; }

Jahaa! text-align: diese Eigenschaft kennen wir doch schon! Damit wird der Text „ausgerichtet“. Vorhin hatten wir damit die Überschriften zentriert, jetzt benutzen wir dieselbe Eigenschaft, um mit justify „Blocksatz“ festzulegen.

Überschriften: einer Handschrift nachempfunden

So, und nun noch eine letzte Spielerei: Da Überschriften logischerweise deutlich weniger Text enthalten als der Text in den folgenden Absätzen, kann man da auch ein bisschen verspielter mit der Schrift sein. Während wir uns bei den Absätzen für eine gut lesbare serifenlose Schrift entschieden haben, wählen wir für die Überschriften eine Schrift, „die Handschriften nachempfunden“ ist. Welche das ist, entscheidet in jedem Fall der Browser anhand der Schriften, die auf dem jeweiligen Computer überhaupt installiert sind (das gilt auch für die serifenlose Schrift von gerade eben).

Nun sehen wir uns an, wie man das in der CSS-Datei notiert. Eine Schrift, „die Handschriften nachempfunden“ ist, heißt dabei cursive:

Beispiel: für die Schrift-Gestaltung von h1, h2
h1 { font-size: 2.5em; font-family: cursive; background-color: orange; text-align: center; }
h2 { font-size: 2.2em; font-family: cursive; background-color: yellow; text-align: center; }

Alles in eine Datei rein!

Jetzt ist es ein Leichtes, alles zu einer Gesamtdatei zusammentragen:

Beispiel: dafür, wie es zusammen aussieht ansehen …
p { font-size: 1.5em; text-align: justify; font-family: sans-serif; }
h1 { font-size: 2.5em; font-family: cursive; background-color: orange; text-align: center; }
h2 { font-size: 2.2em; font-family: cursive; background-color: yellow; text-align: center; }
li { font-size: 1.7em; }
li li { font-size: 1em; }
tr { font-size: 1.7em; }

Sehen Sie sich das Ergebnis an. Noch nicht perfekt, aber so langsam macht es sich. Wenn Sie sich daran sattgesehen haben, blättern Sie bitte auf die nächste Seite um, dann wollen wir das Design weiter verbessern!