| 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: Erläüterung: der Durch den
Druckversion erstellen:Eine Druckversion der Seiten kann man ebenso mit CSS steuern. Seitenelemente wie Menüs, oder Navigationselemente werden beim Druck weggelassen, wenn man sie mit:
formatiert. Alle Seitenelemente die mit dieser
Klasse formatieren, erscheinen beim Medientyp: 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:
Anmerkung: Beim Ausdrucken der Seiten
werden nur die Seitenelemente gedruckt, die nicht mit 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
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:
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 ZukunftCSS-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)!!! |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Seitenanfang | Inhaltsverzeichnis |
| Letzte Aktualisierung: 17.03.2022 15:48 |
| © Jörg Montada Mailto: E-Mails bitte über Kontaktformular! |