Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Kirsten Schulte CSS Cascading Style Sheets Seminar Internetpublishing BOK Veranstaltung des ZfS.

Ähnliche Präsentationen


Präsentation zum Thema: "Kirsten Schulte CSS Cascading Style Sheets Seminar Internetpublishing BOK Veranstaltung des ZfS."—  Präsentation transkript:

1 Kirsten Schulte CSS Cascading Style Sheets Seminar Internetpublishing BOK Veranstaltung des ZfS

2 Webdesign :: Überblick Überblick 1. CSS Grundlagen 2. Definition und Reichweite von Stylesheets 3. Definition von Stylesheets: 3 Ebenen 4. HTML-Tags mit besonderer Bedeutung für Stylesheets 5. Stylesheet-Typen 6. Wie kann man eine externe Stylesheet-Datei erzeugen (c) Kirsten Schulte, 2

3 Webdesign :: CSS :: Grundlagen Was sind Stylesheets, wozu benötigt man sie? CSS (Cascading Style Sheets) ist eine Sprache zur Definition von Formatvorlagen für HTML-Befehle. Mit ihrer Hilfe kann Format und Inhalt getrennt werden, die Definition und Änderung von Formatvorlagen erfolgt zentral. Vorteile: Änderungen am Format sind einfach, zeitsparend, weniger fehleranfällig. Der HTML-Code wird übersichtlicher und schlanker. In CSS können Formatierungen durchgeführt werden, die in reinem HTML nicht existieren. Nachteile: Stylesheets werden von Browsern unterschiedlich unterstützt (c) Kirsten Schulte, 3

4 Webdesign :: CSS :: Definition von Stylesheets Definition und Reichweite von Stylesheets Es gibt 3 Ebenen auf denen Stylesheets definiert werden können: Inline Style: Formatierung innerhalb eines Elements (HTML-Tag). Eingebetteter Style: Formatierung für eine HTML-Datei (im - Bereich). Externes Stylesheet: Einbindung einer externen Stylesheet-Datei im -Bereich. Rangfolge der Stylesheets Grundsätzlich gilt: die zuletzt angegebene Formatierung überschreibt die vorherige Definition eines CSS-Befehls. D.h., die Definition im Tag hat Vorrang vor der Definition im - Bereich hat Vorrang vor der Definition in einer externen Stylesheet-Datei (c) Kirsten Schulte, 4

5 Webdesign :: CSS :: Definition von Stylesheets AUFGABE 1. Öffnen Sie die Datei Goethe.htm und definieren Sie in einem der Absätze folgendes Stylesheet: 2. Nehmen Sie dann die gleiche Definition im - Bereich der Datei vor: (c) Kirsten Schulte, 5

6 Webdesign :: CSS :: Definition von Stylesheets AUFGABE 3. Erstellen Sie eine eigene externe CSS-Datei. Öffnen Sie dazu den Editor, und speichern Sie die Datei unter dem Namen styles.css im Ordner Website Gedichte. Schreiben Sie den folgenden Befehl in die Datei: p { font-size: 12 px; color: green;} Kommentare werden in /* Kommentar */ gefasst. Binden Sie die Datei mit dem folgenden Befehl im - Bereich in alle Gedichte-Seiten ein: (c) Kirsten Schulte, 6

7 Webdesign :: CSS :: und Tags mit besonderer Bedeutung für Stylesheets: und Formatierung von Abschnitten: das -Tag Das -Tag hat von sich aus keine Eigenschaften, es dient lediglich als Container für mehrere HTML-Elemente, denen so die gleichen Stylesheet- Eigenschaften zugewiesen werden können. Das -Tag verhält sich wie ein Blockelement, d.h. es erzeugt einen Zeilenumbruch. Formatierung von beliebigen Text-Bereichen: das -Tag Das -Tag ist von sich aus formlos, es dient ausschließlich dazu, beliebige Bereiche zu umfassen, ohne einen Zeilenumbruch zu erzeugen. Es verhält sich also wie ein Inline-Element. Innerhalb eines -Tags dürfen nur Inline-Elemente liegen (c) Kirsten Schulte, 7

8 Webdesign :: CSS :: Stylesheet Typen Stylesheet Typen Ein StyleSheet besteht immer aus zwei Teilen: einem Selektor, der beschreibt, was formatiert werden soll und einer Deklaration, die beschreibt, wie die Formatierung erfolgen soll. Prinzip: Selektor {Eigenschaft:Wert; Eigenschaft:Wert;…} Beispiel p {color:red; margin-left:5px;} Selektor Eigenschaft: Wert Eigenschaft: Wert (c) Kirsten Schulte, 8

9 Webdesign :: CSS :: Stylesheet Typen Es gibt verschiedene Arten von Selektoren Der Typ-Selektor Einem HTML-Tag wird eine Stylesheet-Angabe zugewiesen. Beispiel.: p {color: black;} Der Klassen-Selektor Hiermit formatieren Sie keine Tags, sondern Klassen, die dann gezielt einzelnen Elementen zugewiesen werden. Beispiel:.grün { color:green;} wird durch grüner Text angewendet Der ID-Selektor Mit dem ID-Selektor kann nur für ein einziges Element pro Website formatiert werden. Beispiel: #Kopfzeile {font-size:16pt; color:red;} wird durch Kopfzeilentext angewendet (c) Kirsten Schulte, 9

10 Webdesign :: CSS :: Stylesheet Typen Wie kann man eine externe CSS-Datei erzeugen? Man kann sie per Hand in einem einfachen Editor erstellen. Erstellt man die Datei mit Hilfe eines CSS-Editors, z.B. TopStyle Lite, wird man bei der Eingabe unterstützt. Version (Shareware),Download unter: Dreamweaver vereinfacht das Erstellen von Stylesheets und Stylesheet-Dateien. Eine Stylesheet-Datei wird an der Endung.css erkannt (c) Kirsten Schulte, 10


Herunterladen ppt "Kirsten Schulte CSS Cascading Style Sheets Seminar Internetpublishing BOK Veranstaltung des ZfS."

Ähnliche Präsentationen


Google-Anzeigen