Praktikum im Grundstudium Teil 2: Layout mit CSS Zweck von Stylesheets Ergänzung zu XHTML XHTML legt Struktur des Dokuments fest Definiert Formateigenschaften Trennung von Inhalt und Layout Stylesheet kann wiederverwendet werden einheitliches Layout Mehrere Stylesheets pro XHTML-Dokument möglich Nachteile fortgeschrittene Technik Netscape 4.0 hat Probleme mit Stylesheets
Einbinden von CSS in XHTML TIMTOWTDI: There Is More Than One Way To Do It Direkte Definition im Header-Bereich Zum Experimentieren mit neuen Styles Um Einstellungen aus externer Datei zu überschreiben Um einzelne Elemente spezifisch zu formatieren Bessere Kompatibilität mit alten Browsern: CSS-Daten in HTML Kommentar <style type="text/css"><!-- /* CSS Daten */ --></style> Link auf externe Datei <link rel="stylesheet" type="text/css" href="<url>" /> Explizit für einzelnes XHTML-Element <someelement style="<css-daten>" /> Einbinden von CSS in XHTML Stylesheets für verschiedene Ausgabemedien Werden automatisch passend ausgewählt <link rel="stylesheet" media="screen" type="text/css" href="<url>" /> <link rel="stylesheet" media="print" type="text/css" href="<url>" /> Häufig verwendete Medientypen: all, screen, print, handheld, projection, tty, tv alternative Stylesheets zur Auswahl Nutzer kann aus mehreren Stylesheets wählen <link rel="stylesheet" title="main" type="text/css" href="<url>" /> <link rel="alternate stylesheet" title="alternative" type="text/css" href="<url>" />
CSS Syntax CSS-Style = { Style-Definition. Style-Definition = Selector {"," Selector "{" Definition-Body "". Definition-Body = { Rule ";". Rule = Attribute-Name ":" Value. Kommentare werden von /* und */ begrenzt Im Style-Attribut ist nur Definition-Body zulässig, keine Kommentare CSS-Selektoren Wählen zu formatierende XHTML-Elemente aus Formatieren aller XHTML-Elemente eines bestimmten Typs: Selector = Element-Name. Layout-Defintion kann für mehrere Selektoren gelten: einzelne Selektoren werden mit Komma abgetrennt body { /* Definition für Layout des body-elements */ h1, h2 { /* Definition für Layout von h1- und h2-überschriften */
Klassifizierung von XHTML-Elementen Elemente in XHTML-Body können einer Klasse zugeordnet werden Attribut class="<klassenname>" Jedem Element kann eine eindeutige ID zugeordnet werden Attribut id="<eindeutiger Bezeichner>" ID wird teilweise anderweitig benötigt z.b. für benannte Sektionen <a id="name der Sektion" /> Klassen und IDs in CSS-Selektoren Formatieren aller Elemente eines bestimmten Typs mit einer bestimmten Klasse: Selector = Element-Name "." Class-Name. p.floating { /* Definition für Layout aller p-elemente mit class="floating" */ Alle Elemente einer Klasse, Typ egal Selektor = "." Class-Name..Floating { /* Definition für Layout aller p, h1, span,...-elemente mit class="floating" */ Elemente mit einer bestimmten ID Selektor = "#" ID. #someid { /* Definition für Layout für Elemente mit ID="someid" */
Pseudo-Elemente Manche Elemente sind in Pseudo-Elemente unterteilt: Selector = Element-Name ":" Pseudo-Element-Name. Pseudo-Elemente sind vorgegeben a:hover berührter Link a:visited besuchter Link a:link noch nicht besuchter Link Element:first-line erste Zeile des Elements Element:first-letter erster Buchstabe des Elements Kaskadierung von Stylesheets Style-Definition für ein Element gilt gleichzeitig für enthaltene Elemente Eigenschaften für <body> gelten auch für <p> innerhalb von Body Spezifischere Layout-Definition ergänzen/überschreiben übernommene Definition Mehrfache Definition für gleichen Selektor XHTML-Datei wird von <html> nach </html> geparst <link>-elemente werden behandelt, als ob Dateiinhalt an entsprechender Stelle stehen würde Spätere Definition ergänzt/überschreibt frühere Definition
Verschachtelte Elemente Selektoren können verschachtelte Elemente ausw ählen: Selector = Selector " " {Selector. h1 span.highlight { /* Definition für Layout span-elemente mit class="floating", die sich innerhalb einer h1-überschrift befinden. z.b. <h1><span class="highlight">hier gilt das Layout</span>, hier nicht</h1> */ Attribute CSS bietet etliche Attribute zur Definition des Layouts an Schriftarten Vorder- und Hintergrundfarben Ränder, Rahmen und Abstände Positionierung Nicht alle CSS-Attribute für alle XHTML-Elemente möglich Viele Attribute nur für rechteckige Bereiche sinnvoll Einzelne Attribute nur für spezielle XHTML-Elemente
Attributwerte Verschiedene Werttypen in CSS Benannte Werte left, right, center für Absatzausrichtung Helvetica, Sans Serif für Schriftarten Farbangaben Benannte Farben, z.b. white, black, silver Hexadezimale Farbwerte: #RRGGBB RR = Rotwert im Bereich 00-FF, GG = Grünwert, BB = Blauwert Attributwerte Absolute Werte mit Einheit: 1.2cm, 5px, 12pt, px (Pixel), pt (Punkt), pc (Pica), in (Zoll), mm, cm Relative Werte mit Einheit: 2em, 1.3ex, 50% 1em = Höhe des grossen M in der aktuellen Schrift 1ex = Höhe des kleinen x in der aktuellen Schrift 100% = Standard-Höhe des aktuellen Elements Einzelne Attribute bieten Attribut-spezifische Möglichkeiten für Attributwerte
Vorder- und Hintergrund Vordergrundfarbe color: Farbangabe Hintergrundfarbe background-color: Farbangabe Hintergrundbild background-image: url(<url>) TIMTOWTDI background: [Farbangabe] [url( )] Wiederholung des Hintergrundbilds background-repeat: no-repeat repeat repeat-x repeat-y no-repeat repeat-x repeat repeat-y Schriftarten font-family: Schriftart {"," Schriftart Mehrere Schriftarten möglich Verwendete Schriftart = erste gefundene Schriftart Best Practice: vom speziellen zum Allgemeinen Beispiel font-family: Verdana, Arial, Helvetica, Sans Serif Von CSS erkannte generische Namen: Sans Serif serifenlos (A) Serif mit Serifen (A) Cursive Schreibschrift! (A) Monospace Festbreitenschrift (A)
Schriftauszeichnungen Schriftstil font-style: italic normal Schriftbreite font-weight: lighter normal bold bolder numerisch Numerische Angabe: 100-900 (ohne Einheit) 100 = extra dünn 900 = extrem fett Dekor text-decoration: none underline overline line-through Dekor kann auch entfernt werden a { text-decoration: none; /* Links ohne Unterstrich */ Ausrichtung und Abstände Nur für rechteckige Elemente sinnvoll Horizontale Ausrichtung text-align: left center right justify Vertikale Ausrichtung vertical-align: top middle bottom Zeilenhöhe line-height: Höhe
Abstände, Ränder und Rahmen Nur für Rechteck-Bereiche 3 verschiedene Abstandsarten Aussenabstand (margin) padding margin border Wird im Stil des umgebenden Elements ausgefüllt Rand (border) Kann eigenen Stil haben, umrahmt das Element Innenabstand (padding) Definiert Abstand Inhalt Rand des Elements Wird im Stil des Elements ausgefüllt Inhalt Randdefinition Einzelnes Rand-Attribut border-left-color: Farbangabe border-right-width: Breite border-bottom-style: none solid dotted dashed Vereinfachte Schreibweisen border-color: Farbangabe /* gilt für alle 4 Seiten */ border-left: [Farbangabe] [Stilangabe] border: [Farbangabe] [Stilangabe]
Innen- und Aussenabstand Aussenabstand für einzelne Seite margin-top: Abstand Innenabstand für einzelne Seite padding-left: Abstand Vereinfachte Schreibweise margin padding: Abstand [Abstand [Abstand [Abstand]]] Bei nur einem Wert: Abstand an allen Seiten Bei 2 Werten: 1. Wert = Abstand für oben und unten, 2. Wert = Abstand für links und rechts Bei 3 Werten: oben, links und rechts, unten Bei 4 Werten: oben, unten, links, rechts Positionierung Textumfluss float: none left right A bc A bc A bc none left right Positionierung wichtig für Positionsangabe position: absolute relative Absolute Positionierung erfolgt absolut auf die Seite bezogen Relative Positionierung erfolgt auf das Elternelemen bezogen Positionsangabe top left bottom right: Position Grössenangabe width height: Grösse
Übungsaufgabe Erhältlich unter http://www.tk.informatik.tudarmstadt.de/lehre/ss04/grundprak Verbessern eines HTML-Dokuments Vorgegebenes Dokument nicht valide Erstellen eines CSS zu vorgegebenen XHTML-Dokument + vorgegebenen Layout Erstellen einer eigenen Seite mit eigenem Layout Highlight im Seitentitel Highlight im Fliesstext Nicht markierte QuickLinks ohne Unterstrich Vorschau des Bildschirmformats Links zu verwandten Themen in grauer Box Bild rechts vom Text