Übung Klebezettel. background, font, color, transform, width, height, margin, cursor, border. Web. Fach: BW1. Klasse: (Donnerstag) Datum:

Transkript

1 1 2 Fach: Klasse: Datum: Web BW (Donnerstag) Agenda Übung Klebezettel - background, font, etc. 3 4 Unser Ziel mit CSS: Die Gestaltung eines einfachen Textes in einen Klebezettel Übung Klebezettel background, font, color, transform, width, height, margin, cursor, border Ohne CSS Mit CSS

2 5 6 zettel.html Daniel Wierbicki layout.css Einbindung von CSS: Hier über link-element (Empfohlene Methode) Daniel Wierbicki Ein Selektor: Hier ein Typselektor (Name eines Elements). Bezieht sich auf alles, was sich im body-element befindet (Ganze Webseite). Browser 7 8 Daniel Wierbicki Hintergrundfarbe Alternativ: background-color: rgb(255,204,102); Daniel Wierbicki Hintergrundbild " " nötig bei Dateinamen mit Leerzeichen. Beispiel: background-image: url("po st.png");

3 9 10 Daniel Wierbicki Hintergrund-Wiederholung Auswahl von Werten: repeat Horizontal & vertikal wdh. (Standard) repeat-x Horizontal wdh. repeat-y Vertikal wdh. no-repeat Nicht wdh. Daniel Wierbicki Schriftstil Tipp (Meinung): Sinnvoll nur italic Daniel Wierbicki div-elemente umfassen Bereiche, die mit CSS formatiert werden können Machen Absatz Komplette Breite ohne CSS Daniel Wierbicki Transformieren (Drehung im Uhrzeigersinn) Alternativ: transform: rotate(-7deg);

4 13 14 Daniel Wierbicki border: 1px solid #0000FF; Rahmen (Kurzschreibweise) Dasselbe wie: border-width: 1px; border-style: solid; border-color: #0000FF; Daniel Wierbicki Rahmen (Hier border-style) Auswahl von Werten: inset = Innerer Schatten outset = Äußerer Schatten Daniel Wierbicki Breite und Höhe vom div-element Daniel Wierbicki Außenabstand von oben

5 17 18 Daniel Wierbicki Außenabstand von links Daniel Wierbicki Beispiele für websichere Schriften Arial, Tahoma, Verdana, Times New Roman, Georgia, Comic Sans MS, Courier New Schriftart " " empfohlen (nicht nötig) bei Schriftnamen mit Leerzeichen Daniel Wierbicki cursor: wait; Mauszeiger Auswahl von Werten: default not-allowed move text wait pointer Max. Bildgröße: 128 x 128px. Wenn Willkommen größer, beim dann Kurs wird zu Cursor Webdesign nicht mit angzeigt! CSS! Daniel Wierbicki Mauszeiger (Hier Bild) " " nötig bei Dateinamen mit Leerzeichen. Beispiel: cursor: url("ha nd.png"), auto; Mauszeiger, der bei Problemen angezeigt wird (z.b. wenn die Bilddatei nicht gefunden wird).

6 21 22 Daniel Wierbicki /**/ Kommentar Nicht interpretiert Daniel Wierbicki /**/ Schriftgröße Daniel Wierbicki /**/ Schriftgröße Daniel Wierbicki /**/ Schriftvariante Tipp (Meinung): Sinnvoll nur small-caps

7 25 26 Daniel Wierbicki /**/ Textfarbe Alternativ: color: rgb(255,85,85); <span> Webdesign </span> mit <span> CSS </span>! <li><span> CSS </span> Layout</li> Daniel Wierbicki span-elemente umfassen Bereiche, die mit CSS formatiert werden können Machen keinen Absatz /**/ <span>webdesign</span> mit <span>css</span>! <li><span>css</span> Layout</li> Daniel Wierbicki Strichstärke Auswahl von Werten: /**/ <span>webdesign</span> mit <span>css</span>! <li><span>css</span> Layout</li> Daniel Wierbicki /**/ normal Normal bold Fett Dünn bis fett span { font-weight: bold; span { font-weight: bold; color: #FF0000; Textfarbe Alternativ: color: rgb(255,0,0);

8 29 30 <span>webdesign</span> mit <span>css</span>! <li><span>css</span> Layout</li> Daniel Wierbicki /**/ span { font-weight: bold; color: #FF0000; Hintergrundfarbe Alternativ: background-color: rgb(255,204,102); <span>webdesign</span> mit <span>css</span>! <li><span>css</span> Layout</li> Daniel Wierbicki line-height: 25px; Zeilenhöhe /**/ span { font-weight: bold; color: #FF0000; Kurzschreibweisen background, font Kurzschreibweisen Originalschreibweise: Kurzschreibweise: background: #FFCC66 url("post.png") no-repeat; Originalschreibweise: font-weight: bold; line-height: 25px; 6. Reihenfolge gleichgültig! Vollständigkeit gleichgültig ABER Wert für background-size muss nach Wert für backgroundposition und mit / getrennt werden (noch nicht behandelt)! Reihenfolge wichtig! Minimum: font-size, font-family Kurzschreibweise font: italic small-caps bold 13px / 25px "Comic Sans MS ";