Unterschiede

Hier werden die Unterschiede zwischen der gewählten und der aktuellen Version gezeigt.

--- start:info:08-09_diff:selfhtml-css 29.10.2008 07:51
+++ — aktuell
@@ Zeile 1: / Zeile 1: @@
-====== Sinn und Zweck von Stylesheets ======
-**Stylesheets** sind eine unmittelbare **Ergänzung zu (X)HTML**. Es handelt sich dabei um eine Sprache zur **Definition von Formateigenschaften einzelner (X)HTML-Elemente**. Mit Hilfe von Stylesheets kannst du beispielsweise bestimmen, dass Überschriften 1. Ordnung einen großen Schriftgrad aufweisen, in der Schriftart Helvetica, aber nicht fett erscheinen und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden Absatz versehen werden. Angaben ((''<h1 style="h1{ font-size : larger; font-weight : normal; font-family : Arial, Helvetica, sans-serif; margin-bottom : 1.75cm; }"> Überschrift</h1>'')) dieser Art sind mit reinem HTML nicht möglich.\\
-Das ist aber nur der Anfang. Stylesheets bieten noch **viel mehr Möglichkeiten**. So kannst du (X)HTML-Elemente - egal ob Textabsätze, Listen, Tabellenzellen oder Formulare - mit einer eigenen **Hintergrundfarbe**, einem eigenen **Hintergrundbild** (Wallpaper) oder mit diversen Rahmen ausstatten. Du kannst Elemente im Anzeigefenster des WWW-Browsers **positionieren**. Für Print-Layouts stehen Möglichkeiten zur **Definition von Seiten-Layout und Textflusskontrolle** bereit. Für die **akustische Wiedergabe** von Web-Seiten gibt es ein ganzes Arsenal an Eigenschaften, um die künstliche Sprachausgabe zu steuern.\\
-Einige **CSS-Eigenschaften** sind auch in der Lage, das Anzeigefenster des Browsers zu beeinflussen, so etwa das **Aussehen des Cursors**. Spezielle Filter schließlich, die allerdings rein Microsoft-spezifisch sind, erlauben **Grafik-Effekte** bei normalen Texten, die aus Grafikprogrammen wie Photoshop bekannt sind.\\
-Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, **zentrale Formate** zu definieren. So kannst du beispielsweise im Kopf einer (X)HTML-Datei **zentrale Definitionen** zum Aussehen eines Elements notieren. **Alle Elemente** der entsprechenden (X)HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert sind. Das **spart Kodierarbeit** und macht die (X)HTML-Dateien kleiner.\\
-Du kannst deine **Stylesheet-Definitionen sogar in separaten Dateien** notieren. Die Stylesheet-Dateien kannst du in beliebig vielen (X)HTML-Dateien referenzieren. Auf diese Weise kannst du für **große Projekte einheitliche Layouts** entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei kannst du dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken.\\
-Stylesheets unterstützen also die professionelle Gestaltung beim Web-Design und helfen beim [[http://de.wikipedia.org/wiki/Corporate_Design|Corporate Design]] für große Projekte oder für unternehmensspezifische Layouts.\\
-(Quelle: [[http://de.selfhtml.org/css/intro.htm#sinn_und_zweck|SelfHTML]] )
-====== Fragen ======
-  - Wofür steht das Kürzel "CSS"? ((http://www.w3.org/Style/CSS/\\ http://www.html-world.de/program/css_1.php))
-  - Was ist CSS? ((Oben oder in einem der Links nachlesen.))
-  - Zähle die drei verschiedenen Möglichkeiten, wie und wo man "Styles" definieren kann, auf. ((http://de.selfhtml.org/css/formate/einbinden.htm))
-  - Was ist der Vorteil einer CSS-Definition in einer separaten Datei? ((Oben oder in einem der Links nachlesen.))
-====== CSS-Formate und CSS-Eigenschaften ======
-Stylesheets bestehen aus **Formaten**, die du für bestimmte **(X)HTML-Elemente** oder für eine bestimmte Auswahl von (X)HTML-Elementen definierst. Zum Auswählen einer bestimmten Gruppe von (X)HTML-Elementen, für die ein Format gelten soll, gibt es in CSS die Syntax der so genannten **Selektoren**. CSS-Formate lassen sich entweder
-    * in einem zentralen Style-Bereich,
-    * in einer externen CSS-Datei oder
-    * direkt im einleitenden Tag eines (X)HTML-Elements definieren.
-CSS-Formate bestehen aus **einer oder mehreren Eigenschaften und Wertzuweisungen** an diese Eigenschaften. So kannst du beispielsweise ein Format für Überschriften 3. Ordnung definieren, bei dem du für Eigenschaften wie Schriftgröße, Schriftfarbe und Absatz-Abstand entsprechende Werte bestimmst.\\
-====== CSS-Begriffe ======
-Die nachfolgende **Regel** setzt sich aus dem **Selektor**, der die gewünschten Elemente selektiert (auswählt) und einer **Eigenschaft** sowie dem ihr zugewiesenen **Wert** zusammen:
-<code css>
-Selektor { Eigenschaft:Wert; }
-</code>
-Die Kombination aus Eigenschaft und Wert wird als **Deklaration** bezeichnet.\\
-(Quelle: [[http://de.selfhtml.org/css/intro.htm#formate_eigenschaften|SelfHTML]])
-====== Fragen ======
-  - Im **Marktplatzordner** ist ein neues Verzeichnis **"02_CSS"** angelegt. **Kopiere** diesen in dein "09if"-Verzeichnis.\\ \\ **Achtung! Das einzige, was Du verändern darfst, sind die Styles!!!**
-  - Öffne nun die **"index.html"**. Kannst du eine **Struktur** erkennen?
-  - Erstelle im **''<head>''**-Teil einen **''<style>''**-Bereich
-    * Gib den selector **"''body''"** gefolgt von einer öffnenden **("''{''")** und schließenden **("''}''")** geschweiften Klammer an.
-    * Wir wollen die **Hintergrundfarbe** auf ein helles gelb setzen; benutze hierzu die Eigenschaft **"''background-color''"**. Gib sie in die geschweifte Klammer gefolgt von einem **Doppelpunkt ("'':''")**, dem Wert für die **helle gelbe Farbe** und einem **Semikolon ("'';''")** ein.
-    * Ändere nun auch die **Schriftfarbe**. Dazu benutzt man die Eigenschaft **"''color''"**. Diese musst du wieder in die geschweifte Klammern nach dem **Selektor für ''<body>''** 'reinschreiben.
-    * Schau dir nun das Ergebnis im Browser an. Was fällt dir auf? Ist alles auf der Seite nun formatiert?
-  - Wir wollen nun auch die **Verweise (''<a>'')** formatieren. Ändere die Verweisfarbe auf **dunkelgrün**. **Welchen Selektor** musst du nun benutzen?
-  - Für besonders Flinke: Bei [[http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus|SelfHTML]] findest du eine Beschreibung zu **Pseudoformaten**. **Probiere** verschiedene Formatierungen aus. Ändere dann die Formatierung bei **"'':hover''"** so, dass der **Hintergrund** einen **hellen roten** Ton hat.