Informatik 7 (G9)

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Gestalten der HTML-Elemente mit CSS (Cascading Style Sheets) ======
<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:
<code html>
<h1 style="color: blue; margin-top: 10px">Neue Überschrift</h1>
</code>
Das wurde mit der Zeit sehr unübersichtlich, vor allem war es aber sehr umständlich, wenn man z.B. alle 15 Überschriften einer Webseite auf die selbe Art gestalten wollte. Daher wurde eine Möglichkeit geschaffen, Stile (//engl.: styles//) unabhängig von den HTML-Seiten in extra Dateien ("css-Dateien") zu verwalten und von den HTML-Elementen aus nur darauf zu verweisen.  \\ 

</WRAP>

===== Beispiel 1: verschiedenfarbige Überschriften =====
{{ :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>