Verfasst von: bletra | 22. Oktober 2009

26. Oktober 2009: Layout, CSSS

CSS

Cascading Style Sheets (CSS) ermöglichen die optische Gestaltung, d.h. die Formatierung einer HTML-Seite. Mit der Einführung von CSS ist es möglich, Inhalt und Layout von Webanwendungen konsequent voneinander zu entkoppeln. Eine einzelne Datei, das Style Sheet definierte, wo welcher Inhalt wie zu sehen ist: Farben, Hintergrundbilder, Fonts, Positionierung, eben alles, was mit dem, was wir sehen zusammenhängt. Welche Gründe sprechen für die Verwendung von CSS?

  • Die Dateigröße ist deutich kleiner und damit können die Seiten schneller geladen werden, viele Quellen berichten von einer Reduktion um 50 %.
  • Konsequente Einhaltung eines einheitlichen Styles, Corporate Identity (CI) ist ohne viel Disziplin möglich.
  • Insbesondere nachträgliche Designänderungen (auch kleinere) können für alle Seiten einheitlich, schnell und leicht umgesetzt werden. Damit verkürzt sich die Entwicklungszeit insgesamt.
  • Durch die Verwendung von CSS erhält HTML eine rein semantische Bedeutung: <p> steht für einen Paragraphen und nicht für einen vertikalen Abstand. h1 und Co strukturieren den Dokumenteninhalt hierarchisch. Die Isolierung optischer Definitionen macht die Seiten für Blinde zugänglich. Zusätzlich ist die Indizierung und Katalogisierung von rein semantischen Seiten besser automatisierbar.
  • Es ist einfach, wirklich einfach, eine Druckansicht ohne Navigation etc. zu erstellen.
  • Die konsequente Verwendung von CSS macht die Seite zukunftsfähig, d.h. auch in der nächsten Browsergeneration könnte die Seite noch wie heute aussehen, natürlich nicht notwendigerweise 😉

Einfaches rezeptartiges Vorgehen zur Erstellung eines Layouts mit CSS:

  1. Container erkennen und benennen (identifizieren)
  2. Markup erstellen, Doctype hinzufügen
  3. Markup validieren !!!
  4. Positionierungsmethoden auswählen (relative, absolute, float)
  5. Boxen durch Farben kennzeichnen, um Ihre Gröÿe und Ausrichtung besser erkennen zu können
  6. Inhalt (Blindtext) hinzufügen
  7. Markup im Kontainer inkl. Gestaltung
  8. Druckstyle

Linkliste zum Thema:

  • Zen Garden demonstriert auf beeindruckende Weise, wie vielfältig bei gleichem HTML-Code eine Seite aussehen kann.
  • CSS 2.1 W3C Recommendation und W3C CSS Validator
  • The Styleworks ist eine deutschprachige Seite rund um CSS, mit einem Quiz 😉
  • A List Apart: Explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
Advertisements

Responses

  1. Hallo!

    „display: table;“ kann für die Darstellung von Blockelementen verwendet werden.
    Es wird unter anderem auf http://jimbarraud.com/2008/06/04/the-magical-css-table-cell/ beschrieben und hat auch ein Beispiel wie es aussieht.


Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: