eckladen24 » CSS

CSS-TIPP: Systemfarben nutzen

alfred — Fri, 22 Jan 2010 08:00:02 +0000

In CSS lassen sich Farben auf verschiediene Arten definieren. Beispielsweise durch Standardnamen (red, green, blue usw.), Hexadezimalcodierungen (#990000, #003300, #000033)oder in der dezimalen Schreibweise der RGB-Werte (rgb(153/000/000), rgb(000/051/000), rgb(000/000/051) et cetera). Es ist aber auch möglich Farbnamen zu wählen, die auf jeden Computersystem individuell angezeigt werden.

Der Farbname background zum Beispiel beinhaltet jene Farbe, die auf dem Desktop als Hintergrundfarbe eingestellt wurde. Ein Beispiel:

.box{background-color: background;}

In diesem Beispiel wird die Klasse box so definiert, dass die mit ihr verknüpften HTML-Elemente die Hintergrundfarbe der Desktop-Einstellungen des jeweiligen Systems übernehmen. Die Farbwahl ist allerdings sehr riskant, denn je nach Einstellung auf dem Computer, wird der Besucher, einer so konfigurierten Webseite, sein buntes Wunder erleben. Besser man verwendet Farbnamen, mit denen die Gestaltung von HTML-Elementen an das Computer-System-Design angeglichen werden können.

buttontext – Farbe des Textes auf den Betriebssystem-Schaltflächen
buttonface – Farbe von Schaltflächen
scrollbar – Farbe von Scrollbalken
window – Hintergrund im Standardfenster
windowtext – Textfarbe in Dialogfenstern

CSS Tutorial Tipp´s

alfred — Mon, 18 Jan 2010 17:03:08 +0000

Mittlerweile habe ich schon einige CSS-Tipps und Tutorials veröffentlicht, nun es ist an der Zeit eine Übersicht zu erstellen. Da diese Übersicht nicht für die Ewigkeit ist, werde ich sie hin und wieder prüfen und aktualisieren.

Stand: 25.01.2010

Variable Links
Durch die Gestaltung eines Links ist schnell erkennbar, mit welcher Art von Datei ein Link verknüpft ist.
Viele Klassen in einem Element
Die Modularisierung der CSS-Klassen als Alternative zur Formatierung eines Textes.
Focus hervorheben
Webseiten vorbereiten, um mit Hilfe der Tab-Tasten Formularfelder und Links auf der Seite per Tastatur bedienen zu können.
Mehrfarbige Trennlinien
Interessanter
-Tag Ersatz.
Einfache Bildvergrößerung
Durch den Einsatz von CSS kleine Vorschaubilder leicht vergrößern.
Die Übersicht behalten
Je sorgfältiger eine CSS-Datei strukturiert und dokumentiert wird, desto weniger Aufwand entsteht beim Aufbau und der Pflege einer Webseite.
Systemfarben nutzen
Per CSS Fabnamen wählen, die auf jeden Computersystem individuell angezeigt werden.

CSS-Tipp: Die Übersicht behalten

alfred — Sat, 07 Nov 2009 15:36:47 +0000

Hier ein farbiger Hintergrund, dort eine andere Schriftart: Die Möglichkeiten von CSS verleiten vor allem bei WYSIWYG-Editoren dazu, einfach darauflos zu formatieren. Je sorgfältiger die Stylesheets strukturiert und dokumentiert werden, desto weniger Aufwand entsteht beim Aufbau und der Pflege der Webseite. Damit man als Webmaster bei einer Vielzahl von Projekten oder Projektversionen den Überblick nicht verliert, sollten an den Anfang einer externen CSS-Datei, Informationen nach dem folgenden Muster gesetzt werden:

/* Projekt: www.projektname.de Type: CSS-Datei Beschreibung: Grundformate für sämtliche Browser Erstellt am: 05.11.2009, Vorname Familienname Zuletzt geändert: 07.11.2009, Vorname Familienname */

Die Zeichen /* und */ kennzeichnen den dazwischen liegenden Text als Kommentar.
Ein weiterer Tipp:
Alle Farben die im Projekt verwendet werden, zusammenfassen. Dies geschieht ebenfalls mit Hilfe der Kommentarzeichen.

/* ... ====Farben==== Seitenhintergrund: #ffffff Menühintergrund: #eecc00 usw. */

Soll nun eine Farbe der Webseite geändert werden, muss die immer noch an der jeweiligen Stelle im Quelltext geschehen. Mit der Übersicht stellt die Suche nach dem Farbcode jedoch kein Problem mehr dar. Hilreich ist zudem, dass auf dem ersten Blick zu erkennen ist, welche weiteren Dateien mit der CSS-Datei verknüpft sind.Dafür müssen die entsprechenden Namen ebenfalls in den einleitenden Kommentar hinein:

/* ... ====externe Dateien==== Hintergrundbild für Tabellenkopf: ../img/bild1.jpg usw. */

Schlussendlich sollten alle Stellen im Code, die nicht selbsterklärend sind, mit einem Hinweis dokumentiert werden. Wer darüber hinaus noch informieren möchte, dem empfehle ich folgende Literatur:

Häufige Quellcode-Fehler und ihre Auswirkungen Teil 2

alfred — Fri, 06 Nov 2009 12:49:42 +0000

Nachdem ich in Häufige Quellcode-Fehler und ihre Auswirkungen Teil 1 etwas über vergessene Doctype-Deklarationen, Alternativtexte für Grafiken und verwaiste Tags geschrieben habe, beschreibe ich nachfolgend vier weitere Quellcode-Fehler und deren Auswirkungen.Thema sind unter anderem die Verwendung des margin Attributs und die Verwendung von width und height in Tabellen.

Werwendung der Attribute marginwidth, marginheight, topmargin oder leftmargin im -Tag
Besonders beliebt sind dabei vor allem topmargin=”0″ leftmargin=”0″, um den oft störenden Spalt zwischen Seiteninhalt und Browserfenster zu unterdrücken. Alle diese Attribute werden zwar von den gängigen Browsern interpretiert, gehören aber nicht zum HTML-Standard! Um normgerecht vorzugehen, muss CSS verwendet werden. Soll der Spalt unterdrückt werden, müssen im Kopfbereich des HTML-Dokuments folgende Zeilen stehen:
Falsche Verwendung von width und height in Tabellen
Viele Webmaster geben fälschlicherweise das Attribut “height” im einleitenden -Tag an, um die Höhe die Höhe einer Tabelle zu bestimmen. Das ist falsch, denn hier ist ausschließlich “width” gestattet. Die Gesamthöhe der Tabelle wird über die Höhe der einzelnen Zellen gesteuert. Auch in werden “height” und “width” häufig fälschlicherweise eingesetzt. Hier haben aber beide Attribute nichts zu suchen! Die Tags beziehungsweise sind die einzigen, die sowohl Breiten- als auch Höhenangabe enthalten dürfen.
Fehlende oder falsch gesetzte Attribute
Abgesehen von den eben erwähnten beiden Punkten gehören fehlende oder überzählige Attribute häufig zu den “Störenfreiden”. Da wird das einleitende