Introduction to Technologies Stylesheets mit CSS
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
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
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 (...
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
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
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
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
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">
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>
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">
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
Elementtyp-Selektor ein oder mehrere HTML-Tags als Selektoren h1, h2, h3{ font-size : 18px; text-transform : capitalize; }
Universeller Selektor - CSS kein bestimmter Selektor angegeben, Eigenschaft bezieht sich auf alle Elemente der Seite * { color : red; }
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
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)
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
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; }
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
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
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
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
Selektoren für Nachfahren #navlist li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray; }
Selektoren Selektoren für direkt über- und untergeordnete Elemente div > p{ font-weight: bild; } Selektoren für benachbarte Elemente h1 + h2 { margin-top: 11px; }
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)
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
Box-Modell Grundlage für Seitenaufbau Breite und Höhe von Elementen Innenabstände in alle vier Richtungen (entspricht Auffüllen im Dreamweaver)
Box-Modell Außenabstände für alle vier Richtungen (entspricht Rand im Dreamweaver)
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
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?
Schritt 1: Inhalt Beispiel: Vortrag über Digitalkameras inhaltliche Schwerpunkte überlegen grobe Gliederung aufstellen Recherche
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
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
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
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?
Wie ist die Seite aufgebaut? Navigationsbereich Seiteninhalt gestalterische Elemente
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
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?)
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
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
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
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
Darstellung ohne CSS
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; }
mit Positionierung der Navigation
CSS für Gestaltungsbeispiel Darstellung der einzelnen Navigationselemente nebeneinander.navi { display:inline; }
Darstellung nebeneinander
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; }
Linien positionieren
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; }
Text formatiert
CSS für Gestaltungsbeispiel Bildbereich positionieren #pic { position: absolute; left: 50px; top: 200px; }
Bild positioniert
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; }
Beispiel: geänderte CSS-Datei
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
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
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
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
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
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
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