Unterschiede

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

--- start:info:08-09_diff:selfhtml-css 01.11.2008 15:06
+++ — aktuell
@@ Zeile 1: / Zeile 1: @@
-====== Sinn und Zweck von Stylesheets ======
-{{ http://upload.wikimedia.org/wikipedia/commons/thumb/8/86/CSS.svg/200px-CSS.svg.png|CSS}}**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((<h1>)) 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**((''background-color'')), einem eigenen **Hintergrundbild**((''background-image'')) (Wallpaper) oder mit diversen Rahmen((''border'')) 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 ======
-  - **Kopiere** folgende Datei in dein "09if"-Verzeichnis und entpacke ihn: [[http://home.arcor.de/kag-alkan/meineHP.zip|meineHP.zip]].\\ \\ **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 blau setzen; benutze hierzu die Eigenschaft **"''background-color''"**. Gib sie in die geschweifte Klammer gefolgt von einem **Doppelpunkt ("'':''")**, dem Wert für die **helle blaue 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.
-  - Es bestehen schon 3 fertige Layouts für diese Seite. Sie werden im ''<head>''-Bewreich integriert:\\ <code html><link rel="STYLESHEET" type="text/css" href="css/layoutX.css" /></code>\\ Ersetze das **"X"** durch "1", "2" oder "3" und schau dir die Ergebnisse an. Wo sind die *.css-Dateien hierzu?
-  - Für den Unterricht am Montag: [[http://home.arcor.de/kag-alkan/css_selektoren.zip|css_selektoren.zip]]