Neu! Aktualisierung der Webseite!
Zur aktualisierten Webseite geht es hier:
CSS
-
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.
-
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. -
Stylesheet-Beispiel zum Kopieren
Sie finden hier ein kommentiertes Stylesheet Beispiel zum Kopieren und Testen.
-
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.
-
Vererbung
CSS-Eigenschaften vererben sich von HTML-Eltern zu HTML-Kindelementen.
-
Das Box-Modell
CSS-Elemente können eine definierte Breite, Höhe, einen Innenabstand, Rahmen und einen Außenabstand haben.
-
Boxen - Innenabstände - Rahmen - Außenabstände
Mit "Boxen", den Außen- und Innen-Abständen kann man Elemente nebeneinander positionieren.
-
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.
-
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.
-
Positionieren mit CSS - Beispiel: zwei Spalten
Zwei Spalten nebeneinander positionieren mit position:absolute,
-
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.
-
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.
-
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.htmldie CSS-Datei: zentrieren.css
-
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*/ -
Menüs und Untermenüs
Sie finden hier ein
-
Tabellen mit CSS
Sie können Tabellen im Vordergrund mit HTMl-Anweisungen erstellen - oder über das Stylesheet mit der Angabe
{display:table} -
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” />
-
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 -
Interne und Externe Links, absolute und relative Adressierung
Sie können in Ihrem HTML-Dokument externe Links setzen mit:
-
HTML und CSS überprüfen - Tools des w3c.org
-
Elemente Positionieren mit Flexbox
Das Eltern-Element muss im Stylesheet mit display:flex; bezeichnet werden. flex-wrap: wrap; erzeugt einen Umbruch. Als Richtung kann row oder column gesetzt werdenflex-direction: column; Die Elemente lassen sich zentrieren mit justify-content: center;
Mehr bei https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox
Beispiel:
-
Kommentare
Kommentare schaffen Übersichtlichkeit im Quelltext
.html
-
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
-
font-face, eigene Schriftarten verwenden
1. Wandeln Sie Ihre Schrift in alle gängigen Formate um mit
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
-
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.
-
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
-
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
-
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
-
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.
-
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:
-
Mauszeiger gestalten
Sie können über CSS eigene Mauszeiger definieren und vorhandene Browser-Mauszeiger abändern über
cursor: