CSS

  1. CSS - Cascading Stylesheets

    DruckversionPDF version

    Browser verfügen grundsätzlich über ein Style-Sheet, das HTML-Anweisungen umsetzt.

    Dies betrifft den allgemeinen unter <body> definierten Text,  Links - a:link,a: visited, a:active, Überschriften <h1><h2><h3>... Absätze <p> Zeilenhöhen <div>, Tabellenformatierungen <table><TD>, Fettdruck <b><strong> etc.

    Wenn Sie bei Schriftart, Schriftfarbe, Schriftgröße, bei Tabellenbreiten und Höhen keine Angaben machen, kommen die Einstellungen des jeweiligen Browsers zum Tragen, Firefox interpretiert dies anders als der Internet-Explorer, anders als Safari.

    Unterschiede in der Darstellung von Webseiten in unterschiedlichen Browsern beruhen daher vor allem auf dem Fehlen von Angaben. Allerdings interpretiert der Internet Explorer auch einige .css Angaben auf eigene Weise. Schriften sind abhängig vom PC-Betriebssystem (Mac, Linux, Windows), d.h. ein Browser kann auf unterschiedlichen PC-Betriebssystemen Schriftunterschiede aufweisen.

    Ein Faktor ist auch die "Dokumenttypdeklaration": Sie sollten "strict" wählen, wenn Sie Wert auf exakt gleiche Darstellung in allen Browsern legen,  sonst gleichen Browser Unterschiede verschiedener HTML-Versionen selbst - unterschiedlich - aus. Allerdings verursacht dann jede fehlerhafte, der Deklaration nicht entsprechende Angabe unerwünschte Effekte.

    Browser erlauben es Benutzern, ein eigenes Benutzerstylesheet einzubinden - sinnvoll kann dies z.B. bei Seh-Schwierigkeiten sein.

    z.B. im Menü des Internet Explorer unter "Extras/Internetoptionen/Allgemein/Eingabehilfen/Benutzerstylesheet"

    bei Firefox stellen Sie eine  Datei userContent.css in das Verzeichnis /chrome

    Als Verfasser von Webseiten können Sie ein Autoren-Stylesheet erstellen und mit Ihren Webseiten verbinden.

    Wenn Style-Sheets unterschiedliche Angaben haben, kommt folgendes zur Wirkung:

    falls vorhanden:

    1. Benutzer-Stylesheet mit !important versehene Angaben
    2. Autoren-Stylesheet mit !important versehene Angaben
    3. Autoren-Stylesheet
    4. Benutzer-Stylesheet
    5. Browser-Stylesheet

    Befinden sich innerhalb der Style-Sheets widersprechende Angaben, entscheidet die Reihenfolge - spätere Angaben überschreiben vorherige Angaben, Elemente vererben ihre Eigenschaften auf zusätzlich definierte Klassen (>> mehr zur Vererbung)

  2. Interne Styleangaben und externe Stylesheets

    DruckversionPDF version

    Sie können Stylesheet-Angaben machen

    • im <HEAD> eines HTML-Dokuments notieren (<style>....</style>),
    • innerhalb eines HTML-Elements z.B. <h1 style="......">
    • oder als separate .css Datei verbunden über die link rel Angabe im HEAD des HTML-Dokuments

    >> mehr bei selfhtml

     

    Angaben innerhalb der .html Dokumente haben den Nachteil, dass Änderungen in allen betroffenen .html Dokumenten erfolgen müssen. Der Vorteil eines externen .css Stylesheets: Änderungen greifen automatisch in allen verbundenen .html Dokumenten.

  3. Stylesheet-Beispiel zum Kopieren

    DruckversionPDF version

     

    *

    {margin:0;
    padding:0;
    border:0;}

    /* Die Angabe gemeinsamer Standardwerte ist nur für ältere Browser erforderlich, die zum Teil unterschiedliche Browser-Stylesheets haben. Neuere Browserversionen sollten gleiche Voreinstellungen haben, grundsätzlich kann es bei nicht gesetzten Angaben jedoch zu unterschiedlichen Interpretationen verschiedener Browser kommen. */

     

    body {
    font-family:Arial, Verdana, Tahoma, Georgia;
    font-size:12px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    background-color:#fcf0e1;}

     

    h1 {
    font-size: 13px;
    color: #706363;
    font-family: Arial, Verdana, Tahoma, Georgia;
    text-decoration: none;
    }

     

    strong {
    font-weight: normal;
    color: #333333;
    }

     

    .fetteueberschrift {
    font-size: 13px;
    font-weight: bold;
    color: #706363;
    }

     

    a:link {
    color: #333;
    text-decoration: none;
    }

     

    a:visited {
    color: #444;
    text-decoration: none;

    }

     

    a:hover {
    fcolor: #706363;
    text-decoration: underline;
    }

     

    a:active {
    color: #000;;
    }

     

    a.fett:link {
    font-weight: bold;
    }

     

    a.fett:visited {
    font-weight: normal;
    }

     

    a.fett:hover {
    font-weight:bold;
    }

     

    a.fett:active {
    font-weight: bold;}

     

     

    /*genaue Angaben zu Stylesheet-Angaben unter: de.selfhtml.org */

     

     

  4. HTML und CSS

    DruckversionPDF version

    Mit CSS können Sie den Inhalt Ihrer HTML-Seiten vom Layout trennen.

    Sollten Sie das Layout zu einem späteren Zeitpunkt ändern, können Sie dies einmal in der zentralen .css Datei tun. Das Layout aller mit der .css Datei verknüpften.html Webseiten ändert sich so automatisch.

    Grundsätzlich gelten die im jeweiligen Browser-Styleheet hinterlegten Werte. Sie können eigene Angabe in einem Autoren-Stylesheet festlegen. Zusätzlich kann der Benutzer Stylesheet-Angaben für den von ihm verwendeten Browser festlegen.

    CSS Angaben vererben Werte entsprechend der HTML-Eltern-Kind-Struktur.

    Die Wirkungsfolge der "kaskadierenden" Autoren, Browser und Benutzer-Stylesheets ist festgelegt.

  5. Vererbung

    DruckversionPDF version

    CSS Deklarationen vererben ihre Eigenschaften entsprechend der HTML Struktur.
    Eigenschaften, die für html{} oder body{} definiert werden, gelten so für alle Elemente der Webseite, falls sie nicht explizit überschrieben weden.

    Mit dem Firefox add-on firebug können Sie sich einen Überblick verschaffen über die HTML Struktur und die jeweilig wirksamen CSS-Angaben. Sie können hier auch die Auswirkung anderer Angaben austesten.

    CSS Angaben gelten entsprechend der im HTML Dokument festgelegten Reihenfolge der Stylesheets und der Reihenfolge der Angaben innerhalb des Stylesheets. Bei widersprechenden Angaben überschreibt die jeweils letzte Anweisung.

  6. Das Box-Modell

    DruckversionPDF version

    CSS teilt den Bildschirm in rechteckige Elemente auf - sogenannte Boxen oder Container. Ein Element kann Text und Bilder, sowie Hintergrundgrafik enthalten. Elemente können übereinandergelegt werden.

    Mit Hilfe der Container werden Inhalte auf dem Bildschirm positioniert.

    Im HTML Dokument (.html) werden Container üblicherweise mit
    <div></div>  gekennzeichnet, in Frage kommt jedoch jeder HTML Befehl.
    Für Menüs werden üblicherweise unsortierte Listen verwendet, also <ul><li></li> ......</ul>

    Im Stylesheet (.css) hat jede Container-Box einen Innenabstand (padding), einen Rahmen (border) und einen Außenabstand (margin).

    Alles zur Berechnung der Breiten einschließlich Innen- und Außenabständen von Containern-Boxen finden Sie hier:

    http://de.selfhtml.org/css/formate/box_modell.htm

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

    DruckversionPDF version

    Für jedes HTML- Block - Element (div, p. img ..) können mit Stylesheet-Anweisungen (padding, border, margin) Innenabstände, Ränder und Außenabstände definiert werden.

    Inline-Elemente (span, ...) können mit display: block in Block - Elemte umgewandelt werden.

    Die Standardangaben älterer Browser sind unterschiedlich gesetzt. Schwierigkeiten mit unterschiedlicher Umsetzung kann man umgehen, wenn man zu Beginn des Stylesheet Abstände und Ränder grundsätzlich auf 0 setzt.

    *
    {
    	border: 0;
    	margin: 0;
    	padding: 0;
    }
    

     

    Eine ausführliche Beschreibung der Abstände und Rahmen finden Sie hier:

    http://jendryschik.de/wsdev/einfuehrung/eigenschaften/boxmodell

  8. Positionieren mit CSS

    DruckversionPDF version

    Sie können jeweils die linke obere oder die rechte untere Ecke einer Box definieren und so - zusammen mit Breiten und Höhen-Angaben - die Position eines Elementes auf der Webseite bestimmen.

    Elemente können übereinander angezeigt werden. Die Ebene wird mit {z-index:0},{z-index:1},{z-index:2}... festgelegt, je höher der Wert, desto weiter oben liegt das Element.

    {position:absolute;
    top:20px;
    left:20px;}

    {position:fixed;
    top:20px;
    left:20px;}

    Die Position wird von dem HTML-Eltern-Element aus bereichnet, das mit "absolute" oder "relative" positioniert ist.
    Die oberste HTML-Ebene berechnet die Position vom Browserfenster aus. Bei fixed ist das Element beim Scrollen an der entsprechenden Bildschirmposition "fixiert".

    {position:relative;
    top:20px;
    left:20px;}

    Die Position wird von der Stelle aus berechnet, an der das Element ohne Stylesheet-Angaben angezeigt würde.

    {float:left;} positioniert relative Elemente von links nach rechts, je nach verfügbarer Breite, ist kein Platz mehr vorhanden oder enthält ein Element {clear:left;}, beginnt die Positionierung wieder von links.

    {float:right;} positioniert relative Elemente von rechts nach links, ist kein Platz mehr vorhanden oder enthält ein Element {clear:right;}, beginnt die Positionierung wieder von rechts.

     

  9. Editoren

    DruckversionPDF version

    Sie haben die Wahl zwischen grafischen HTML/CSS-Editoren (Wysiwyg) und Code Text-Editoren.

    Kostenfrei erhältlich ist der grafische

    und der Texteditor

  10. Positionieren mit CSS - Beispiel: zwei Spalten

    DruckversionPDF version

     

    datei.css

    .spalte1

    {
    position:absolute;
    font-size:14px;
    line-height:15px;
    text-align:left;
    float:left;
    top:50px;
    left:0;
    width:390px;

    }

    .spalte2
    {
    position:absolute;
    font-size:14px;
    line-height:15px;
    float:left;
    top:50px;
    left:450px;
    width:390px;

    }

    dokument.html

    <div class="spalte1">Text der ersten Spalte</div>

    <div class="spalte2">Text der zweiten Spalte</div>

     
  11. Positionieren mit CSS - Fixiertes Menü

    DruckversionPDF version

     

    Ein einfaches Beispiel für ein fixiertes Menü und eine fixierte linke Menüleiste

     

    finden Sie hier

     

    Das Beispiel funktioniert nicht im Internet Explorer 6. Falls Sie diese - sehr alte - Version berücksichtigen wollen, finden Sie einen "Workaround" bei selfhtml.

     

     
  12. Horizontal und vertikal zentrieren

    DruckversionPDF version

    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

    Horizontal und vertikal zentrieren können Sie mittels zweier <div> Container - der erste Container berechnet den Mittelpunkt der Webseite als linken oberen Punkt der Webseite, der zweite verringert anschließend den Abstand vom Browserfenster um 50 Prozent Ihrer Webseite.

    Beispiel: horizontale und vertikale  Zentrierung mit relativer Positionierung von Menü und Inhalt

    Die .css Dateien: strassenfest.css (Zentrierrung und Menü) und ie.css (stellt den hover Effekt des Menüs in allen Internet Explorer Versionen sicher)
     

     

  13. Linkformatierung

    DruckversionPDF version

     

    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*/

     

    Achtung: Die Reihenfolge muss eingehalten werden!

    http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

     
  14. Menüs und Untermenüs

    DruckversionPDF version

    Sie finden hier ein 

    Beispiel für horizontales Menü (html)

    verbundenes Stylesheet - CSS -

     

    Beispiel für vertikales Menü (html)
    verbundenes Stylesheet - CSS -

     

    Achtung: In älteren Internet Explorer Versionen funktioniert der :hover nur bei Links, nicht bei anderen Elementen.

     

    Ein Beispiel für ältere Internet Explorer Versionen mit Verwendung von Tabellen finden Sie hier

     

    Menü

    verbundenes Stylesheet - CSS - für IE Explorer6

    verbundenes Stylesheet - CSS

     

    Wichtig: Die genaue Doctype "strict" Angabe ist notwendig, damit der Internet Explorer nicht in Quirks Mode reagiert, das heißt, selbst Unterschiede zu Standardbrowsern auszugleichen versucht.

     

    Weitere Beispiele für in allen Browsern funktionierende dynamische Menüs finden Sie hier

    http://www.cssplay.co.uk

     

    Ein Online-Tool für die Erzeugung von HTML und CSS Code für Menüs gibt es hier.

     

     

     

  15. Tabellen mit CSS

    DruckversionPDF version

     

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

    {display:table}

     

    Im Einzelnen lauten die CSS Anweisungen:

     

    display:table; wie table in HTML, inline

    display:table-row; wie tr in HTML

    display:table-cell; wie th und td in HTML

    display: table-colum; wie col in HTML

     

    weitere Anweisungen bei selfhtml

  16. Interne und Externe Links, absolute und relative Adressierung

    DruckversionPDF version

     

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

    <a href="http://www.volkshochschule-frankfurt.de">die Frankfurter Volkshochschule</a>

    Genauso setzen Sie interne Links innerhalb Ihrer HTML-Dokumente. Sie müssen darauf achten, dass die Dokumente gefunden werden, d.h. dass die sogenannten Pfadangaben stimmen. Sie können absolute und relative Pfadangaben machen.

    Absolut:

    <a href="http://www.meine-webseite.de/woche/montag.htm">Montag</a>

    Relativ von index.htm aus:

    <a href="./woche/montag.htm">Montag</a>

    Absolut gibt im Echtbetrieb weniger Übertragungsfehler, wenn die Information verloren geht, von wo aus die Datei gesucht werden soll. Es wird grundsätzlich über die URL www.meine-webseite.de gesucht

    Relativ hat den Vorteil, dass die Links Ihres Webauftritt überall funktionieren, ohne dass Sie Ihre Dateien auf einen Server laden müssen.

    Sie können auch innerhalb einer Seite Ihres Webauftritts Links setzen:
    Dies ist sinnvoll bei sehr langen Seiten, wenn Sie an den Anfang ein Inhaltsverzeichnis setzen

    Sie definieren zuerst, wohin bei Aufruf des Links gesprungen werden soll:
    <a name="hierhin">da wollen Sie hin</a>

    Anschließend können Sie Links setzen:

    <a href="http://www.rhein-main-experten.de/Links+intern+und+extern.html#hierhin">wo finde ich</a>

    Ein typisches Beispiel für Sprünge innerhalb einer Seite über ein Inhaltsverzeichnis bietet http://de.selfhtml.org/html/verweise/definieren.htm

    target="_blank" öffnet das Link in einem neuen Fenster:

    z.B.

    <a href="http://www.frankfurt.de" target="_blank">die Frankfurter Volkshochschule</a> ergibt die Frankfurter Volkshochschule . Probieren Sie es aus - jetzt öffnet sich ein neues Fenster.

     

    Achtung: Überlegen Sie sich, ob Sie das neue Fenster wirklich wollen:

    • bei den Anwendern öffnen sich viele - auf Dauer unübersichtliche Fenster
    • ein Anwender, der ein neues Fenster will, kann dies mit einem Klick auf das Link mit der rechten Maustaste selbst bewirken
  17. Kommentare

    DruckversionPDF version

     

    Kommentare schaffen Übersichtlichkeit im Quelltext

    .html

    <!-- Kommentar: das hier ist die obere Zeile -->

    .css

    /* ... obere Zeile: blauer Hintergrund... */

     

    .php

    // am Anfang einer Zeile

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

    DruckversionPDF version

    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” />

    alternativ können Sie in Ihre Desktop Stylesheet Ausnahmen für mobile Geräte festlegen mit

    @media screen and (max-width:480px)
    {

    #linkespalte {display:none;}

    }

  19. Unterschiedliche Anzeige in unterschiedlichen Browsern

    DruckversionPDF version

    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

    Ihre Zielgruppe kann abweichen Am besten sehen Sie sich die Logfiles an, die Ihr Hoster Ihnen zur Verfügung stellt. Sie können die Logfiles mit einem Analysetool z.B. Analog auswerten, die Browser, mit denen Besucher auf Ihre Webseiten kommen, sind angegeben.

     

  20. font-face, eigene Schriftarten verwenden

    DruckversionPDF version

    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

     

    @font-face {
      font-family: 'MeineSchrift';
      src: url('meineschrift.eot'); /* IE9 Compat Modes */
      src: url('meineschrift.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('meineschrift.woff2') format('woff2'), /* Super Modern Browsers */
           url('meineschrift.woff') format('woff'), /* Pretty Modern Browsers */
           url('meineschrift.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('meineschrift.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

     

    Sie können jetzt in Ihrem Stylesheet die Angabe

     font-family: 'MeineSchrift',  sans-serif;

    verwenden.

  21. Browser Unterschiede - Häufig verwendete Browser

    DruckversionPDF version

     

    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.

     

    Beispiel: Verwendete Browswer - Logfile Analyse rhein-main-experten.de vom 9.1.2013

    Browser einschließlich Spider und Suchmaschinen-Roboter

    Nr.

    #Anf. Seit. Browser
    1 713 665 Netscape (compatible)
    2 394 64 Firefox
      332 57   Firefox/17
      38 5   Firefox/3
      13 1   Firefox/16
      11 1   Firefox/18
    3 308 18 Safari
      118 11   Safari/537
      3 3   Safari/6531
      152 1   Safari/535
      13 1   Safari/534
      11 1   Safari/536
      11 1   Safari/533
    4 71 12 MSIE
      44 5   MSIE/9
      22 4   MSIE/8
      5 3   MSIE/7
    5 9 6 Pixray-Seeker
      9 6   Pixray-Seeker/2
    6 2 2 DoCoMo
      2 2   DoCoMo/2
    7 2 2 findlinks
      2 2   findlinks/2
    8 2 2 SAMSUNG-SGH-E250
      2 2   SAMSUNG-SGH-E250/1
    9 13 1 Opera
      13 1   Opera/9
    10 4 0 Apple-PubSub
      4 0   Apple-PubSub/28
    11 1 0 msnbot-media
      1 0   msnbot-media/1
    12 1 0 FeedBot

     

  22. Browser Unterschiede - Test

    DruckversionPDF version

    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

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

    DruckversionPDF version

    <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 

    Will man den Abstand verhindern muß man im Stylesheet definieren

    img {display:inline;} bzw object{display:inline;}

     

    Mit {display:none} definierte Klassen werden nicht angezeigt, nützlich ist dies neben der Druckausgabe beim "Vorladen" von Grafiken, Bildwechsel werden so fließender.

     

    Browser speichern CSS-Angaben unterschiedlich lange - auch innerhalb eines HTML Dokuments. Sicher geht man, dass der Browser keine der vorherigen float Angaben weiterverwendet mit  {clear:both;} - einfach eine Zeile oder einen Zeilenumbruch mit der entsprechend definierten Klassen einfügen und schon reagieren alle Browser gleich

  24. Unterschiedliche Stylesheets für verschiedene Medien

    DruckversionPDF version

    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.

    <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>

    <link href="druck-style.css" rel="stylesheet" type="text/css" media="print"/>

    <link href="handheld-style.css" rel="stylesheet" type="text/css" media="handheld"/

    Mit

    {display:none;}

    kann in den jeweiligen Stylesheets die nzeige von Elementen unterdrückt werden (sinnvoll z.B. für Layout-Grafiken bei Druckausgabe)

Subscribe to CSS