CSS Prsentation ber Cascading Style Sheets Hannes Skibba

CSS Präsentation über Cascading Style Sheets Hannes Skibba

CSS Inhalte ¡ ¡ ¡ ¡ 16. 09. 2020 Geschichte Prinzipien der Cascading Style Sheets Einbinden von Stylesheets in HTML CSS Syntax Maßeinheiten, Längenangaben und Konstanten CSS für Spezielle Ausgabemedien Exaktes Positionieren - CSS-P und CSS 2 Mehrere Stylesheets Hannes Skibba 2

Geschichte der Cascading Style Sheets 1994 von Håkon Wium Lie vorgeschlagen ¡ Bert Bos arbeite an Agro gab es auf und entwickelte gemeinsam CSS 1 ¡ 1994 erste Präsentation ¡ 1995 Zusammenarbeit mit W 3 C ¡ 1996 Veröffentlichung von CSS 1 ¡ 16. 09. 2020 Hannes Skibba 3

Revisionen von CSS Dezember 1996 CSS 1 (heute in nahezu allen Browsern implementiert) ¡ Mai 1998 CSS 2 (selbst heute nicht vollständig umgesetzt (z. B. : IE 6) ¡ CSS 2. 1 in Entwicklung (korrigiert z. B. : Fehler von CSS 2) ¡ CSS 3 (skalierbare Vektorgrafiken) in Entwicklung ¡ 16. 09. 2020 Hannes Skibba 4

Prinzipien der Cascading Style Sheets Deklarative Stylesheet Sprache für strukturierte Dokumente ¡ Ergänzung zu XML und HTML ¡ Trennung der Inhalts/Style Ebenen ¡ Eigenschaften sind Vererbbar (an untergeordnete Elemente) ¡ Stylesheets sind Kombinierbar (Kaskade) ¡ 16. 09. 2020 Hannes Skibba 5

Einbinden von Stylesheets in HTML ¡ ¡ ¡ 16. 09. 2020 Benutzer (Browser). css Einstellungen Intern inline (innerhalb eines Elements) Intern embedded (innerhalb einer Datei) Extern über. css Files (bevorzugte und verbreitete Variante) Rangfolge der Wichtigkeit von oben nach unten Hannes Skibba 6

CSS Syntax ¡ Die CSS-Angaben sind aufgebaut nach dem Schema: l l l ¡ 16. 09. 2020 Selektor { Stilregel 0; … Stilregel. N; } wobei eine Stilregel aus einem Paar Eigenschaft : Wert besteht. CSS-Kommentare werden als /* Kommentar */ geschrieben. Hannes Skibba 7

CSS Syntax 2 ¡ Selektoren können sein: l l ¡ ¡ 16. 09. 2020 HTML-Elemente, geschrieben mit dem Namen ohne Klammern, etwa p h 4 hr oder span HTML-Elemente einer bestimmten Klasse, geschrieben als Punkt „. “gefolgt vom Klassennamen: . wichtig. neu eindeutig benanntes HTML-Element, geschrieben als Nummernzeichen „#“ gefolgt von Id: #intro #kap 2 … Selektoren werden durch Verbindungselemente kombiniert, etwa p. wichtig oder div#intro Hannes Skibba 8

CSS Syntax 3 ¡ Man kann in CSS fragen, ob ein Element ein gewisses Attribut überhaupt besitzt und was sein Wert ist: l l 16. 09. 2020 element[class]… alle Elemente, die das angegebene Klassenattribut besitzen element[class="xyz"]… alle Elemente, bei denen das angegebene Klassenattribut genau den Wert xyz hat element[class~="xyz"]… Elemente, bei denen im angegebenen Attribut der Wert xyz vorkommt (für Klassen mit einer durch Komma getrennten Werteliste) element[lang|="xy"]… Elemente, bei denen das Sprachattribut mit xy beginnt Hannes Skibba 9

CSS Syntax 4 ¡ ¡ 16. 09. 2020 Der Selektor kann auch Pseudo-Elemente und Pseudo-Klassen, die es im HTML-Text gar nicht als eindeutiges Element gibt, beschreiben – „: “. Status eines Verweises a: link, a: visited, a: hover, a: active, a: focus (: focus auch für andere Elemente!) Sprachauszeichnung : lang (? ? ), wobei in runden Klammern die Sprachversion als de oder de-AT steht. automatisch einzufügender Inhalt : before und : after Hannes Skibba 10

Maßeinheiten, Längenangaben und Konstanten CSS erlaubt Angaben in vielerlei Einheiten ¡ Absolut (cm, mm) oder Relativ (px) ¡ Sinnvoll sind relative Größenangaben (%) , die sich auf die Anwendervorgaben beziehen. ¡ Fenster- und Boxgrößen sollten variabel bleiben. Größe und Ränder am besten in Prozent angeben. ¡ 16. 09. 2020 Hannes Skibba 11

CSS für Spezielle Ausgabemedien Verschiedene Medien benötigen unterschiedliche Ausgaben ¡ Lösung: CSS/media Attribut ¡ <link rel="stylesheet" media="screen" href="website. css"> ¡ @import url(normal. css) screen; ¡ 16. 09. 2020 Hannes Skibba 12

CSS für Spezielle Ausgabemedien 2 Nutzen: ¡ Ein Inhalt der: ¡ Absatzeinzüge für Druck mit Rand enthält ¡ Aber auf Beamer vollständige präsentations- Fläche nutzen ¡ Browser entscheidet das Medium ¡ 16. 09. 2020 Hannes Skibba 13

Exaktes Positionieren - CSS-P und CSS 2 Mit dem position Attribut ist die exakte Positionierung möglich ¡ Es sind relative oder absolute Positionierungen möglich ¡ Es kann ein Abstand vom Rand aber auch von anderen Elementen angeben werden ¡ Es sind auch Z Werte möglich ¡ 16. 09. 2020 Hannes Skibba 14

Exaktes Positionieren - CSS-P und CSS 2 Es sind aber auch andere Optionen möglich: ¡ Textfluss (float) ¡ Als Platzhalter mit verschiedener Sichtbarkeit (visibility) ¡ Abschneiden bei Übergröße ( overflow) ¡ 16. 09. 2020 Hannes Skibba 15

Mehrere Stylesheets Kombinierung: ¡ Hintergrund Infos von externer Datei, Positionierung inline in HTML ¡ Vererbung: ¡ Für alle Headlines Schriftart für Unterüberschriften verschiedene Schriftgrößen ¡ 16. 09. 2020 Hannes Skibba 16

Mehrere Stylesheets 2 ¡ ¡ ¡ 16. 09. 2020 Regeln der Kaskadierung (wenn mehrere Anweisungen aufeinander treffen): Die spezifischste Angabe setzt sich durch Je mehr Elementnamen aufgeführt werden, desto spezifischer die Angabe. Attribute sind spezifischer als Elementnamen ID Selektoren sind spezifischer als Attribute Hannes Skibba 17

Mehrere Stylesheets 3 p{ color: black; } p span { color: green; } span. em { color: yellow; } #id { color: red; } ¡ Ein Absatz mit <p> nun in einem <span>Tag und jetzt sogar mit class-Selektor gefolgt von einem IDSelektor ¡ 16. 09. 2020 Hannes Skibba 18

Mehrere Stylesheets 4 Bei Gleichrangigkeit: ¡ Setzt sich innerhalb einer Ebene die letzte Anweisung durch ¡ Sonst inline>embedded>extern ¡ !important überschreibt regeln ¡ 16. 09. 2020 Hannes Skibba 19

Zen Garden 16. 09. 2020 Hannes Skibba 20

Zen Garden 2 16. 09. 2020 Hannes Skibba 21

Zen Garden 3 16. 09. 2020 Hannes Skibba 22

Zen Garden 4 16. 09. 2020 Hannes Skibba 23