Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu02:einfuehrung [2025/02/28 07:20] – 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 53: / Zeile 53: @@
 }
 </code>
+----
 ===== Kommentare für CSS-Code verwenden =====
 Kommentare werden mit /∗ ∗/ gesetzt. Alles was dazwischen steht (auch Zeilenumbrüche), wird vom Webbrowser ignoriert.
-*Beispiel*
+**Beispiel**
 <code>
 /* Erzeugt einen Kreis */
@@ Zeile 70: / Zeile 72: @@
 Sinnvoll sind solche Kommentare auch, wenn Sie Ihre Stylesheets in einzelne Bereiche aufteilen, um sich damit schneller im CSS-Code orientieren zu können.
-*Beispiel*
+**Beispiel**
 <code>
 /*------------------------------------*/
@@ Zeile 85: / Zeile 87: @@
 ...
 </code>
+----
+===== Formatierung des Quellcodes =====
+Die Formatierung von CSS-Code wird grundsätzlich im Team oder vom Entwicklungsleiter festgelegt, damit auch der CSS-Code einheitlich formatiert wird und sich andere Entwickler (z.B. wenn Sie in den Ferien weilen) schnell in Ihrem Code zurecht finden.
+**Schlechtes Beispiel**
+<code>
+/* In Ordnung, aber sehr unübersichtlich */
+h2,h3{font-family:"Courier";color:blue;text-align:center;}
+</code>
+Eine allgemeine Empfehlung hierzu wäre, für jede Deklaration eine extra Zeile zu verwenden und diese auch einzurücken. Die schliessende Klammer sollte in einer eigenen Zeile stehen. Wesentlich besser zu lesen als die zuvor gezeigte Formatierung des CSS-Codes wäre somit:
+**Beispiel**
+<code>
+/* Viel besser lesbar */
+h2, h3 {
+   font-family: "Courier";
+   color: blue;
+   text-align: center;
+}
+</code>
+Bei CSS-Regeln mit nur einer Deklaration hingegen könnten Sie alles in eine Zeile notieren:
+<code>
+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.