Sie
befinden sich hier: Thema: Gestaltung
Artikel: Stylesheets
Stylesheets (CSS Level 1 + 2)
Das Zeitalter, indem man endlos verschachtelte Tabellen benutzte,
um Objekte genau zu plazieren, ist vorbei. Ein Pixel große
Grafiken, sogenannte Blind-GIFs, als Layouthilfe in Tabellen zu
verwenden, ist ebenfalls nicht mehr nötig. Auch das <font>
Tag zur Textformatierung ist nicht mehr zeitgemäß.
HTML ermöglicht als Seitenbeschreibungssprache
keine Besonderheiten der Formatierung. Man kann durch Strukturanweisungen
zwar angeben, ob ein Text links, rechts oder in der Mitte ausgerichtet;
und ob die Schrift zusätzlich fett oder evtl. auch noch kursiv
sein soll, aber das war es. Soll eine bestimmte Schrift in einer
immer genau bestimmten Größe auf dem Bildschirm erscheinen,
oder Objekte pixelgenau plaziert werden, so muß man CSS-Stylesheets
benutzen.
Vorteile von CSS-Stylesheets gegenüber herkömmlichem
HTML:
Mit CSS-Stylesheets haben Sie einen größeren Einfluß
auf die Darstellung der Webseiten. Stylesheets erzeugen ein sauberes
Design. Stylesheets sind auch für Sehbehinderte leichter zu
benutzen, denn Vorleseprogramme kommen mit Tabellen nur schlecht
zurecht. Weitere Vorteile: Pflege, Aktualisierung und Designänderungen
gehen viel leichter und schneller von der Hand. Wenn Sie eine externe
CSS Datei verwenden, müssen nur die Angaben dieser Datei verwenden.
Der zeitliche Aufwand bei der Entwicklung von Webseiten ist deutlich
geringer, da Sie weniger Code zu tippen brauchen.
Was sind CSS-Stylesheets ?
CSS: Cascading Stylesheets sind
als Sammlung zur Formatierung von Internetseiten gedacht. Mit ihnen
kann man eine bestimmte Schriftfamilie vorgeben, Absätze und
deren Abstand untereinander definieren, Objekte genau plazieren,
oder farbige Textrahmen gestalten. Kaskadierend sind Stylesheets
deshalb, weil man mehrere Formatierungsvorlagen ineinander verschachteln
kann, wobei später angewandte Vorlagen die vorherigen überschreiben.
Dies zu beachten und korrekt anzuwenden, ist für die richtige
Anwendung von CSS außerordentlich wichtig!
Der CSS Level 1 (CSS1) wurde bereits 1996 vom WC3 Konsatotium vorgeschlagen.
Er beeinhaltet hauptsächlich Möglichkeiten zur Formatierung
von Text. 1998 erschien dann CSS2 mit Möglichkeiten zur Positionierung
von Elementen. In dieser Fassung ist die Vorgängerversion
mit enthalten. Allerdings unterstützen der Internet Explorer
5 und der Netscape Navigator nicht alle Inhalte von CSS2.
Interne oder Externe CSS-Angaben:
Diese CSS-Anweisungen können in eine sogenannte externe
Stylesheetdatei, oder intern
in den Head Bereich jeder einzelnen HTML-Seite geschrieben werden.
Bei größeren Projekten, vor allem bei Änderungen,
kann dies sehr lästig sein.. Externe Stylesheets hingegen werden
mit den einzelnen Dateien verlinkt. Dies hat den Vorteil, wenn man
Anweisungen verändert, oder neue hinzufügt, so werden
alle Texte in allen verlinkten HTML Seiten geändert.
Alte und Neue Browser zufriedenstellen:
Wie man eine Webseite mit einer externen Stylesheetdatei
für die alten Browser und zugleich mit einer Datei extra für
die neuen Browser verknüpft, sehen Sie hier: (die breaks (br)
entfernen!)
Bei dieser Datei handelt es sich um den Medientyp: media="screen",
die ausschließlich für den Monitorbetrieb bestimmt ist.
Erläüterung: der <link href="../alt.css">
... Befehl verknüpft die Webseite mit der externen
Stylesheetdatei, die nur Formatierungen enthält, die CSS1 unterstützt.
Die alten Browser (Netscape 4.x) kennen den folgenden @import Befehl
nicht, sodaß sie nur die über den Link verknüpfte
Datei benutzen.
Durch den @inport url("neu.css"); Befehl
interpretieren nur Browser, die schon CSS2 interpretieren können.
Für diese ist der @import Befehl vorrangig, sodaß
sie nur diese Stylesheetdatei verwenden. Die url (www.Ihr Name.de)
gibt den Standort der Datei an.
Eine Druckversion der Seiten kann man ebenso mit CSS steuern.
Seitenelemente wie Menüs, oder Navigationselemente werden beim
Druck weggelassen, wenn man sie mit:
class="nichtdrucken"
formatiert. Alle Seitenelemente die mit dieser
Klasse formatieren, erscheinen beim Medientyp: media="print"
(ausschließlich für den Druck!) nicht, sind aber im Browser
zu lesen..
Dafür wird im am sinnvollsten, im HEAD-Bereich der Vorlage
für alle Seiten, oder für eine einzelne Seite, ein Verweis
zu einer externen Stylesheet-Datei, für den Medientyp: print,
verwiesen.
In dieser CSS-Datei muß nun noch die Klasse definiert werden:
.nichtdrucken {display:none;}
Anmerkung: Beim Ausdrucken der Seiten
werden nur die Seitenelemente gedruckt, die nicht mit .nichtdrucken,
formatiert wurden. Diese Lösung funktioniert bei folgenden
Browsern: Microsoft Internet Explorer (ab Version 4), Netscape (ab
Version 6), oder Mozilla verwenden!
Vorteile von CSS-Stylesheets:
Wenn man Stylesheets benutzt, ist man allein schon bei der Formatierung
von Tags im Vorteil. Bestimmte Bereiche, einzelne Dokumente, bis
hin zum kompletten Internet Auftritt, alles kann man mit einer einzigen
Angabe in dem dazugehörigem Bereich (Tag, Klasse oder ID) verändern.
In HTML ist es bei einigen Tags nicht nötig einen End Tag
zu schreiben. Beispiel: <p></p>. Bei CSS müssen
sie allerdings vorhanden sein. Außerdem überläßt
es einem HTML, ob man die Tags groß oder klein schreibt. Beim
Nachfolger XHTML müssen alle Tags und Attribute (Eigenschaften)
klein geschrieben werden. Am besten gewöhnt man sich gleich
daran.
Bei der Angabe der Schriftart mit CSS, sollte man eine ähnliche
alternative Art mit angeben. So ist, wenn die gewünschte Schriftart
nicht auf dem Rechner des Benutzers vorhanden ist, weinigstens eine
in der Schriftart gleiche als Alternative zu sehen. Ist diese
auch nicht vorhanden. so wird die im Browser des Surfers
eingestellte Schriftart verwendet.
Definitionsarten:
Mit Stylesheets kann man: z.B jeden HTML-Tag formatieren. Habt
man per CSS-Stylesheet den Tag-Seletor
(table, body, a, usw.). Überschrift <H1>
definiert, so kann man die Schriftart mit: Arial, Größe:
12 px, usw. festlegen. Diese Formatierung hat zur Folge, daß
die Überschrift <H1> unabhängig von der Auflösung
am Monitor des späteren Betrachters immer in 12px angezeigt
wird.
Unterklassen (p.einleitung, p.hinweis,
usw.) sind nützlich, um z.B verschiedene Versionen eines Tags
zu erstellen. Der Tag erhält dann ein zusätzliches Attribut
class"einleitung"
Pseudo Elemente (a:link, a:visited,
a:hover, p:first-line, ect.) Hierbei handelt es sich um Definitionen,
die bereits vorhanden sind. Die verschiedenen Zustände von
Verknüpfungen, sowie die erste Zeile eines Absatzes sind wohl
am bekanntesten.
Als Unabhängige Formatierung
bezeichnet man die Klassen-Selektoren. Bei Klassen-Selektoren
kann man für bestimmte Bereiche eine Formatierung erzwingen.
Sie können bei mehreren Tags verwendet werden. Vor den Namen
einer Klasse setzt man einen Punkt .KlasseName
{Stildefinition}.
ID-Selektoren werden meist verwendet,
wenn ein bestimmtes Format nur für einen einzigen Textteil
verwendet werden soll. Meist werden sie zur Positionierung von Elementen
benutzt. Vor den Namen einer Klasse wird eine Raute notiert. #IDname
{Stildefinition}.
Klassen und ID´s fügen ihre Eigenschaften einem bereits
existierenden Format hinzu. Sie haben bei Konflikten mit vorhandenen
Formaten immer Vorrang. Ist z.B im Tag <p> für Absatz
die Schriftfarbe mit schwarz angegeben, so wird der Teil innerhalb
des Absatzes, der mit einer Klasse bestimmt wird, mit der in der
Klasse notierten Farbe geschrieben.
Anmerkung:Selektor
ist der Textteil der in spitzen Klammern hinter einem Tag steht
z.B: h1{
color: #ff4500; font-size: 22pt;
font-family: "Trebuchet MS", Verdana; text-align: center
}.
Maßeinheiten/Größenangaben:
Angaben
Relative Maße
px
Pixel, abhängig von der Monitorauflösung
em
bezieht sich auf die Breite des Buchstabens m
der verwendeten Schrift
ex
bezieht sich auf die Höhe des Buchstabens
x der verwendeten Schrift
Absolute Maße
pt
Punkt
(=1/72 inch)
pc
Pica
(=12 Pukte)
in
Inch
(1in = 2,54 cm)
mm
Millimeter
cm
Zentimeter
Eingabe: richtig: 1.55 cm, falsch: 1,55 cm
Tipp:
Machen Sie alle Schriftgrößenangaben
für die Ausgabe am Monitor in Pixel.
Unter Windows wird eine Schrift, die in Punkt (pt), angegeben ist,
ein Drittel größer dargestellt als auf dem Macintosh.
Das kommt daher, daß ein Windows Rechner eine Auflösung
von 96 ppi (Pixel per Inch) hat, während der Mac mit einer
Auflösung von 72 ppi arbeitet. Unter Mac OS entspricht also
ein Punkt genau einem Pixel. Stellt man mit dem Apple eine Schrift,
die 16 Punkt enttspricht, ein, die auf diesem dann auch mit 16 Pixeln
dargestellt wird, wird diese auf dem Windows PC mit 21 Pixeln dargestellt.
Entscheiden Sie sich schon jetzt für die Zukunft
CSS-Stylesheets sind zwar nicht problemlos, da nicht jeder Style
in jedem Browser funktioniert, aber die, die in jedem interpretiert
werden, sind oft sehr hilfreich. Ob die angegebenen Style-Anweisungen
funktionieren, sollte man an jenen Browser Versionen testen, die
am meisten in Umlauf sind. Noch werden von den meisten Anwendern
der Internet Explorer 4 und der Netscape Navigattor 5 benutzt. Bis
die neuesten Versionen (Internet Explorer 6, Netscape Navigator
7) so weit verbreitet sind, sodaß man seine CSS-Anweisungen
nach ihnen ausrichten kann, werden noch 1-2 Jahre vergehen. Denn
die meisten User scheuen sich oft, die neuesten Browser zu benutzen.
Es sind oft nur Grafiker, HTML´ler oder Power-User, die die
aktuellsten Versionen installiert haben.
Um Stylesheets richtig einsetzen zu können, sollte man sich
schon ein wenig mit HTML auskennen. Als Selbststudium empfehle ich
SELFHTML von Stefan Müntz. Spezielle Bücher, die sich
mit CSS befassen, sind auch zu empfehlen (siehe: Informationen/Bücher.html)!!!