Aufgaben für Cit zu CSS
28.01.13
Speisekarte oder ähnliches
Eingangsseite
Drei Unterseiten: z.B. Vorspeise, Hauptspeise, Dessert
Die Seiten sind untereinander verlinkt
Die Seiten beinhalten ein Hintergrundbild
CSS Dateien und Bilder in eigenen Unterordnern
Bei Funpic hochgeladen
Mindestens ein Bild ist ein Link
Was braucht jede Seite???
—-
E-Mail Link
Schaltfläche → Hallo
-
Achtung: Ihr dürft nur Bilder verwenden, die frei verfügbar sind und bei denen es ausdrücklich erlaubt ist, dass sie von euch veröffentlicht werden dürfen!!!
Funpic Links
-
-
-
-
-
-
-
-
Seli N.:
-
-
-
Noah S.:
-
-
-
-
Florian U.:
-
-
1. Halbjahr
Block 1
Erstelle einen Ornder uebung_datum
Erstelle eine Seite, die deinen Namen trägt: z.B. sab.html
Erstelle zwei css Dateien, die deinen Namen tragen: sab_1.css und sab_2.css
Gib in beiden css Dateien eine andere Hintergrundfarbe für den body an.
Verlinke beide miteinander und zwar so, dass der Nutzer das Stylsheet aussuchen kann
Erstelle eine Speisekarte incl. Bilder und formatiere sie mit Hilfe der Stylesheets auf 2 unterschiedliche Arten.
Die Speisekarte muss vier verschiedene Gerichte enthalten. Jedes Gericht enthält einen kurzen beschreibenden Text.
Block 2
Block 3
Schreibe folgende Formatierungen in dein Heft und sieh dir die Beispiele bei http://www.css4you.de an:
In den Lösungen taucht stellenweise die Maßeinheit em auf. Diese Einheit bezieht sich auf die Schriftgröße des Buchstabens M. Genaueres spielt für uns keine Rolle. Es besagt nur, ändert der User beim Betrachten die Schriftgröße, ändern sich mit em angegebene Werte mit. Somit bleibt das Schriftbild erhalten.
Schrift
Schriftgröße: Lösung
alle div Tags 50% größer als der normale text: div {font-size:150%;}Ich bin 50% größer.
Schriftstil (kursiv, normal): Lösung
alle p Tags kursiv: p {font-style:italic;} Ich bin kursiv.
Schriftgewicht (normal, fett, fetter, …): Lösung
alle span Inline-Tags fett: span {font-weight:bold;} bzw. span {font-weight:lighter;}Ich bin fett. Ich bin leichter.
Text
Zeichenabstand: Lösung
alle Zeichen im span Inline-Tags größer/kleiner: span {letter-spacing: 1em;} bzw. span {letter-spacing: -0.2em;}; Ich habe einen großen Abstand. ich einen kleinen Abstand.
Zeilenhöhe: Lösung
2,5 fache Zeilenhöhe: div {line-height: 2.5;}:
Hier ist
der Abstand
normal.
Hier ist der
Zeilenabstand
größer.
Hier ist der
Zeilenabstand
wieder normal.
Horizontale Ausrichtung: Lösung
alle p Tags mittig: p {text-align:center;}. Mögliche Werte sind auch noch left und center.
mittig
links
rechts
Textdekoration: Lösung
alle span Tags unterstrichen: span {text-decoration:underline;}. Mögliche Werte sind auch noch
overline,line-through und blink. Ich bin unterstrichen habe einen Überstrich bin durchgestrichen blinke
Texteinrückung: Lösung
Die erste Zeile aller p Tags wird eingerückt.: p {text-indent: 3em;}.
In diesem Absatz wir die erste Zeile
eingerückt. Das erhöht unter Umständen
die Lesbarkeit des Textes.
Rahmen
es reicht, wenn du es für einen kompletten Rahmen notierst und weißt, dass oben, rechts, unten und links separat angesprochen werden können. Lösung
alle span Tags umrahmt: span {border:5px solid #0000ff;}.Der erste Wert steht für die Rahmenstärke, der zweite für die Art und der dritte für die Farbe.ich bin umrahmt.
Außenränder
alles Lösung
alle span Tags umrahmt: span {margin:40px 60px 80px 100px;}.Der erste Wert steht für oben, der zweite rechts, der dritte für unten und der vierte für links.
Innenränder
alles Lösung
alle span Tags umrahmt: span {padding:40px;}.
ich bin vom Rand entfernt.
Farben
alles Lösung
alle span Tags mit einer blauen Schriftfarbe und einer Hintergrundfarbe: span {color:blue;background-color:#FFFFCC}.
Jetzt wird es bunt, zumindest teilweise.
Hintergrund
Farbe
Bild incl. repeat: Lösung
alle p Tags mit einer roten Hintergrundfarbe und einem sich nicht wiederholdendem Hintergrundbild: p {background-color: red; background-image:url(/tuts/bilder/datenbank/cdversion2a.png);background-repeat:no-repeat;}.
Mit css gibt es
sehr sehr viele Möglichkeiten
Text zu gestalten. Am Anfang muss
man viel üben, aber
das zahlt sich
auf Dauer aus.
Startseite > Programmieren > CSS > Aufgaben Cit