Literatur. [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003

Transkript

1 Literatur [7-1] Meyer, Eric: CSS kurz&gut. O'Reilly, 4. Auflage, 2011 [7-2] Laborenz, Kai: CSS-Praxis. Galileo Computing, 2003 [7-3] Münz, Stefan: <Professionelle Websites>. Addison-Wesley, 2005 [7-4] Lubkowitz, Mark: Webseiten programmieren und gestalten. Galileo Computing, 2003 [7-5] Seibert, Björn; Hoffmann, Manuela: Professionelles Webdesign mit (X)HTML und CSS. 2. Auflage, Galileo Computing, 2008 [7-6] [7-7] [7-8] [7-9] [7-10] [7-11] 2

2 Überblick Einführung und Grundlagen Selektoren Klassen und Unterklassen Vererbung und Prioritäten 3 Cascading Style Sheets Cascading Style Sheets (CSS) = Sprache zum Definieren des Layouts von Auszeichnungen Mit CSS wird die Präsentation von Auszeichnungen festgelegt. Das Ziel von CSS besteht in der Möglichkeit Layout-Attribute von Tags an einer zentralen Stelle, aber auch direkt bei den betreffenden Tags zu setzen. 4

3 Geschichte I Version Erscheinung Erläuterungen CSS Level Umfang: ca. 76 Seiten Themen: Textgestaltung und Farben CSS Level Umfang: ca. 340 Seiten Themen: Erweiterung von CSS1, Ausrichtung auf Medien CSS Level Aktuelle Version CSS Level 3 nicht vollständig implementiert 5

4 Prüfprogramme und weitere Informationen Kompatibilitätslisten: Prüfprogramme: Vertiefung: Gruppen von Tags bzw. Elementen Block-Elemente (block level elements): Text beginnt immer in einer neuen Zeile Diese Elemente werden in Rechtecken (Boxen) präsentiert. Beispiele: h1..h6, p, div, ul, ol Eingebundene Elemente (inline elements): Elemente sind Teile von Blöcken Beispiele: a, b, i, u, span, br, img Listenelemente Dies sind Blockelemente mit damit verbundenen weiteren Bereichen (der Spiegelpunkt oder die Nummer) Hier gibt es nur ein Tag: li Element = Aus HTML-Sicht: Tag mit seinen Eigenschaften Aus Präsentationssicht: Ein Bereich des dargestellten Dokuments 8

5 Syntax I Selector { Attribut: Wert;... } Deklaration Als Selektoren können Tagnamen, Identifier oder Ausdrücke verwendet werden. Den selektierten Elementen werden die angegebenen Attribute zugeordnet. Es sind mit Semikola aufgebaute Listen zulässig. Bei Angaben direkt am Tag: <Tag style="attribut : Wert ;..."...> Deklaration 9

6 Element-Selektoren Tag { Att1: Val1; Att2: Val2;... } Tag1, Tag2, Tag3,... { Att1: Val1; Att2: Val2;... } Die Liste der Attribute Att x :Val x wird dem einzelnen Tag oder der Liste der Tags Tag1, Tag2, Tag3,... zugeordnet. Beispiel: h1, h2, h3 {color: black;} 11 Kontextabhängige Selektoren I Tag1 Tag2 { Att1: Val1; Att2: Val2;... } Im Bereich des Wirkens (Kontext) von Tag1 erhält Tag2 die angegebenen Attribute. Tag1 Tag2 Tag3 { Att1: Val1; Att2: Val2;... } Im Bereich des Kontext von Tag1 geschachtelt mit Tag2 erhält Tag3 die angegebenen Attribute. Tag1 Tag2 Tag3... { Att1: Val1; Att2: Val2;... } Verallgemeinerung auf beliebig tief geschachtelte Kontexte Der Kontext ist die direkte oder indirekte Schachtelung im Sinne eines geschachtelten Umfassens. 12

7 Kontextabhängige Selektoren II - Beispiel h1 {color: black; } i {color: red; } bedeutet, dass die Schriftfarbe jeder h1-überschrift schwarz ist und dass alle kursiven Auszeichnungen rot sind, h1 i {color: blue; } bedeutet, dass die kursiven Teile innerhalb einer h1-überschrift blau sind, alle anderen Elemente sind davon nicht betroffen. 13 Klassen I Jedes Tag wird als Menge von veränderbaren Attributen aufgefasst. Klasse = Menge der veränderbaren Attribute Neue Klassen werden dadurch gebildet, dass von einer bestehenden Klasse (Tag) die Attribute übernommen (vererbt) werden, bis auf die, die neue Werte erhalten. Vererbung = Übernahme und Ersetzen von Attributen Aber: Nicht alle Attribute werden vererbt(!) p {color: red;} Die Attribute von <p> werden übernommen und gleichzeitig das Attribut der Schriftfarbe auf rot gesetzt. Das wird dann das neue <p>. 14

8 Klassen II Pseudo-Klasse = Klasse, die nur unter bestimmten Bedingungen zur Laufzeit angewendet wird Beispiel: Anker-Pseudo-Klasse a:link {color: red;} Einem A-Tag können damit abhängig vom Zustand (link, visited etc.) unterschiedliche Attribute zugeordnet werden. Die Pseudo-Klasse, die in der Praxis am häufigsten benutzt wird, sind die Interaktionspseudoklassen, :link, :active etc. sind Beispiele dafür. 15 Klassen III Pseudo-Element = Attribute bzw. Teile von Texten, die über Tags von HTML (ohne CSS) nicht ansprechbar sind Beispiele: :first-line für die erste Zeile :first-letter für den ersten Buchstaben einer Zeile In HTML fehlen dafür die Ausdrucksmöglichkeiten, so dass mit dieser syntaktischen Konstruktion Abhilfe geschafft wurde. 16

9 Übersicht Pseudoklassen/Elemente (Auszug) Interaktion Absätze Sprache Neuer Inhalt :link :first-child :lang :before :visited :first-line :after :focus :first-letter :hover :active Die markierten Pseudoklassen werden später beschrieben. 17 Klassen-Selektoren Es können auch eigene Klassen definiert werden, die aber nur als Attribute und nicht als eigenständige Tags innerhalb von <...> verwendet werden:.klasse { Att1: Val1; Att2: Val2;... } Klassendefinitionen beginnen immer mit einem Punkt und definieren den Bezeichner Klasse mit seinen Attributen. Beispiel:.Strong {color: red; font-weight: bold; }... <p class="strong">... Text... </p> Nur mit dem Attribut class lassen sich diese Klassen benutzen. 18

10 Klassen-Selektoren III - Unterklassen Basierend auf einer Klasse lassen sich Unterklassen definieren, wobei die Attribute der Oberklasse vererbt sowie die angegebenen Attribute gesetzt werden. Dies geht nur einstufig. Tag.Klasse { Att1: Val1; Att2: Val2;... } Unterklassendefinitionen beginnen mit einem Tag gefolgt von einem Punkt und definieren den Namen Klasse mit den Attributen. Beispiel: p.definition {color: blue; font-weight: bold; }... <p class="definition">... Text... </p> Mit dem Attribut class lassen sich die Unterklassen benutzen. 19

11 Hinweis Unterklassen dienen der systematischen Veränderung von vielen oder allen benutzten Tags. Identifier (id) dienen dazu, das Layout eines einzigen Tags gezielt zu verändern (bei <div> üblich). Merkregel: Wenn Layout-Attribute mehrfach verwendet werden oder wenn sie systematisch für die Seite bzw. Site sind, dann verwende Klassen bzw. Unterklassen. Wenn Layout-Attribute sich auf einen einzigen, bestimmten Bereich beziehen, dann verwende Identifier (IDs). 21 <div> und <span> <div>... </div> definiert ein Rechteck innerhalb der Seite und ist daher ein Blockelement. <span>... </span> definiert einen Teilbereich innerhalb eines Blocks und ist daher ein Inline-Element. Alle Attribute an <div> und <span> werden in den eingeklammerten Bereich hinein vererbt. Ohne Attribute haben <div> und <span> keine Bedeutung, außer dass sie einen eigenen geschachtelten Teilbaum bilden. Daher sollten <div>-bereiche mit folgenden Konstrukt verwendet werden: <div id="name"> </div> 22

12 Selektoren in der Schachtelung Analog zu dem Kontext-Selektor lassen sich Attribute definieren, die nur bei einer bestimmten Schachtelung gelten sollen. Für den Operator > gilt: Es werden alle Tags Tag2 ausgewählt, die direkt von Tag1 erben bzw. ein direktes Kind von Tag1 sind. Tag1 > Tag2 { Att1: Val1; Att2: Val2;... } Die Attributliste gilt für Tag2 nur dann, wenn es ein direktes Kind in der Benutzung von Tag1 ist, aber kein Enkel etc. 23 Beispiel... body>p { color: blue; } body p { color: black; }... <body> <p>dies ist der erste Absatz. Er ist ein Kind von body.</p> <div> <p>dieser Absatz ein Kind von div</p> </div> <p>dieser Absatz ist wieder ein direktes Kind von body.</p>... Die direkten Kinder haben eine blaue Schriftfarbe, das Kind von div (ein indirektes Kind von body) hat eine schwarze Schriftfarbe. 24

13 Zwei Vererbungshierarchien I Es gibt zwei Vererbungshierarchien zur Bestimmung der Attribute: 1. Vererbung bei der Definition Diese erfolgt durch Angabe der Vererbung in der Definition Beispiel: p.definition {...} 2. Vererbung durch Schachtelung Durch Schachtelung der Wirkungsbereiche werden Attribute vererbt. Die Präsentation am Ende wird durch die gültigen Attribute bestimmt. Diese entstehen durch die Mischung beider Hierarchien. 25 Zwei Vererbungshierarchien II html head body Jedes HTML-Dokument wird intern als Baum realisiert. Dieser Baum spiegelt die geschachtelte Benutzung der Tags wieder. Dies hier ist der Baum des letzten Beispiels. p div p p Vererbt wird immer von der Wurzel in die Blätter. 26

14 Folge-Element-Selektoren (Nachbar-Selektion) Wenn ein bestimmtes Vererbungsverhältnis und zusätzlich eine Bedingung an die textuelle Reihenfolge festgelegt werden soll, ist der Folge-Element-Selektor + nötig: Tag1 + Tag2 { Att1: Val1; Att2: Val2;... } Die Attributliste gilt für Tag2 nur dann, wenn es ein Schwester- Element in der Benutzung von Tag1 ist und lexikalisch direkt als nächstes hinter Tag1 vorkommt. Beispiel: h1 + p {margin-left: -10px;} Der Absatz unmittelbar hinter der Überschrift h1 wird um 10 Pixel nach links eingerückt. 27 Selektion anhand von Attributen I Wenn etwas für alle Tags, die bestimmte Attribute haben, geändert werden soll, dann stehen für die Auswahl folgende Selektoren zur Verfügung, z.b.: [Attribut]: [Attribut=Val]: [Attribut~=Val]: [Attribut =Val]: Selektiert alle Tags mit dem Attribut Attribut z. B. a[href] wählt alle Links, aber keine Anker Selektiert alle Tags mit dem Attributwert Att=Val Selektiert alle Tags mit dem Attributwert Att=Val, wobei Val als einziges Wort im Attributwert vorkommt Selektiert alle Tags mit dem Attributwert Att=Val, wobei Val einen Bindestrich hat z. B. in lang="en-us" 28

15 Selektion anhand von Attributen II - Beispiel a[href^="mailto:"]:before {content: "\2709";} Bei jedem Anker (<a>-element) wird vorher das Zeichen \2709 eingefügt, falls die href-adresse mit "mailto:" beginnt. Das Zeichen \2709 ist ein kleines Briefsymbol. Das Ganze funktioniert gut mit dem Firefox, bei den anderen Browsern: Testen. Siehe: 29 Selektion anhand von Attributen III Für Tabellen gibt es Sonderformen: Konstrukt table:row[reihe] table:column[spalte] table:row[%nr] table:row[%nr+begin] Erläuterung Es werden die Attribute der Reihe mit der Nummer Reihe zugewiesen Es werden die Attribute der Spalte mit der Nummer Spalte zugewiesen Die Attribute werden jeder NR-ten Reihe zugewiesen; geht auch für Spalten Die Attribute werden jeder NR-ten ab der Begin-ten Reihe zugewiesen; gilt auch für Spalten 30

16 Universal-Selektor Um einen beliebigen Kontext anzugeben, wird der Stern benutzt: "*": Tag1 * Tag2 { Att1: Val1; Att2: Val2;... } Wenn zwischen Tag1 und Tag2 ein einziges beliebiges Element steht, dann wird die Attribut-Liste auf Tag2 angewendet. Der Stern kann auch als Platzhalter in anderen Sheet-Typen verwendet werden, z.b. in "* {color: black;}". 31 Beispiel für Universal-Selektor... body * p {color: red; } body p { color: blue; }... <body> <p>farbe: blue</p> <div> <p> Farbe: red </p> </div> <p>farbe: blue </p>... 32

17 Orte für CSS - Kopf Die Style-Angaben können innerhalb des Kopfs stehen; sie gelten dann für die gesamte Datei: <head>... <style type="text/css">... Definitionen... </style> </head> 33 Globale Struktur einer Seite - Zusammenfassung <!doctype html public TYP> <html> <head> <title>...</title > <meta...=...>... <style type="text/css">... Definitionen... </style> </head> <body>... </body> </html> 34

18 Orte für CSS - Externe Datei II Alternative CSS-Definitionen: Persistent (wird immer angewendet): <link rel="stylesheet" type="text/css" href=url> Bevorzugt: <link rel="stylesheet" type="text/css" href=url title=titel> Alternativ: <link rel="alternate stylesheet" type="text/css" href=url title=titel> Der Benutzer hat die Wahl zwischen den CSS-Definitionen, die alle für dasselbe Medium gelten. Anwendungen: Kontrastverstärkung Varianten für Smartphones oder Tabletts 36

19 Orte für CSS - Externe Datei III Medienspezifische CSS-Definitionen werden durch das Attribut media festgelegt. Beispiele: Vorlesegeräte <link rel="stylesheet" type="text/css" media="aural" href=url> Drucker <link rel="stylesheet" type="text/css" media="printer" href=url> Beamer <link rel="stylesheet" type="text/css" media="projection" href=url> 37 Orte für CSS - Externe Datei IV Möglichkeiten für Geräte aural braille embossed handheld print projection screen Vorlesegeräte Blindenschriftausgabegeräte Blindenschriftdrucker Smartphones, Tablets Drucker Beamer Bildschirme, LCD 38

20

21 @-Anweisungen II klammert Definitionen für einen Medientyp. print { body {... } h1 {... } h2 {... } screen, handheld { body {... } h1 {... } h2 {... } } III Die Mediatypen können auch angegeben werden. url(url1) url(url2) handheld, screen; 42

22 Kaskaden und Vererbung I Priorisierung bei Stylesheets bei Widersprüchen Spezielle sind höherwertiger als allgemeine Definitionen Weiter hinten definierte Festlegungen derselben Priorität sind höherwertiger als früher definierte. Mit important gekennzeichnete haben immer höhere Priorität. Reihenfolge der Interpretation: 1. Vom Browser definierte Stylesheets 2. Vom Surfer definierte Stylesheets 3. In der Seite definierte Stylesheets Siehe auch: 43

23 Beispiel für!important h1 { } font-face: Times; font-size: 20px; color: black!important; 45 Beispiel I <!doctype html public "-//W3C//DTD html//4.0//en"> <html> <head> <title>...</title > <style type="text/css"> #Ebene1 { position: absolute; top: 80px; left: 160px; width: 200px; height: 100px; border: 2px dashed olive; display: block } a[href^="mailto:"]:before { content: "\2709"; } </style> </head> <body> <div id="ebene1">das ist der Inhalt</div> <p> <a href=" google </a> <p> <a href="mailto:bmesser@fhtw-berlin.de"> Messer </a> </body> </html> 46

24 Beispiel II - Ergebnis 47 Beispiel III Attribute für <div> Attribut position: absolute; top: 80px; left: 160px; Erläuterung Das Rechteck soll an einer festen, absoluten Stelle sein Koordinaten der linken oberen Ecke width: 200px; height: 100px; border: 2px dashed olive; Breite und Höhe Art des Rahmens 48

25 Nach dieser Anstrengung etwas Entspannung... 49