n Stylesheets/Style-Angaben erlauben die Beschreibung der werden n drei Möglichkeiten (mit weiterer Unterteilung):

Transkript

1 Vergagee Vorlesuge Digitale Medie HTML-Grudlage Wichtige HTML-Elemete 4. STYLESHEETS, CSS Heute: Awedug Beispiele Treug vo Ihalt ud Layout Oder: Woher weiß der Browser wie eie Seite darzustelle ist? HTML strukturiert ur trotzdem werde HTML-Elemete formatiert Browser hat Default-Layout: Browser-Stylesheet Heute: Wie ka ich mei eigees Desig itegriere? Style-/Formatagabe /Style-Agabe erlaube die Beschreibug der Formateigeschafte eizeler HTML Elemete Defiitio euer Formate, die HTML Elemete zugewiese werde drei Möglichkeite (mit weiterer Uterteilug): 4 separat für jedes HTML-Elemet Style-Agabe werde als Attribut des jeweilige HTML-Elemets agegebe Style-Agabe werde für eie bestimmte ID agegebe durch <style> Elemet ierhalb des HTML-Dokumets ierhalb eier Stylesheet Datei Alle drei Möglichkeite köe gleichzeitig verwedet werde köe hitereiader geschaltet, kaskadiert werde Cascadig (CSS) Style Agabe für jedes HTML-Elemet eifachster Fall: style-attribut Ausgagspukt: HTML-Dokumet <hea d> <t itle >Tite l de r Da tei< /titl e> </he ad> <bod y> <h1>überschrift</h1 > </bo dy> </html > 5 Style Agabe für jedes HTML-Elemet eifachster Fall: style-attribut <hea d> <t itle >Tite l de r Da tei< /titl e> </he ad> <bod y> <h 1 st yle=" colo r:re d; f ot-size:48px;"> 48 P ixel ud Rot! </ h1> </bo dy> </html > Agabe für jedes Elemet eizel zugeordet 6 1

2 - Sytax 7 Besser: Formatagabe zetral i Style-Elemet <hea d> <t itle >Tite l de r Da tei< /titl e> <sty le ty pe=" text /css "> /* Forma tag abe für HTML -Ele met e*/ </st yle> </he ad> <bod y> <h 1>Üb ersch rift </h1 > </bo dy> </html > Sytax eies Eitrags im Stylesheet: Selektor { Eigeschaft:Wert; Selektor: HTML-Elemet (Tag-Name), bspw.: H1 Eigeschaft: bspw. color, width, height, Wert: wird der Eigeschaft zugeordet, bspw.: red, 200px, Selektor ka auch Wildcard * sei im Style-Elemet Idividualformate 9 h1 { color:red; fot-size:48px; <h1>48 Pixel ud Rot!</h1> Für jedes HTML-Elemet ka eie eideutige ID vergebe werde Darf ur eimal im gesamte HTML-Dokumet vorkomme <h1 id="titel1">48 Pixel ud Rot!</h1> Idividualformate Idividualformate IDs köe für die Zuweisug vo Formatagabe verwedet werde #title1id { color:red; fot-size:48px; <h1 id="title1id">48 Pixel ud Rot!</h1> Verwedug des class-attributs <h1 class="title">ei bissche Text</h1> 2

3 Formatagabe für Klasse Problem bisher: Formatagabe ware für alle Elemete eies Typs <style Defiitio type="text/css"> auch für bestimmte Klasse vo Elemete.title {fot-size:18pt;color:red; möglich <h1 class="title">überschrift 1</h1> <p>ei bissche Fließtext</p> <h1>überschrift 2</h1> <p>ei bissche Fließtext</p> <h1 class="title">überschrift 3</h1> <p>ei bissche Fließtext</p> sei te.h tm l <lik rel="stylesheet" type="text/css" href="formate.css"> body { backgroud-color:#ffffcc;margi-left:100px;... <div class="title">dies ist der Titel 14.title { fot-size:18pt; color:red; for ma te.c ss Pseudoformate Formate für HTML-Bestadteile, die sich jedoch icht durch ei eideutiges HTML-Elemet ausdrücke lasse Ei och icht besuchter Lik Ei besuchter Lik Der erste Buchstabe eies Absatzes a:lik { fot-weight:bold; color:#0000e0; a:visited { fot-weight:bold; color:#000080; a:hover { fot-weight:bold; color:#e00000; a:active { fot-weight:bold; color:#e00000 a:focus { fot-weight:bold; color:#00e000; p:first-lie { fot-weight:bold p:first-letter { fot-size:300%; color:red; Beispiele für CSS-Eigeschafte Schriftarte ud -parameter Fot-family (Schriftart) fot-style (Schriftstil): italic, oblique, etc. fot-variat (Schriftvariate): small caps fot-size (Schriftgröße) fot-weight (Schriftschitt): bold, bolder, lighter, umber text-decoratio (Textdarstellug): overlie, lie-through, uderlie color text-shadow (Schatte) fot-stretch: Laufweite letter-spacig, word-spachig (Zeiche-, Wortabstad) text-trasform (Trasformatioe) Beispiele für CSS-Eigeschafte Hitergrudfarbe & -bilder Hitergrudfarbe: backgroud-color body { backgroud-color:#ffffcc;margi-left:100px; h1 { fot-size:300%;color:#00ff00; fot-style:italic; border-bottom:solid thi black;.text {fot-size:18pt;color:red; <h1>überschrift</h1> <div class="text">dies ist der Text Beispiele für CSS-Eigeschafte Hitergrudfarbe & -bilder Hitergrudbild: backgroud-image body { backgroud-image:url(dateiame.jpg); <h1>überschrift</h1> Bildkachelug ka beliebig agegebe werde mit: backgroud-repeat Mögliche Werte: repeat-x, repeat-y, o-repeat 3

4 Beispiele für CSS-Eigeschafte Hitergrudfarbe & -bilder Bildpositio festlege: backgroud-attachmet Mögliche Werte: fixed (Wasserzeicheeffekt), scroll body { backgroud-image:url(dateiame.jpg); backgroud-attachmet: fixed; Weitere Eigeschafte: backgroud-positio Mögliche Werte: left, right, ceter Beispiele für CSS-Eigeschafte Positio Positio vo Elemete festlege: CSS Eigeschaft positio Mögliche Werte: absolute = absolute Positioierug, gemesse am Rad des ächsthöhere Vorfahreelemets, das icht die Normaleistellug positio:static aufweist. Scrollt mit. Positioierug durch die Agabe left, top, right, bottom Elemete sid außerhalb des ormale Textf luß, liege über de adere Elemete ud beeiflusse icht ihr Layout relative = relative Positioierug (Verschiebug), gemesse a der Normalpositio oder Afagspositio des Elemets selbst. Positioierugsagabe left, top, right, bottom verschiebe das Elemet aus dieser Positio. achfolgede Elemete verhalte sich so, als wäre das Elemet icht verschobe static = keie spezielle Positioierug, ormaler Elemetfluss (Normaleistellug). fixed= absolute Positioierug, gemesse am "Viewport", d.h. am Browserfester. Bleibt beim Scrolle stehe. DIV zur freie Gestaltug Boxmodell Dies ist der Titel Meübereich Hauptihalt DIV-Elemete defiiere rechteckige Bereiche Ermögliche freie Festlegug vo Bereiche, beispielsweise für: Titel Meü Hauptihalt Ifoboxe Grudlage für de Seiteaufbau Gilt icht ur für DIV Festlegug vo Breite, Höhe, Ie- ud Außeabstäde Prizip Ihalt: weitere div-elemete, Absätze: <p>, etc. Boxmodell Boxmodell, Abstäde ma r gi -top bo r de r -top pa d di g- top margi-to p border-to p ma r gi -left bo r de r -left pa d di g- left height border-le ft margi-le ft paddig-l eft heigh t Ihalt paddig-t op Ihalt width paddig-b ottom width border-bo ttom Ihalt paddig-r ight border-ri ght margi-ri ght pa d di g- right bo r de r -right ma r gi -right margi-bo ttom pa d di g- bottom bo r de r -bottom ma r gi -bottom Gesamtbreite ud höhe ergibt sich aus der Summe aller Eizelwerte i x ud y- Richtug 4

5 Boxmodell, Positioierug HTML ud CSS 27 <div id= title > Dies ist der Titel <div id= meu > Meübereich <div id= cotet > Hauptihalt #title{ width: 500px; height: 100px; border: 1px solid black; text-alig: ceter; #meu{ width: 500px; height: 30px; border: 1px solid black; text-alig: ceter; margi-top:5px; HTML beschreibt Struktur ud Ihalt der Date Tags für Struktur Ihalt ormaler Text Struktur beihaltet auch Markierug der Teile, die aders formatiert werde solle Formatierug wird i (CSS) festgelegt für jedes Elemet ka eizel Formatierug bestimmt werde Browser- sorge für Stadard-Darstellug Autore- überschreibe diese Eistelluge ud köe für idividuelle Formatieruge verwedet werde Formate für verschachtelte Elemete Formate verschachtelt agebe Bisher: Festlege vo Formate für HTML-Elemete ohe Berücksichtigug der Positio ierhalb des HTML- Dokumets Weiter: Formatagabe uter Berücksichtigug der Verschachtelug vo HTML-Elemete <p>to be or ot to be...</p> <p>ei berühmtes Zitat aus der Tragödie Hamlet, </p> Wie ka ma ur die <p>-elemete formatiere, die ierhalb vo stehe? <style type="text/css> div p { color:red; div > p { color:blue; div * b { color:violet; div + p { margi-top:100px; wird i - Sektio rot gesetzt Text wird i -Sektio blau gesetzt, we es direkt verschachtelt ist, z.b <p>text</p> Text wird i -Sektio violett gesetzt, we es idirekt verschachtelt ist, z.b <p><b>text2</b></p> Text wird mit 100 Pixel Abstad gesetzt, we er direkt ach -Sektio auftritt Formate attributabhägig agebe Rot, we h1 Attribut title ethält Blau, we h1 Attribut Kapitel mit der Zuweisug "uebersicht" ethält Rot, we Absatz p Attribut "alig" ethält Grü ud liksbüdige Textausrichtug, we alig "ceter" zugewiese wurde h1[title] { color:red; h1[kapitel="uebersicht"] { color:blue; p[alig] { color:red; p[alig=ceter] { color:gree; text-alig:left; Cascadig Style Sheets - CSS für uterschiedliche Ausgabegeräte wichtig für z.b. Barrierefreiheit Defiitio i HTML: <title>titel de r Datei</title > <lik rel="st ylesheet" medi a="scree" hr ef="website.c ss"> <lik rel="st ylesheet" medi a="prit, emb ossed" href="d ruck.css"> <lik rel="st ylesheet" medi a="aural" hre f="speaker.cs s">

6 Cascadig Style Sheets - CSS für uterschiedliche Ausgabegeräte Defiitio i prit { /*Formatdefiitioe zum Drucke*/ selektor scree { /*Formatdefiitioe für Bildschirmausgabe*/ selektor {eigeschaft:wert; Medietype Werte für das media-attribut all: CSS gilt für alle Medietype aural: für sythetische Sprachausgabe braille: für Braille-Ausgabegerät embossed: für Braille-Drucker hadheld: für kleie Geräte, Orgaizer, Hady, etc. prit: für de Ausdruck auf Papier projectio: für Projektio, bspw. mit Beamer scree: für Bildschirmausgabe tty: für icht-graphische Ausgabe mit fester Zeichebreite, bspw. Ferschreiber oder textorietierte Browser wie lyx tv: für TV-ähliche Ausgabegeräte, meist mit grober Bildschirmauflösug Cascadig Style Sheets - CSS köe (ud werde) hitereiader gehägt ud überschreibe eiader 34 Browser Stylesheet wird durch Autore Stylesheet überschriebe mehrere Autorestylesheets überschreibe eiader dadurch köe sehr komplexe Layouts realisiert werde, aber auch komplex i der Awedug Cascadig Die Kaskade köe drei Quelle habe: Autor des HTML-Dokumets Beutzer: Nutzer köe Styleiformatioe für ei spezielles Dokumet festlege User-Aget: müsse ei Default-Stylesheet besitze oder so tu als hätte sie eis. Sollte allgemeie Erwartuge erfülle physikalische Formatierug überlappe ud beeiflusse sich etspreched der Kaskade Firefox: usercotet.css profile-directory/chrome/ User Stylesheet Beispiel i: Mozilla Firefox\defaults\profile\chrome\userCotetexample.css Opera: uter Eistelluge Ihalte Darstellugsoptioe eigees Stylesheet auswähle Iteret Explorer: uter Extras Iteretoptioe Allgemei Barrierefreiheit wähle ud Beutzerstylesheet festlege auf mehrere Dateie verteile Bisher: eibide mittels lik-elemet HTML-Sytax Ierhalb des köe CSS-Dateie eigefügt werde CSS-Sytax <HEAD> url("druck.css") url("miipc.css") hadheld; </STYLE> url("druck.css") url("miipc.css") hadheld; im HTML-Dokumet im separate Stylesheet Wichtig: muss am Afag Des stehe. 6

7 Hilfsmittel Zusammefassug Firebug: Firefox-Addo, das: die Arbeit mit HTML-Quellcode erleichtert Die Azeige ud Maipulatio vo CSS-Elemete erlaubt Dem Programmierer die Kotrolle der Abarbeitug vo Scripte (bspw. Javascript) ermöglicht wichtig für die Fehlersuche Mittlerweile für alle gägige Browser i ählicher Form implemetiert Web-Developer Toolbar: Firefox-Addo HTML beschreibt Date CSS beschreibt Layout Agabe über Aussehe eies HTML-Elemetes köe: 1. dem Elemet selbst über style-attribut mitgegebe werde 2. ierhalb eies <style>-elemetes agegebe werde 3. i eier separate css-datei stehe bei Pukt 2 ud 3 muss Zuordug zu Elemet() erfolge: für alle HTML-Elemete eies Typs: Agabe des Tag-Names im Stylesheet: bspw. h1 über class-attribut des Elemetes: Selektorim Stylesheet fägt mit Pukt a:.ame über id-attribut des Elemetes: Selektorim Stylesheet fägt mit Raute a: #ame freie Gestaltugsmöglichkeite über div-elemet Basis für das Layout: Boxmodell 7