Einstieg in CSS – Das Buch zum Sonntag

eliZZZa — Sun, 10 Aug 2008 01:54:07 +0000

Ich muss zugeben, es ist schon eine Freude, wenn man so ein gutes Stück in der Hand hält, an dem man doch einige Zeit gefeilt hat. Also, wer Lust hat, CSS von Grund auf zu lernen und dabei gleich immer wieder verwendbare Seitenvorlagen zu erstellen, der hat nun keine Ausrede mehr >;o) Einstieg in CSS ist ab sofort im Buchhandel und natürlich auch bei amazon erhältlich. Fragen, Anregungen, Feedback zum Buch kannst Du im Forum von cssboxmania.com hinterlassen.

Browserkompatibilität testen

eliZZZa — Thu, 15 Nov 2007 02:45:52 +0000

Technorati Tags: [ browser | browserkompatibiliität | browser testen | eliZZZa ]

Da mir in unseren Kursen (und nach dem letzten Newsletter) immer wieder die Frage gestellt wird, wie man das Aussehen der von uns produzierten Seiten in verschiedenen Browsern testen kann, hier ein nützliches Tool, das ich kürzlich entdeckt habe. Es testet zwar nicht 120+ Browser/-versionen unter verschiedensten Systemen wie Browsercam, ist aber dafür kostenlos.

Browsershots - einfach & kostenlos
Testet derzeit 7 Linux Browser, Windows MSIE 5.0, 5.5, 6.0, 7.0, Firefox 1.5, 2.0, Safari 3.0 und Mac OSX Firefox 2.0 und Safari 2.0 (hmmm, hab aber soeben auch Screenshots für Opera 9.2.3 und 9.2.4 erhalten).

Toller Service!
Du klickst die Browser an, die Du testen möchtest, wählst evt. eine bestimmte Bildschirmauflösung, Farbtiefe, Javascript, Java, Flash; gibst in der Adressleiste oben die zu testende Seite ein und erhältst binnen weniger Minuten die entsprechenden Screenshots zur Ansicht. Sobald Du die Site wieder aufrufst und die Adresse Deiner Seite eingibst, erscheint die Seite mit den gespeicherten Bildern.

Screenshots für Webseiten
Da diese Screenshots 10 Tage am Server bleiben (wenn sie nicht aufgerufen werden), kannst Du diese also auch als Screenshots auf Webseiten verwenden. Wenn diese dann alle paar Tage durch den Aufruf der entsprechenden Seiten abgefragt werden, verlängert sich die Frist der 10 Tage immer wieder. Du kannst die Screenshots aber natürlich auch bei Dir speichern und bist damit unabhängig von deren Verfügbarkeit bei Browsershot.

XHTML – die wichtigsten Regeln

eliZZZa — Sat, 09 Jun 2007 00:33:29 +0000

Wer bereits HTML kann, wird kein Problem mit dem Umstieg auf XHTML haben. Es gilt nur einige wenige Regeln zu beachten:

DocType Definition
Am Anfang eines jeden XHTML Dokuments muß eine DTD stehen und sie muß gegen eine von drei DocTypes validiert werden: Strict, Transitional oder Frameset. Hier die drei Codes:

Wohlgeformt
Dokumente müssen “wohlformatiert” (well-formed) sein, d.h.

Ein XHTML Dokument muß mindestens aus den Elementen DOCTYPE, html, head, title und body bestehen.
Elemente müssen korrekt verschachtelt sein (Überlappungen sind nicht erlaubt),
Elemente müssen korrekt geschlossen sein,
die Schreibweise (Syntax) ist zu beachten.

Kleinbuchstaben
Alle Elemente, Parameter, Attribute & Werte müssen in Kleinbuchstaben geschrieben sein.

Korrekt schließen
Jedes Element muß korrekt geschlossen werden; d.h.

existiert zu einem Tag ein Ende-Tag, so muß dieses gesetzt werden, z.B. muß ein
immer mit
geschlossen werden (was in HTML nicht unbedingt notwendig war)
existiert kein Ende-Tag, so muß ein Element in sich geschlossen werden, z.B.
und zwar mit einem Leerzeichen und einem Schrägstrich vor der schließenden spitzen Klammer. Auch das war in HTML nicht vorgesehen.

Einzige Ausnahme: Die DocType Definition Tags (s. oben)

Werte in Anführungszeichen
Werte von Parametern müssen immer in Anführungszeichen stehen, z.B.

anstatt

Minimieren verboten
Die Verkürzung von Parametern/Attributen ist verboten, z.B.

anstatt

Was ist XHTML?

eliZZZa — Thu, 31 May 2007 17:04:33 +0000

Was ist XHTML?

XHTML (eXtensibel HyperText Markup Language) ist sozusagen eine Brücke zwischen HTML und XML, die den Umstieg auf die flexiblere Sprache XML erleichtern soll.

XHTML ist praktisch der Nachfolger von HTML und definiert die Anwendung von HTML-Tags sehr strikt.

Jetzt hab ich grade HTML gelernt – warum schon wieder was Neues?
Die Entwicklung von XHTML folgt der immer größer werdenden Nachfrage nach Content (Inhalten) für die verschiedensten Ausgabetechnologien (z.B. Handy). Zudem besteht immer öfter Bedarf danach, Inhalte medienneutral zu erstellen. D.h. erst später wird u.U. entschieden, WIE & Wo Content ausgegeben wird, was auch den Anspruch der strikten Trennung von Content & Design erklärt.

In der Praxis
bedeutet das für uns Webproduzenten, daß wir Seiten ohne Tabellen und mit Hilfe von sogen. DIVs (Containern) erstellen, uns strikt an die XHTML Regeln halten und Formatierungsoptionen in externen Stylesheets (CSS = Cascading Style Sheet) definieren.

Noch ein Wort zu den
Termini HyperText und HyperText Markup Language:
Als der legendäre Tim Berners-Lee das erfand, was wir heute als “Links” kennen, nannte er es “HyperText“. Erst die nicht-lineare Verknüpfung von Texten zu anderen (auch weit entfernten) Informationen verband Informationsanbieter zu einem “World Wide Web“.

Aus diesem Grund heißt die Sprache, die wir verwenden, um Webseiten zu erstellen, heute noch HTML, also HyperText Markup Language.

Tim Berners-Lee war übrigens auch für die Entwicklung der ersten Browsergeneration verantwortlich, gründete das W3C (World Wide Web Consortium), das auch heute noch die Standards für jene Sprachen definiert, mit denen wir täglich arbeiten. Tim Berners-Lee ist heute u.a. Präsident des W3C.

Unter dieser Kategorie werde ich Wissenswertes zu den Themen XHTML+CSS zusammentragen.

Ist die Reihenfolge der Anweisungen in einem Stylesheet wichtig?

eliZZZa — Thu, 24 May 2007 00:59:04 +0000

Jein. Es gibt ein paar MUSS-Regeln und einige Empfehlungen.ZWINGEND:

Eine @import Regel muß immer am Anfang eines Stylesheets stehen.
a:link, a:visited, a:hover und a:active müssen immer in dieser Reihenfolge angeführt werden.

EMPFOHLEN:

Folge in Deinem Stylesheet der Struktur Deiner Seiten. Das erleichtert Dir selbst den Überblick.
Du kannst Style Anweisungen sogar hierarchisch einrücken, so wie Du es in Deinem (X)HTML Dokument schreibst.
Beachte den Grundsatz “Wer zuletzt lacht…“, d.h. die letzte Style Anweisung hat das Sagen.
Beispiel: Du schreibst in Deinem Stylesheet zuerst
h1 {background-image: url(muster.gif);}
und weiter unten im Stylesheet
h1 {background: #FF0000;}
dann hat die spätere Anweisung “das Sagen” und Deine Headings 1 werden nur eine rote Hintergrundfarbe, jedoch kein Hintergrundbild zeigen.

CSS für bestimmte Medien

eliZZZa — Wed, 23 May 2007 00:47:14 +0000

Einer der überragenden Vorteile bei der Verwendung von Stylesheets ist die Möglichkeit, für unterschiedliche Ausgabemedien unterschiedliche Stylesheets zu definieren.

Auch dies geschieht entweder durch den Tag oder durch die @import Regel.

Einbindung von CSS

eliZZZa — Tue, 22 May 2007 16:03:22 +0000

Es gibt verschiedene – mehr oder weniger – gebräuchliche bzw. empfohlene Möglichkeiten, CSS in ein (X)HTML Dokument einzubinden. Dabei werden die Styles in der hier angeführten Reihenfolge eingelesen:

Externe(s) Stylesheet(s) (wenn mehrere, wieder in der Reihenfolge wie im Dokument angeführt)
Styles im Header des (X)HTML Dokuments
Styles mittels eingebunden
Styles direkt an einem HTML Element deklariert

Styles bzw. Stylesheets werden in (X)HTML Dokumente eingefügt durch

den HTML Tag ,
den HTML Tag ,
den HTML Tag Parameter …..
den HTML Tag …… oder
die CSS Regel @import

DIE GEBRÄUCHLICHSTEN OPTIONEN

CSS zentral aus einer externen Datei einbinden
Beispiel: Du hast ein Stylesheet namens main.css
Im Head-Bereich Deines (X)HTML Dokuments schreibst Du Folgendes:

Dabei ist natürlich der korrekte (relative) Pfad Deines (X)HTML Dokuments zum Stylesheet zu beachten. In diesem Beispiel wird vorausgesetzt, daß Dein (X)HTML Dokument und main.css “nebeneinander”, also im gleichen Ordner liegen.

CSS zentral im Dokument deklarieren
Du kannst eine oder mehrere Style-Anweisungen aber auch direkt in den Head-Bereich Deines (X)HTML Dokuments schreiben. Das würde dann so aussehen:

Der Tag für HTML Kommentare soll verhindern, daß ältere Browser, die Styles nicht verstehen, den Code interpretieren. Durch das Auskommentieren wird der Style Code von älteren Browsern ignoriert.

Warum eine Style Anweisung ins Dokument schreiben?
Du hast z.B. in Deinem externen Stylesheet für hundert Seiten einen Seitenhintergrund weiß definiert und möchtest für diese eine Seite eine Ausnahme. Betonung auf Ausnahme!

Grundsätzlich gilt, daß Styles möglichst nicht im (X)HTML Dokument notiert werden sollten”!

CSS direkt an einem HTML Element “inline” deklarieren
Du kannst praktisch jedes HTML Element direkt eine Style Anweisung zuordnen, z.B. so:

Headline

Auch diese Form der Style Anweisung könnte man z.B. für eine Ausnahme einsetzen.

CSS mittels direkt im HTLM Code deklarieren
Wird eingesetzt, um eine Style Anweisung über einen HTML-Bereich zu “spannen”, meist, um Text-Bereiche mit Style zu versehen.

Dies ist ein Textstück, wo genau dieser Abschnitt des Textes eine rote Textfarbe erhalten soll. Der Rest des Textes bleibt unberührt.

WEITERE OPTIONEN

CSS mittels @import aus einem externen Stylesheet in ein (X)HTML Dokument einfügen
Eine Alternative zur bisher beschriebenen Einbindung eines Stylesheets in ein (X)HTML Dokument kann so aussehen und würde ebenfalls im Head Bereich stehen:

Und wozu diese Alternative?
Die @import Regel – und wie sie genau geschrieben wird – setzt man meist gezielt ein, um Stylesheets oder Style Anweisungen vor bestimmten älteren Browsern zu verbergen.
Hier ein paar Beispiele:

@import url(“alternativ.css”);
Versteckt die Anweisung vor NN 4.x, Win IE 3, Win IE4 (nicht 4.72), Mac IE 4.01, Mac IE 4.5, Kq 2.1.2, Win Amaya 5.1

@import url(alternativ.css);
Versteckt die Anweisung vor NN 4.x, Win IE 3, Win IE4 (wobei dieser CSS nur liest, wenn es im gleichen Verzeichnis wie das HTML Dokument steht), nicht vor Win IE 4.72

@import url(alternativ.css) screen;
Versteckt die Anweisung vor NN 4.x, Win IE <7

@import “alternativ.css”;
Versteckt die Anweisung vor NN 4.x, Win IE <5, Mac IE 4.01, Kq 2.1.2

CSS über @import in ein Stylesheet einfügen
Die @import Regel darf auch in einem externen Stylesheet angeführt werden (aus den gleichen Gründen) und muß dann zwingend am Anfang des Stylesheets stehen.

Zur @import Regel gibt es eine Vielzahl an Kombinationen & Einsatzmöglichkeiten, deren Erläuterung hier zu weit führen würden. Vielleicht schreib ich später mal eine genaue Anleitung.

EMPFEHLUNG
Vermeide allzu kapriziöse Style Anweisungen!
Zum Testen Deiner Seiten unter verschiedensten Browsern & Systemen verwende Browsercam. Lege Dir dort einen Testaccount an und Du kannst 24 Stunden lang testen, wie Deine Seiten unter verschiedensten Bedingungen aussehen.

Was sind CSS Cascading Style Sheets?

eliZZZa — Sun, 20 May 2007 15:48:22 +0000

CSS ist eine Scriptsprache zur Formatierung von (X)HTML-Elementen. Derzeit ist der Standard CSS 2.1 in Verwendung, CSS 3 wird derzeit entwickelt.

WerÂ´s ganz genau wissen will,
findet die Spezifikationen zu CSS2 des W3C Consortiums in deutscher Übersetzung unter

W3C Spezifikationen CSS2

Der Name “Kaskadierende Style Sheets” leitet sich davon ab, daß die Reihenfolge, in der Style Anweisungen durchgeführt werden, sozusagen kaskadierend abläuft. Dazu ein anderes Mal…

DIE VORTEILE VON CSS STYLESHEETS

Trennung von Inhalt & Design
Der Einsatz von CSS soll (X)HTML Seiten von Formatierungsangaben (Farben, Hintergründen, Grössen, Positionen etc.) weitgehend freihalten. (X)HTML Seiten sollen nur mehr den reinen Content beinhalten, alle Designoptionen sind im Stylesheet definiert.
Einfache & zentrale Änderung von Formatierungsoptionen
Der Einsatz zentraler Stylesheets für mehrere (X)HTML Seiten erlaubt die einfache Änderung solcher Formatierungsangaben in einem Stylesheet für mehrere (X)HTML Seiten.
Medienadäquate Ausgabe von Inhalten
Die zentrale Einbindung unterschiedlicher Stylesheets für unterschiedliche Medienausgabe ist ein weiterer Vorteil von CSS (also z.B. ein Stylesheet für optimierte Druckerausgabe, ein Stylesheet für Handhelds, ein Stylesheet für Braille/Blindenschrift etc.)

CSS Zengarden

eliZZZa — Thu, 26 Apr 2007 22:54:50 +0000

CSS Zengarden

Was man mit CSS so alles zaubern kann, zeigt dieses Projekt beeindruckend. Eigentlich handelt es sich um einen Wettbewerb, wo jeder mitmachen kann. Bedingung ist es, an einer vorgegebenen HTML-Seite nicht einmal einen Beistrich zu ändern, während man sich in der CSS Datei austoben kann.

Sämtliche Gestaltungsvarianten, die Ihr hier findet und auf einige hundert angewachsen sind (es gibt auch ein Verzeichnis nach Kategorien) wurden ausschließlich durch Anpassung des Stylesheets erzielt.

Verblüffend!

CSS Play UK

eliZZZa — Fri, 20 Apr 2007 22:32:04 +0000

CSS Play UK

Wer Lust hat, mit CSS zu experimentieren und die erstaunlichsten Lösungen für z.B. Menüs, Galerien u.v.m. zu finden, der kann sich hier austoben…

eliZZZa.net * all about web 2.0 & web design 2.0 * alles über Web 2.0 & web design 2.0 » XHTML & CSS

Einstieg in CSS – Das Buch zum Sonntag

Browserkompatibilität testen

XHTML – die wichtigsten Regeln

Was ist XHTML?

Ist die Reihenfolge der Anweisungen in einem Stylesheet wichtig?

CSS für bestimmte Medien

Einbindung von CSS

Headline

Was sind CSS Cascading Style Sheets?

CSS Zengarden

CSS Zengarden

CSS Play UK

CSS Play UK