 |
| CSS-
Cascading Style Sheets |
Links | Archiv |
|
Letzte Änderungen
13.05.2021
|
| |
|
|
 |
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ür CSS und PHP-Skripte,
Tutorials, Workarounds und Hacks. CSS steht für Cascading
Style Sheets und ist eine relativ junge Ergä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. |
|
|
 |
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. |
|
|
 |
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. |
|
|
 |
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. |
|
|
|
|
