Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- internet:css:start [2025/01/06 20:29] – angelegt Martin Pabst
+++ internet:css:start [2025/01/14 12:20] (aktuell) – [Beispiel 1: verschiedenfarbige Überschriften] Martin Pabst
@@ Zeile 1: / Zeile 1: @@
 ====== Gestalten der HTML-Elemente mit CSS (Cascading Style Sheets) ======
-<WRAP center round info 80%>
+<WRAP center round info 100%>
 Es wird Zeit, dass wir lernen, wie wir HTML-Elemente farbig gestalten können, wie wir Rahmen setzen und Hintergrundfarben verändern können! \\ \\
 Alle HTML-Elemente sind Objekte, deren Attributwerte (Textfarbe, Hintergrundfarbe, Rahmenstärke, Außenabstand, ...) wir ändern können. Früher geschah dies direkt im HTML-Quelltext, z.B. so:
@@ Zeile 11: / Zeile 11: @@
 ===== Beispiel 1: verschiedenfarbige Überschriften =====
-{{ :internet:css:pasted:20250106-202947.png?700 }}
+{{ :internet:css:pasted:20250106-202947.png?800 }}
+<WRAP center round tip 80%>
+**Aufgabe 1:** \\
+{{ :internet:css:pasted:20250106-203210.png}}
+Die obige Webseite besteht aus zwei Dateien: der Datei ''index.html'', die die HTML-Elemente enthält sowie der Datei ''test.css'' mit den Stilen. \\
+Schau' Dir zusammen mit Deiner Banknachbarin/Deinem Banknachbarn die beiden Dateien genau an und beantworte folgende Fragen:
+  * Woher weiß der Browser, dass er zusätzlich zur Datei ''index.html'' auch die Datei ''test.css'' vom Server holen muss?
+  * Wie werden die beiden Stile ''roteUeberschrift'' und ''blaueUeberschrift'' in der css-Datei definiert?
+  * Wie wird in der HTML-Datei kenntlich gemacht, welche Überschrift in welchem Stil dargestellt werden soll?
+</WRAP>
+<WRAP center round tip 80%>
+**Aufgabe 2:** \\
+Lege eine html-Datei und eine css-Datei in Deinem Projekt an, recherchiere die Antworten zu folgenden Fragen im Netz und probiere gleich aus!
+  * Mit welcher CSS-Eigenschaft kann man die Schriftgröße verändern?
+  * Wie kann man die Hintergrundfarbe eines div-Elements verändern?
+  * Wie kann man die Hintergrundfarbe der gesamten Webseite verändern?
+  * Wie kann man erreichen, dass um ein div-Element ein Rahmen gezogen wird? Wie lässt sich dessen Farbe ändern?
+  * Wie kann man den Abstand zweier div-Elemente verändern?
+</WRAP>
+===== Wichtige CSS-Eigenschaften =====
+<WRAP center round info 80%>
+  * ''color: red'' (Schriftfarbe)
+  * ''background-color: blue'' (Hintergrundfarbe)
+</WRAP>