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

Kirsten Schulte

CSSCascading Style Sheets

SeminarInternetpublishing

BOK Veranstaltung des ZfS

Webdesign :: Überblick

Überblick1. 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

11.04.23

(c) Kirsten Schulte, [email protected]

2

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.

11.04.23


3

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.

11.04.23


4


AUFGABE

1. Öffnen Sie die Datei Goethe.htm und definieren Sie in einem der Absätze folgendes Stylesheet: <p style=“font-size:12px; color:red“>

2. Nehmen Sie dann die gleiche Definition im <head>- Bereich der Datei vor:<style type=“text/css“>

</style>

11.04.23


5


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 <head>-Bereich in alle Gedichte-Seiten ein:<link href=“styles.css“ rel=“stylesheet“ type=“text/css“>.

11.04.23


6

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.

11.04.23


7

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

11.04.23


8


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.

11.04.23


9


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.

11.04.23


10

Documents

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