CSS- Cascading Style Sheets
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 24.05.2017
     
Grundlagen <<<
Wer seine Webseiten in Helvetica oder Verdana formatieren will oder muss, kommt um unzählige Font Tags nicht herum. Die aber machen den Quellcode unübersichtlich und verdoppeln unter Umständen die Ladezeit eines Dokuments. Externe Style-Sheets sind eine Alternative.
> CSS-Technik
CSS-Technik ist eine moderierte Ressourcensammlung f&uuml;r CSS und PHP-Skripte, Tutorials, Workarounds und Hacks. CSS steht f&uuml;r Cascading Style Sheets und ist eine relativ junge Erg&auml;nzungssprache zu HTML. Mit Hilfe von CSS lassen sich Struktur und Inhalt von Webseiten komplett trennen.
> e=css2
Die saubere Trennung der Struktur eines Dokuments von seiner Formatierung ermöglicht den barrierefreien Zugang für Menschen mit unterschiedlicher Wahrnehmung und unterschiedlicher technischer Ausstattung.
position: fixed; auch mit dem IE
Ohne Einsatz von JavaScript war es lange nicht möglich, eine feststehende Navigation zu realisieren, da der Internetexplorer kein position: fixed; unterstützt.
Nun wurde aber eine Möglichkeit, dieses mittels CSS umzusetzen, gefunden.
Diese möchte ich hiermit vorstellen.
Inhaltserzeugung mit CSS
CSS 2 hat noch so einige kaum bekannte Stärken. So können Sie sogar "dynmisch" Inhalte erzeugen, und diese dann auch formatieren.
Layer auf der Webseite Zentrieren
CSS-Layer lassen sich exakt definieren. Das gilt sowohl für ihre Größe, als auch für ihre Position auf dem Monitor. Doch was, wenn das nicht gewünscht ist und der Layer ganz einfach zentriert erscheinen soll? Hier eine Lösung.
Fixe Bildgrösse
Über CSS kann man dem "img" Tage ein feste grösse definieren. So das alle Bilder die gleiche Grösse erhalten.
Benutzerdefinierte Style-Angaben mit JavaScript
Viele Surfer kennen das Problem: Beim Besuch einer Seite sind einige Inhalte schwer oder gar nicht zugänglich, weil der Webmaster sie mit seinen besten StyleSheets besonders trickreich und aufwändig gestaltet hat. Bieten Sie mit Hilfe von Javascript Alternativen an.
Trick: Hovereffekte für Formulare
Normale Formulare sind öde. Mit einem kleinen Trick können Sie inputFeldern die gleichen Effekte zuweisen, wie Sie es von Hoverbuttons schon kennen.
Mittels CSS für den Druck optimieren
Wer seinem Besucher einen echten Service bieten will muss seinen Besuchern eine Möglichkeit geben, bei einem Ausdruck lediglich relevanten Content auszudrucken. Logos, Banner oder sonstiges sollten beim Ausdruck außen vor bleiben.
Wechselnde HG-Farben mit CSS und JS
Externes Beispiel
Druckversion mit Style Sheets
Um Druckversionen Ihrer Seiten anzubieten, brauchen Sie weder jede Seite doppelt zu erstellen, noch komplexe Methoden wie PHP, etc zu verwenden - für viele Zwecke reichen CSS (Cascading Style Sheets) aus.
wechselnde Linkbeschreibung
Zoomfunktion mit CSS
Mit der CSS-Eigenschaft zoom erlaubt der Internet Explorer, Inhalte auf Webseiten zu vergrößern und zu verkleinern, ohne dabei das Dokument neu zu laden. Internet Pro zeigt, wie Sie dieses Feature clever einsetzen.
Tabellenzellen mit Rollbalken
Einzellne Tabellenzellen können mit einem eigenen Rollbalken ausgerüstet werden
Farbige Rollbalken
Farbige Rollbalken können auch innerhalb von mehrzeiligen Textfeldern, Frames oder Inline-Frames verwendet werden. Von Microsoft existiert ein Online-Tool mit dem sich prima spielen lässt.
Alten Browsern Alternativen bieten
Wer auf der Höhe der Zeit bleiben will, kommt um CSS nicht mehr herum. Ein großes Problem sind jedoch die noch immer häufig verwendeten älteren Netscapeversionen. Diese unterstützen CSS häufig anders, fehlerhaft, oder gar nicht. Wer nicht will, dass das Design der Site bei diesen Besuchern misslungen dargestellt wird, muss sich etwas einfallen lassen.
graufilter + rückwärts
Jeder kennt ihn, den Microsoft Filter gray(): Um die Grafiken bei Mausberührung ergrauen zu lassen. Das Ganze geht aber auch rückwärts, so dass die Bilder erst bei Berührung in vollem Glanz erstrahlen.
Rollovers - CSS Style
CSS: Externe Links kennzeichnen
Browserweiche - Ausschluss mangelhafter Browser