Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu02:einfuehrung [2025/02/28 07:23] – kdemirci
+++ modul:m287:learningunits:lu02:einfuehrung [2025/02/28 07:55] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
-====== LU01a - Einführung in Cascading Stylesheets (CSS) ======
+====== LU02a - Einführung in Cascading Stylesheets (CSS) ======
 ===== Basistechnologien einer einfachen Webseite =====
@@ Zeile 117: / Zeile 117: @@
 h1 { color: blue; }
 </code>
+---
+=====  Einbindung von CSS in HTML =====
+Es gibt mehrere Möglichkeiten, CSS-Stilanweisungen mit einem HTML-Dokument zu verknüpfen. Genau genommen stehen Ihnen drei Möglichkeiten zur Verfügung:
+. **internes Stylesheet (Internal Style Sheet)**: Sie geben die Stilanweisung gesammelt intern im Kopfbereich des HTML-Dokuments zwischen dem style-Element an.
+<code>
+<!DOCTYPE html>
+<html>
+  <head>
+  <style>
+    h1 {color: blue; }
+    p {color: red; }
+  </style>
+  </head>
+  <body>
+    <h1>Dies ist eine Überschrift</h1>
+    <p>Dies ist ein Absatz.</p>
+  </body>
+</html>
+</code>
+. **externes Stylesheet (External Style Sheet)**: Sie verwenden eine externe Stylesheet-Datei und verknüpfen diese mit dem HTML-Dokument.
+<code>
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>Dies ist eine Überschrift</h1>
+    <p>Dies ist ein Absatz</p>
+  </body>
+</html>
+</code>
+. **Inline-Style**: Sie notieren die CSS-Stilangaben direkt im HTML-Element.
+<code>
+<h1 style="color:blue;">Dies ist eine Überschrift</h1>
+</code>
+===== Medienspezifische Stylesheets für die Ausgabe =====
+Schon bei CSS Level 2 gab es medienspezifische Stylesheets für bestimmte Ausgabegeräte. Mit dem media-Attribut im link-Element werden die Stylesheets für ein bestimmtes Ausgabemedium festlegt. Dabei wird ein Stylesheet nur auf bestimmte Ausgabenmedien angewendet.
+Dazu werden separate Stylesheets für die unterschiedliche Ausgabemedien, z. B. für den Bildschirm (media="screen") oder für den Drucker (media="print") zur Verfügung gestellt.
+Das Thema Medien-Typen (seit CSS2) wird später im Semester unter dem Thema Responsive Webdesign vertieft.