CSS Cascading Style Sheets Seminar Internetpublishing BOK Veranstaltung des ZfS
Webdesign :: Überblick 08.04.2017 Webdesign :: Überblick Überblick CSS Grundlagen Definition und Reichweite von Stylesheets Definition von Stylesheets: 3 Ebenen HTML-Tags mit besonderer Bedeutung für Stylesheets Stylesheet-Typen Wie kann man eine externe Stylesheet-Datei erzeugen Überblick Seminar: was machen wir (c) Kirsten Schulte, kirsten.schulte@gmail.com
Webdesign :: CSS :: Grundlagen 08.04.2017 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, kirsten.schulte@gmail.com
Webdesign :: CSS :: Definition von Stylesheets 08.04.2017 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 <head>-Bereich). Externes Stylesheet: Einbindung einer externen Stylesheet-Datei im <head>-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 <head>-Bereich hat Vorrang vor der Definition in einer externen Stylesheet-Datei. (c) Kirsten Schulte, kirsten.schulte@gmail.com
Webdesign :: CSS :: Definition von Stylesheets 08.04.2017 Webdesign :: CSS :: Definition von Stylesheets AUFGABE Öffnen Sie die Datei Goethe.htm und definieren Sie in einem der Absätze folgendes Stylesheet: <p style=“font-size:12px; color:red“> Nehmen Sie dann die gleiche Definition im <head>- Bereich der Datei vor: <style type=“text/css“> <!--- p { font-size: 12 px; color: red;} --> </style> (c) Kirsten Schulte, kirsten.schulte@gmail.com
Webdesign :: CSS :: Definition von Stylesheets 08.04.2017 Webdesign :: CSS :: Definition von Stylesheets AUFGABE 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 <head>-Bereich in alle Gedichte-Seiten ein: <link href=“styles.css“ rel=“stylesheet“ type=“text/css“> . (c) Kirsten Schulte, kirsten.schulte@gmail.com
Webdesign :: CSS :: <div> und <span> 08.04.2017 Webdesign :: CSS :: <div> und <span> Tags mit besonderer Bedeutung für Stylesheets: <div> und <span> Formatierung von Abschnitten: das <div>-Tag Das <div>-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 <div>-Tag verhält sich wie ein Blockelement, d.h. es erzeugt einen Zeilenumbruch. Formatierung von beliebigen Text-Bereichen: das <span>-Tag Das <span>-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 <span>-Tags dürfen nur Inline-Elemente liegen. (c) Kirsten Schulte, kirsten.schulte@gmail.com
Webdesign :: CSS :: Stylesheet Typen 08.04.2017 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, kirsten.schulte@gmail.com
Webdesign :: CSS :: Stylesheet Typen 08.04.2017 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 <h1 class=“grün“> grüner Text </h1> 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 <div id=“Kopfzeile“>Kopfzeilentext</div> angewendet. Dieses ist die einfachste Art, eine Formatierung zuzuweisen. (c) Kirsten Schulte, kirsten.schulte@gmail.com
Webdesign :: CSS :: Stylesheet Typen 08.04.2017 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 5.0.0.102 (Shareware),Download unter: http://download.chip.eu/de/download_de_919202.html Dreamweaver vereinfacht das Erstellen von Stylesheets und Stylesheet-Dateien. Eine Stylesheet-Datei wird an der Endung .css erkannt. (c) Kirsten Schulte, kirsten.schulte@gmail.com