ANWENDUNGSSOFTWARE CSS

Transkript

1 ANWENDUNGSSOFTWARE CSS

2 NAVIGATION Bilder zur Navigation: als Anker für Verweise benutzen Text sollte nicht Bestandteil des Bildes sein (Bild als Hintergrund), siehe z-index Navigationslisten mit <ul>, <li> und <a> - Tags

3 POSITIONIERUNG VON ELEMENTEN <div>-tags zur Gruppierung von Elementen float: legt fest, ob nachfolgende Elemente diesen Bereich umfließen, mögliche Angaben: left: Element steht links und wird rechts umflossen right: Element steht rechts und wird links umflossen none: kein Umfluss (Standard) Achtung: für CSS2 muss bei Verwendung von float auch width für dieses Element definiert sein clear: bricht einen Umfluss ab (left, right, both. none) width: Breite des Elementes margin: Außenrand, Außenabstand, kann für jede Seite einzeln angegeben werden

4 POSITIONIERUNG VON ELEMENTEN Block-Elemente nehmen verfügbare Breite ein, außer wenn mit width eine geringere Breite zugewiesen wurde ist noch Platz daneben vorhanden, kann mit float weitere Mindestbreite kann angegeben werden mit minwidth: Breite an längstem Text orientieren: margin-left: 22 em;, dadurch Anpassung der Breite bei Änderung der Schriftgröße Breite und Höhe bei Bildern kann auch in em angegeben werden

5 POSITIONIERUNG VON ELEMENTEN Beispiel: rechts floatende Navigation /* Folgende Modifikationen sind am vorherigen Beispiel vorgenommen: */ ul#navigation { font-size: 0.91em; float: right; width: 22em; margin: 0 0 1em 1em; padding: 0; border: 1px dashed silver; } body { min-width: 20em; /* Mindestbreite (der Navigation) verhindert Anzeigefehler in modernen Browsern */ }

6 NÜTZLICHE EIGENSCHAFTEN display: gibt an, wie Elemente angezeigt werden sollen block: Element erzeugt neue Zeile inline: wird im laufenden Textfluss angezeigt list-item: wie block, aber mit Aufzählungszeichen none: nicht anzeigen

7 NÜTZLICHE EIGENSCHAFTEN: FONT 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

8 NÜTZLICHE EIGENSCHAFTEN: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

9 NÜTZLICHE EIGENSCHAFTEN: 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

10 NÜTZLICHE EIGENSCHAFTEN: 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

11 ELEMENTE ÜBERLAPPEN Standardmäßig Darstellung nebeneinander oder übereinander (vertikal) Stapeln: Angabe nötig, welches Element durch ein anderes verdeckt wird Position in der Stapelfolge heißt z-index Ohne z-index gilt Reihenfolge des HTML-Codes Je größer der z-index, desto weiter oben in der Stapelfolge ist das Element { position: absolute; z-index: 2; }

12 TEXT AUF BILD Text um Bilder fließen lassen mit float Text auf einem Bild muss einen höheren Wert für den z-index bekommen, eventuell mit Hintergrundgraphik für Text zur besseren Lesbarkeit Ausschneiden <div>-bereich passender Größe erzeugen, Eigenschaft overflow: hidden; zuweisen und Bild so in <div>-bereich positionieren, dass gewünschter Bildteil gezeigt wird

13 RESPONSIVE WEBDESIGN Webdesign für das optimale Betrachtungserlebnis: einfaches Lesen und Navigieren mit minimaler Größenänderung und wenig Scrollen auf einer großen Bandbreite von Geräten (vom Desktop-Rechner bis Handy) Muster für multi-device-patterns Responsive_web_design Grid-Framework, vorbereitete css Styles