Cascading Stylesheets
Werbung
Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium Cascading Stylesheets (CSS) Martin Stricker [email protected] 16. Juni 2004 Cascading Stylesheets CSS Stylesheets ist eine eigene Stilsprache für die Gestaltung von Webseiten. CSS behebt Defizite von HTML: • HTML hat nur einen begrenzten Zeichenvorrat an Attributen zur visuellen Gestaltung von Webseiten. • Viele Eigenschaften lassen sich per HTML überhaupt nicht definieren, z.B. Abstände zwischen Absätzen, Zeilenabstände, absolute Werte für Schriftgröße usw. • Eigenschaften müssen für jedes Element neu definiert werden, eine zentrale Steuerung einer Seite oder ganzer Sites ist per HTML nicht möglich Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets CSS: Syntax und Einbettung CSS-Stile haben • eine eigene, einfach strukturierte Syntax, • ein (hohe) Anzahl an möglichen Attributen (Eigenschaften) und • viele Möglichkeiten zur Zuweisung von Werten CSS-Formate können in HTML-Dokumente auf unterschiedliche Weise eingebettet werden: • • Innerhalb eines Elements durch Notierung von CSS-Stilen als Werte des HTML-Attributs style= Zentral: 1. im Kopf (Header) eines HTML-Dokuments für das ganze Dokument 2. in einer externen Stylesheet-Datei, die mit HTMLDokumenten verknüpft wird Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets CSS Syntax Die Grundsyntax eines CSS-Stils: attribut:wert Folgen mehrere Stile aufeinander; werden sie durch ein Semikolon getrennt: attribut:wert; attribut:wert; usw. Beispiele: font-weight:bold ... Schrift soll fett dargestellt werden font-family:Verdana; font-size:12px; ... Schriftfamile Verdana, Schriftgröße 12 Pixel Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets Eigenschaften und Werte Die Zahl der CSS-Eigenschaften ist hoch, und da CSS laufend weiterentwickelt wird, steigt sie an Werte können sein: • Feste Angaben wie z.B.: bold, normal (font-weight, Schriftgewicht) oder left, center, justify usw. • Maßangaben in unterschiedlichen Maßeinheiten, bei Schrift font-size, Zeilenabstand line-height usw., z.B.: mm, cm, px Pixel, pt Punkt, typographische Maßeinheit: 1/72 Inch, % • Farbwerte (bei u.a. color, background-color): Hexadezimal, z.B. #003366, RGB-Werte, z.B. rgb(0,51,102), oder Farbnamen • Weitere Wertetypen, wie z.B. URL's: url(img/pflanze.gif), u.a. bei background-image Siehe auch CSS-Stile bei SELFHTML http://selfhtml.teamone.de Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets CSS-Stile für einzelne HTML-Elemente definieren Mit dem Universalattribut (kann in jedem Tag verwendet werden) style= können unbegrenzt viele CSS-Stile für ein Element definiert werden: <p style="font-family:Verdana; font-size:12px">...</p> Mozilla Composer: • Automatische CSS-Generierung bei Formatierung über Menüs • Über Advanced Edit ... bzw. Advanced Properties ... , Registerkarte Inline-Style, können CSS-Stile erstellt werden Composer zeigt (fast) alle Stile richtig an Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets CSS-Stile zentral definieren Bei zentral definierten CSS-Stilen wird ein Selektor notiert, und anschließend zwischen geschweiften Klammern die Formatangaben Beispiel CSS-Stile für (alle) Absatz-Elemente: p {font-family:Verdana,sans-serif; font-size:12px} Beispiel body-Tag: body {margin:0px; padding:10px; color:#000000} Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets CSS-Stile zentral im head Mit dem style-Tag wird ein Bereich für die Notation von CSS-Stilen erzeugt. Die definierten Formate gelten jeweils für das komplette HTML-Dokument. <head> ... andere Head-Tags, wie z.B. <title> ... <style type="text/css"> body {margin:0px;padding:10px;color:#000000;font-size:12px; font-family:Verdana,sans-serif;line-height:18px} p {margin-top:10px;margin-bottom:10px} a {color:rgb(102,0,102);text-decoration:none;font-weight:bold} </style> </head> <body> ... Seiteninhalt Realisierung mit Mozilla Composer: • Die Stile müssen direkt im Quelltext eingetragen werden • Composer erkennt die CSS-Stile und passt nach Änderungen die Darstellung meist korrekt an Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets Zentrale Stile in externem Stylesheet CSS Stil-Definitionen werden in einer externen Stylsheet-Datei (Endung: .css) erstellt Das externe Stylesheet wird mit einem link-Tag im head des HTML-Dokuments verknüpft. Beispiel: <link rel="stylesheet" href="styles.css"> Realisierung mit Mozilla Composer: 1. Externes Stylesheet erstellen 2. Im Quelltextmodus im head das externe Stylesheet verknüpfen Composer reagiert nicht auf Änderungen des Stylesheets => Kontrolle mit Navigator od. Dokument in Composer neu laden Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets Externe Stylesheets <link rel="stylesheet" href="styles.css"> Die Verknüpfung href= muss, wie bei Links, ein gültiger Pfad (relativ od. absolut) sein • Beispiel oben: Das Stylesheet befindet sich im selben Verzeichnis wie die verknüpfte Datei CSS-Dateien sind reine Textdokumente, man kann sie mit einem beliebigen Text-Editor erstellen Spezielle CSS-Editoren erzeugen CSS-Dateien automatisch, sie haben teilweise eine Vorschaufunktion (z.B. Topstyle Lite) Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets Klassenstile Man kann eigene Klassenstile (Spezialformate) erzeugen und mit einem Selektor frei benennen Ein Klassenstil wird einem HTML-Element mit dem HTMLUniversal-Attribut class= zugewiesen Syntax: .selector { ... } - kann allen Elementen zugewiesen werden p.selector { ... } - kann nur Absätzen zugewiesen werden Beispiel: .meinlogo {font-size:30px;color:rgb(102,102,102);} Notation im HTML-Element: <p class="meinlogo">Tee</p> Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets Eigenschaftslose Elemente span und div span und div sind "eigenschaftslose" HTML-Tags, die auschließlich durch CSS-Angaben gesteuert werden CSS-Formatierung erfolgt durch die HTML-Attribute style= bzw. class= • span erzeugt ein Inline-Element <span style="font-weight:bold">fettes Wort</span> • div erzeugt ein Blockelement mit definierbarem Rand border, Außenabstand margin, Innenabstand padding, Breite width, Höhe height, usw. <div class="infobox">Extra-Infos</div> Hermann von Helmholtz-Zentrum für Kulturtechnik Übung: Wissensmanagement mit Neuen Medien Tutorium/ Cascading Stylesheets
