Introduction to Technologies. Stylesheets mit CSS

Transkript

1 Introduction to Technologies Stylesheets mit CSS

2 HTML-CSS enthält den Inhalt HTML- Datei *.html CSS- Datei *.css enthält die Layoutangaben ist austauschbar Darstellung des Seiteninhaltes im erstellten Layout Browser

3 Was CSS kann Farben, Effekte, Schriften, Positionen u.v.m. festlegen HTML-Elemente und selbst definierte Elemente beschreiben HTML-Seiten für verschiedene Ausgabeund Anzeigegeräte optimieren Layoutinformationen zur Verfügung stellen, ohne in HTML-Datei eingreifen zu müssen

4 Was CSS nicht kann dynamische Webseiten erzeugen wenn Seite im Browser angezeigt wird, braucht man ein Programm, um diese Darstellung zu ändern automatische Auswahl des passenden Stylesheets für Benutzergruppen es gibt alte Browser, die CSS nicht darstellen können (IE 2, Netscape 3 (...

5 CSS - Regeln Regel: Selektor Eigenschaft Wert h1 { color: red; font-size: large; } Selektor gibt HTML-Elemente an, auf die sich die Regel bezieht Deklarationen beschreiben die Darstellung aller Elemente, auf die sich der Selektor bezieht

6 Deklaration besteht aus zwei Teilen Eigenschaft, die verändert werden soll und Wert, den die Eigenschaft annehmen soll color: red; Eigenschaft color (Farbe) wird geändert, ( rot ) neuer Wert ist red

7 CSS Beispiel h1 { color: red; font-size: large; } h1 ist die Bezeichnung für eine Überschrift erster Ordnung Regel wird also auf alle derartigen Überschriften angewendet

8 Hierarchie von HTML-Dokumenten Vererbung: übergeordnete Elemente können Eigenschaften an untergeordnete Elemente weitergeben Wenn für untergeordnete Elemente Eigenschaften nicht definiert wurden, werden die Einstellungen der übergeordneten Elemente verwendet manche Eigenschaften werden nicht vererbt (z.b. width als Breitenangabe eines ( Elementes

9 Verknüpfung von CSS und HTML CSS-Anweisungen im Kopf der HTML-Datei <style type="text/css"> <! /*... Hier werden die Formate definiert... */ --> CSS-Anweisungen innerhalb eines HTML- Elementes <h1 style="[element-spezifische Formate]">Das style-attribut</h1> CSS-Anweisungen in einer separaten Datei <link rel="stylesheet" type="text/css" href="formate.css">

10 Beispiel HTML-Element formatieren <p style="background-color:#808040; color:#d8fd02; font-family:'century Schoolbook',serif; font-size:2em; letter-spacing:3px; padding:40px; border:double #D8FD02 4px;" title="zitat von Francis Picabia"> Unser Kopf ist rund, damit das Denken die Richtung wechseln kann! </p>

11 Stylesheets für verschiedene Ausgabemedien <link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print, embossed" href="druck.css"> <link rel="stylesheet" media="aural" href="speaker.css">

12 CSS anwenden Folgende Beispiele sind für CSS in separater Datei Rangfolge der Stylesheets: Benutzer-Stylesheet mit!important Autoren-Stylesheet mit!important Autoren-Stylesheet Benutzer-Stylesheet Browser-Stylesheet Weiterhin wird nach Spezifität sortiert: direkt zugewiesene CSS-Deklarationen ID-Attribute Klassen

13 Elementtyp-Selektor ein oder mehrere HTML-Tags als Selektoren h1, h2, h3{ font-size : 18px; text-transform : capitalize; }

14 Universeller Selektor - CSS kein bestimmter Selektor angegeben, Eigenschaft bezieht sich auf alle Elemente der Seite * { color : red; }

15 Klassen-Selektor Stil für mehrere HTML-Elemente auf einmal Name für Klasse beliebig wählen und Punkt davor schreiben (ohne Leerzeichen).spezial { font-family: Verdana, Arial, Helvetica, sans-serif; } Jedes HTML-Element kann dieser Regel zugeordnet werden

16 Klassen-Selektor Einbindung in HTML <p class= spezial > Ein Absatz mit Inhalt.</p> <li class= spezial > Listenpunkt</li> stellt den Text Ein Absatz mit Inhalt und Listenpunkt in einer serifenlosen Schrift dar (wie im CSS beschrieben)

17 Klassen-Selektor Klasse für bestimmten Elementtyp p.spezial{ font-family: Verdana, Arial, Helvetica, sans-serif; } HTML-Tag, dann Punkt, dann Name (ohne ( Leerzeichen In HTML muss diesem Elementtyp dann extra die Klasse spezial zugewiesen werden

18 ID-Selektor Stilregeln für ein einzelnes HTML-Element auf der Seite festlegen diese Regel überschreibt sämtliche andere zentralen Regeln, die sonst gelten könnten Schreibweise: Namen ausdenken und hinter # schreiben #einzigartig { font-size : 10px; }

19 ID-Selektor muss im HTML mit dem Namen gekennzeichnet sein <p id= einzigartig > Absatz mit kleiner Schrift</p> ID-Regeln haben grundsätzlich Vorrang gegenüber Klassenregeln

20 ID-Selektor HTML-Elemente können eine ID und eine Klasse zugewiesen bekommen <div id= suchbox class= seitenleiste > alle Formatierungen der ID-Regel haben Vorrang gegenüber den Angaben der Klassenregel

21 Pseudo-Klassen in CSS2 :hover, Element, das gerade mit der Maus überfahren wird :active, gerade angeklicktes Element :focus, Element, das den Fokus hat :link, Verweis zu noch nicht besuchter Seite :visited, Verweis zu bereits besuchter Seite

22 Selektor für Nachfahren außer HTML sind alle Elemente Nachfahren von mindestens einem anderen Element Stilregeln sind möglich, die nur für untergeordnete Elemente eines bestimmten Elementes gelten z.b. Formatierungsanweisungen nur für <li>-elemente, die sich in der Navigationsliste befinden

23 Selektoren für Nachfahren #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; }

24 Selektoren Selektoren für direkt über- und untergeordnete Elemente div > p{ font-weight: bild; } Selektoren für benachbarte Elemente h1 + h2 { margin-top: 11px; }

25 Absolute Maßangaben Inch in (2,54 cm) Zentimeter cm Millimeter mm Punkt pt (3,53 mm) Pica pc (12 Punkte, 42,33 mm) Pixel px (ein Punkt auf dem Bildschirm)

26 Relative Maßangaben Größenangabe bezüglich eines Ausgangswertes Prozentuale Angaben Verhältnis zur Höhe der Versalie M em Verhältnis zur Höhe des Kleinbuchstaben x ex Pixel-Angaben erzeugen ein stabiles Größenverhältnis zwischen Text und Bildern, auch bei unterschiedlicher Bildschirm-Auflösung bei Schriftgröße sollte man möglichst auf genaue Vorgaben verzichten

27 Box-Modell Grundlage für Seitenaufbau Breite und Höhe von Elementen Innenabstände in alle vier Richtungen (entspricht Auffüllen im Dreamweaver)

28 Box-Modell Außenabstände für alle vier Richtungen (entspricht Rand im Dreamweaver)

29 Layout mit Stylesheets enthalten alle Layout-Informationen mit Inhalts-Entwickler müssen alle Bestandteile der Seiten abgesprochen sein Namen für alle Teile vergeben beim Entwickeln des Inhalts: alle Bestandteile korrekt benennen beim Entwickeln des Layouts: für alle abgesprochenen Bestandteile das Layout beschreiben

30 Vorüberlegungen 1. Welchen Inhalt soll die Seite haben? 2. Wie soll die Struktur der Seite aufgebaut sein? 3. Welche Layoutobjekte brauche ich dafür?

31 Schritt 1: Inhalt Beispiel: Vortrag über Digitalkameras inhaltliche Schwerpunkte überlegen grobe Gliederung aufstellen Recherche

32 Schritt 2: Struktur Layout-Skizze oftmals als Ausgangspunkt geeignet Bestandteile der Seite auflisten, wie Kopfoder Fußzeile, Navigationsbereich, Textbereich, Spalten usw. inhaltliche Gliederung auf Seiten aufteilen Bezeichner für Navigationsleiste wählen, evtl. Unterpunkte

33 Schritt 3: Layoutobjekte alles, was einzeln beschrieben werden soll, muss ansprechbar sein muss also einen Namen haben Festlegen, was Layoutobjekte sein müssen Namen dafür überlegen

34 Vorgehensweise 1. neue leere HTML-Datei erzeugen 2. erforderliche Layout-Objekte in die HTML-Datei einfügen, dabei auf korrekte Bezeichnung achten 3. Inhalte der ersten Seite einfügen 4. neue leere CSS-Datei erzeugen 5. für jedes Layout-Objekt ein Stylesheet in die CSS-Datei einfügen und beschreiben 6. CSS-Datei in die HTML-Datei einbinden

35 Gestaltungsbeispiel Wie ist die Seite aufgebaut? Aus welchen Elementen besteht sie? Wie erfolgt die Navigation? Wie wird der Inhalt dargestellt? Wie ist die Trennung zwischen Inhalt und Form realisiert?

36 Wie ist die Seite aufgebaut? Navigationsbereich Seiteninhalt gestalterische Elemente

37 Aus welchen Elementen besteht sie? div-bereich id=navigation div-bereich id=lineo div-bereiche id=navi div-bereich id=text div-bereich id=pic div-bereich id=lineu

38 Aus welchen Elementen besteht sie? Navigationsbereich, der Bildbereiche enthält sowohl Navigationsbereich insgesamt als auch jeder Bildbereich kann angesprochen werden Inhaltsbereiche unabhängig voneinander, können nicht als Ganzes beschrieben werden (wäre das nötig?)

39 Wie erfolgt die Navigation? Navigationsbereich eher untypisch für Hypertextanwendung sequentielles Anzeigen der Seiten Benutzer kann nicht direkt eine bestimmte Seite anschauen Ausnahme: Home-Link, der zur Startseite verweist

40 Wie wird der Inhalt dargestellt? Verwendung von Bildern auch für Inhalt (Text) problematisch, da dieser Text nicht gestaltet und auch nicht automatisch ausgewertet werden kann Bilder können für Neugestaltung nur ausgetauscht oder neu positioniert werden Inhalte müssen dem Gestalter bekannt und zugänglich sein bei Text-Darstellung kann unformatierter Text erzeugt werden, der dann mit CSS gestaltet wird

41 Trennung Inhalt - Form prinzipiell gegeben (siehe Problem der Bilder) Änderung des Inhaltes erfordert keine Änderung des Designs und umgekehrt Änderung der Form bzw. Beschreibung der Form möglich ohne detaillierte Kenntnis des Inhaltes

42 Verknüpfung Inhalt-Form Darstellung am Beispiel Darstellung ohne Stylesheet Standardannahmen werden verwendet für <div>-bereiche: nur Beginn neuer Zeile für neuen Bereich schrittweises Hinzufügen von Design- Vorgaben

43 Darstellung ohne CSS

44

45 CSS für Gestaltungsbeispiel #navigation: Positionierung des Navigationsbereiches auf der Seite Box-Modell: relative Positionierung, Abstand von oben, von linkem Rand, Breite und Höhe angeben #navigation { position: relative; left: 360px; top: 30px; width: 250px; height: 160px; }

46 mit Positionierung der Navigation

47 CSS für Gestaltungsbeispiel Darstellung der einzelnen Navigationselemente nebeneinander.navi { display:inline; }

48 Darstellung nebeneinander

49 CSS für Gestaltungsbeispiel Positionieren der div-bereiche für die Linien #lineu { position: absolute; left: 50px; top: 550px; } #lineo { position: absolute; left: 50px; top: 115px; }

50 Linien positionieren

51 CSS für Gestaltungsbeispiel Text formatieren mit Schriftart, -farbe, position #text { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-style: normal; font-weight: normal; font-variant: normal; position: absolute; left: 130px; top: 150px; }

52 Text formatiert

53 CSS für Gestaltungsbeispiel Bildbereich positionieren #pic { position: absolute; left: 50px; top: 200px; }

54 Bild positioniert

55 Vorteil von CSS alle Designinformationen in einer CSS- Datei einfach austauschbar z.b. Darstellung der Navigation am unteren statt am oberen Rand #navigation { position: relative; left: 360px; top: 550px; width: 250px; height: 160px; }

56 Beispiel: geänderte CSS-Datei

57 Schriftgebung font: Zusammenfassung aller font-bezogenen Tags (shorthand) font-family: Bestimmt die Schriftart font-size: Bestimmt die Schriftgröße font-style: Bestimmt den Schriftstil (kursiv...) font-weight: Bestimmt die Schriftdicke letter-spacing: Verändert den Abstand der Buchstaben zueinander line-height: Bestimmt die Höhe der Zeile text-align: Bestimmmt die Ausrichtung des Textes text-decoration: Unterstreicht den Text text-indent: Rückt die erste Zeile eines Abschnitts ein

58 Farben/Hintergrund color: Bestimmt die Vordergrundfarbe background: Fasst alle Hintergrund-Deklarationen zusammen (shorthand) background-color: Weist dem Hintergrund eine Farbe zu background-image: Weist dem Hintergrund ein Bild zu background-attachment: Legt fest ob das Hintergrundbild mitscrollt oder nicht background-repeat: Legt fest ob und wie das Hintergrundbild wiederholt wird background-position: Positioniert das Hintergrundbild

59 Ausrichtung/Layout/Darstellung clear: verhindert float display: Verändert die Darstellungsart eines Elements (nicht anzeigen, inline oder block...) float: Lässt Elemente aneinander vorbeifließen height: Definiert die Höhe eines Elements width: Definiert die Breite eines Elements margin: Verändert den Abstand des Elements zur Umgebung (shorthand) margin-bottom: Verändert den Abstand des Elements nach unten margin-left: Verändert den Abstand des Elements nach links

60 Ausrichtung/Layout/Darstellung margin-right: Verändert den Abstand des Elements nach rechts margin-top: Veränderte den Abstand des Elements nach oben padding: Abstand des Inhalts zum Rand (shorthand) padding-bottom: Abstand des Inhalts zum unteren Rand padding-right: Abstand des Inhalts zum rechten Rand padding-top: Abstand des Inhalts zum oberen Rand padding-left: Abstand des Inhalts zum linken Rand

61 Links/Auflistungen a:link: Bestimmt die Formatierung eines normalen Links a:visited: Bestimmt die Formatierung eines besuchten Links a:active: Bestimmt die Formatierung eines aktiven Links a:hover: Bestimmt die Formatierung eines gehoverten Links (Maus ist grade drüber) list-style-image: Weist den Listenpunkten ein Bild zu list-style-type: Bestimmt das Aussehen der Listenpunkte

62 Rahmen border: Fasst alle Rahmen-Tags zusammen (shorthand) border-bottom: Bestimmt Aussehen, Dicke und Farbe des unteren Rands border-bottom-width: Bestimmt die Breite des unteren Rands border-color: Farbe des Rahmens border-left: Bestimmt Aussehen, Dicke und Farbe des linken Rands border-left-width: Bestimmt die Breite des linken Rands

63 Rahmen border-right: Bestimmt Aussehen, Dicke und Farbe des rechten Rands border-right-width: Bestimmt die Breite des rechten Rands border-style: Bestimmt die Darstellungsweise des Rahmens border-top: Bestimmt Aussehen, Dicke und Farbe des oberen Rands border-top-width: Bestimmt die Breite des oberen Rands border-width: Bestimmt die Rahmenbreite für alle Rahmen