Teil 2 Websitegestaltung mit CSS Cascading Style Sheets

Farben mit CSS zuweisen Vordergrundfarbe: • color: Farbangabe; • color: blue; • color: #0000 ff;

Aufgabe hierzu HTML-Dateien mit CSS erweitern: • Die Hauptüberschriften h 1 in Rot anzeigen • Jede h 2 in Blau • und jeder p in Gelb Kontrollieren Sie Ihre Ergebnisse!

Farben mit CSS zuweisen Hintergrundfarbe: • background-color: Farbangabe; • background-color: green; • background-color: #00 ff 00;

Lichtfarben https: //lehrerfortbildung-bw. de/st_digital/medienkompetenz/gestaltungfarbe/physik/mischung/additiv/addinter/index. html

Farben in CSS Farbdefinition über Farbnamen

Farben in CSS Farbdefinition über Hexadezimal Beispiel Farbe ROT: #FF 0000

Farben in CSS Farbdefinition über RGB Beispiel Farbe ROT: 255, 0, 0

Link zu den Farben http: //www. farbenwahl. com Klick auf „Links“ Color. Scheme. Designer

Schriften mit CSS gestalten Schriften sortiert - Schriftfamilien Arial Calibri Times New Roman Georgia Courier New Consolas Vivaldi Brush Script sans-serif monospace fantasy

Schriften mit CSS gestalten Schriftfamilien • Abhängig vom Betriebssystem • Welche Schriften sind installiert? am Schluss immer die Schriftfamilie angeben! Beispiel: font-family: Vivaldi, “Brush Script“, fantasy;

Schriften mit CSS gestalten Schriftgröße: font-size: 20 px;

Schriften S c h r i f t s t i l – normal oder kursiv • font-style: normal; • font-style: italic; S c h r i f t s t ä r k e – normal oder fett • font-weight: normal; • font-weight: bold; Kapitälchen • font-variant: small-caps; Schriftgröße • font-size: 20 px

Textformatierung Buchstabenabstand • letter-spacing: 0. 3 em; Wortabstand • word-spacing: 2 em; Zeilenhöhe • line-height: 2 em; Ratsam: relative Angabe – also in EM!

Textformatierung Text-Ausrichtung: • text-align: right; • text-align: left; • text-align: center; • text-align: justify; (Blocksatz) Text-Dekoration: • text-decoration: none; • text-decoration: underline; (unterstrichen) • text-decoration: overline; (überstrichen) • text-align: through; (durchgestrichen)

Maßeinheiten absolute Maßeinh eiten: Maßeinheiten: • • pt für point (1 Punkt 1/72 Inch entspricht) in für inch (1 Inch 2, 54 cm entspricht) mm für Millimeter cm für Zentimeter r eelative Maßangaben: • px für Pixel • em – steht für equal M und bezieht sich auf die Schriftgröße des Elements, sprich auf das große M dieser Schriftart • % für Prozent

Höhen von Elementen Jedem Element kann über CSS eine Höhe mitgegeben werden! h 1 {height: 150 px; }

Rahmen mit CSS anzeigen Rahmen benötigen 3 Angaben: Entsprechende CSS-Befehle: • Rahmenfarbe • border-color • Rahmenstärke • border-width • Art des Rahmens • border-style

Rahmen mit CSS anzeigen Möglichkeiten für die Rahmenart:

Box-Modell http: //www. nystromco. com/ET-710/other. asp? id=114

Box-Modell Folgendes wird benötigt: padding (= Innenabstand) https: //commons. wikimedia. org/wiki/File: CSS-Box-Modell. png border (= Rahmen) background-color (= Hintergrundfarbe) margin (= Außenabstand) background-image (= Hintergrundbild)

Box-Modell komplett Beispiel: p{ padding: 30 px; border: 1 px solid blue; backround-color: #141321; margin: 30 px; background-image: url(blaetter. jpg); }