CSS

  1. CSS - Cascading Stylesheets

    Stylesheets enthalten das Layout einer Webseite. Browser haben grundsätzlich ein eigenes Stylesheet für HTML-Code. Dieses Stylesheet greift, wenn eine Webseite keine eigenen Angaben macht.

  2. Interne Styleangaben und externe Stylesheets

    Sie können Stylesheet Angaben innerhalb eines HTML-Dokuments machen oder die Angaben in eine eigene Datei auslagern.
    Aus Sicherheitsgründen sollten Sie die zweite Variante wählen.

  3. Stylesheet-Beispiel zum Kopieren

    Sie finden hier ein kommentiertes Stylesheet Beispiel zum Kopieren und Testen.

  4. Vererbung

    CSS-Eigenschaften vererben sich von HTML-Eltern zu HTML-Kindelementen.

  5. HTML und CSS

    Sie können Stylesheet-Angaben innerhalb eines HTML-Dokuments machen, aus Sicherheits- und praktischen Gründen sollten Sie die Angaben jedoch in eine eigene .css Datei schreiben.

  6. Das Box-Modell

    CSS-Elemente können eine definierte Breite, Höhe, einen Innenabstand, Rahmen und einen Außenabstand haben.

  7. Boxen - Innenabstände - Rahmen - Außenabstände

    Mit "Boxen", den Außen- und Innen-Abständen kann man Elemente nebeneinander positionieren.

  8. Positionieren mit CSS

    Elemente können mit "relative" und "absolute" positioniert und übereinandergelegt werden. Die Berechnung erfolgt jeweils vom HTML-Elternelement aus, das ebenfalls relative oder absolute definiert sein muss.

  9. Editoren

    Wordpad, Windows Editor, Word können Sie für HTML und CSS Code nicht verwenden. Sie benötigen einen Editor, der im Format utf-8 abspeichert.

  10. Positionieren mit CSS - Beispiel: zwei Spalten

    Zwei Spalten nebeneinander positionieren mit position:absolute,

  11. Positionieren mit CSS - Fixiertes Menü

    Mit position:fixed können Sie ein Menü oder eine Überschrift fixieren, so dass sie stehen bleiben, während der Inhalt darunter scrollt.

  12. Zentrieren

     

    Dieses Beispiel zentriert ein Layout horizontal und setzt einen Kopf, einen Fuß, ein linkes Menü und einen Inhaltsbereich. Innerhalb des Inhaltsbereichs werden die Überschriften und die Bildergalerie zentriert.

    Das Stylesheet finden Sie hier.

  13. Horizontal und vertikal zentrieren

    Sie können Ihre Webseite einfach horizontal zentrieren über die body Angabe des Style-Sheets - Voraussetzung dafür ist allerdings, dass Sie nicht absolut positionieren - in diesem Fall wird der angegebene Abstand vom Browserfenster berechnet.

    body {margin:auto;}


    Beispiel: zentrieren.html

    die CSS-Datei: zentrieren.css

  14. Linkformatierung

     

    Beispiel

    a:link { font-weight:bold; color:blue; text-decoration:none; } /*Link*/
    a:visited { font-weight:bold; color:silver; text-decoration:none; }/*Link, das bereits besucht wurde*/
    a:hover { font-weight:bold; color:green; text-decoration:none; }/*Link beim Überfahren mit der Maus*/
    a:active { font-weight:bold; color:lime; text-decoration:underline; }/*aktiviertes Link - solange die Maustaste gedrückt wid*/

     

  15. Menüs und Untermenüs

    Sie finden hier ein 

    Beispiel für horizontales Menü (html)

  16. Tabellen mit CSS

     

    Sie können Tabellen im Vordergrund mit HTMl-Anweisungen erstellen - oder über das Stylesheet mit der Angabe

    {display:table}

     

  17. Unterschiedliche Anzeige in unterschiedlichen Browsern

    Mit HTML5 und CSS3 gibt es wieder eine Reihe potentiell unterschiedliche Umsetzungen von Webseiten in Browsern, die im Code abgefangen werden müssen, will man, dass die Webseite zuverlässig in gleicher Weise in allen Browsern angezeigt wird. Ganz wird man es nie schaffen.

    Browser und Browser-Versionen richten sich nach den verwendeten Geräten und ihren Betriebssystemen. Sie finden die aktuelle Verbreitung von Browsern in Deutschland hier:

    www.browser-statistik.de

  18. Interne und Externe Links, absolute und relative Adressierung

     

    Sie können in Ihrem HTML-Dokument externe Links setzen mit:

  19. HTML und CSS überprüfen - Tools des w3c.org

    HTML Validator des W3C.org

     

    CSS Validator des W3C.org

  20. Kommentare

     

    Kommentare schaffen Übersichtlichkeit im Quelltext

    .html

  21. Responsive Design - HTML und CSS für mobile Geräte

    Sie können ein anderes Layout für Ihre Webseite für mobile Geräte mit folgenden Anweisungen erzeugen:

    HTML

    fügen Sie in den Head des Dokuments folgendes ein:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

    Dies setzt die Breite des mobilen Gerätes als Anzeigebreite der Webseite

    Sie können ein eigenes mobiles Stylesheet mobile.css einbinden mit

    <link rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” />

  22. Einfügen zu großer Elemente: overflow

    Sie können die Anzeige von Bildern und Texten bestimmen, die größer sind als die Breite und Höhe des definierten Bereichs, mit

    overflow:visible, overflow:hidden , overflow:scroll und overflow:auto

    Detaillierte Informationen dazu erhalten Sie bei 

    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow

  23. font-face, eigene Schriftarten verwenden

    1. Wandeln Sie Ihre Schrift in alle gängigen Formate um mit

    FontSquirrel

    Sie erhalten eine .zip Datei, entpacken Sie sie in Ihren .css Ordner

    2. Fügen Sie am Anfang Ihrer Style-Sheet Datei folgenden Code ein und ersetzten Sie 'meineschrift' mit dem Dateinamen Ihrer Schriftdateien

     

  24. Browser Unterschiede - Häufig verwendete Browser

     

    Theoretisch sollten neuere Browser gleiche Ausgaben produzieren - Sie müssen dies jedoch für verschieden Bildschirmauflösungen überprüfen. Dies kann sehr aufwendig sein. Am besten orientieren Sie sich an den tatsächlich bei Aufrufen Ihrer Webseite verwendeten Browser - Sie können dies in ihren Logfiles erkennen.

  25. Browser Unterschiede - Test

    Ihre Webseite kann unterschiedlich aussehen in

    • unterschiedlichen Browsern  und unterschiedlichen Bildschirmauflösungen/-Größen ,
    • mobilen Geräten,
    • unterschiedliche Betriebssystemen (Schriftarten werden unter Windows, Mac und Linux/Ubuntu unterschiedlich dargestellt, da auf die im Betriebssystem vorhandenenen Schriftarten zugegriffen wird, falls nicht eigene Schriftarten definiert sind

    Folgende Testwerkzeuge stehen kostenfrei zur Verfügung

  26. Abstände bei Bildern und Medien verhindern, Vorladen von Grafiken, Speicher löschen

    <img> und <object> zum Einfügen von Mulitmediaelementen sind standardmäßig als display:block definiert, das heißt, sie verursachen einen Zeilenumbruch und haben oben und unten einen Abstand zu anderen Dokumenten 

  27. Abweichende Stylesheets für den Internet Explorer

    Abweichende Stylesheets für verschiedene Versionen des Internet-Explorers  können Sie folgendermaßen in den Head Ihres .html Dokumentes deklarieren:

     

    <!--[if IE 6]>
                <link href="ie6.css" rel="stylesheet" type="text/css" media="screen" />
      <![endif]-->

     

    Eine Liste der sogenannten Conditional Comments finden Sie hier:

     

    http://de.wikipedia.org/wiki/Conditional_Comments

     

  28. Unterschiedliche Stylesheets für verschiedene Medien

    Sie können im <HEAD> des HTML Dokumentes unterschiedliche Stylesheets für unterschiedliche Medien definieren. Bei Verwendung eines Mediums (Bidlschrim, Druck, Handheld Device) greift dann das entsprechende Sylesheet. z.B.

  29. Kopierschutz mit transparentem .gif

    Man kann Copy and Paste auf einer Webseite unterbinden, indem man ein transparentes .gif darüber positioniert. Allerdings lässt sich dieser "Kopierschutz" jederzeit über die Quelltextansicht umgehen:

    Beispiel:

    kopierschutz.html

    kopierschutz.css

    transparent.gif

  30. Mauszeiger gestalten

     

    Sie können über CSS eigene Mauszeiger definieren und vorhandene Browser-Mauszeiger abändern über

    cursor:

Subscribe to CSS