Benutzer-Werkzeuge

Webseiten-Werkzeuge


internet:css:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
internet:css:start [2025/01/06 20:30] – [Beispiel 1: verschiedenfarbige Überschriften] Martin Pabstinternet: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) ====== ====== 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! \\ \\  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: 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 13: Zeile 13:
 {{ :internet:css:pasted:20250106-202947.png?800 }} {{ :internet:css:pasted:20250106-202947.png?800 }}
 <WRAP center round tip 80%> <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>
 +
 +<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>
 +
  
internet/css/start.1736195438.txt.gz · Zuletzt geändert: 2025/01/06 20:30 von Martin Pabst

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki