Christof Lutz, 2005 Cascading Style Sheets CSS Einführung und Grundkonzepte.

Christof Lutz, 2005

Cascading Style SheetsCSS

Einführung und Grundkonzepte

Christof Lutz, 2005

Was sind Stylesheets?

Stylesheets…• wurden als Ergänzung zu HTML entwickelt.• stellen eine Sprache zur Formatierung einzelner

HTML-Elemente dar.• wurden aus der Idee geboren – Inhalt und

Design bei Webseiten voneinander zu trennen.• bieten die Möglichkeit Formatangaben zentral zu

definieren womit der Stil im gesamten HTML-Dokument einheitlich wird.

• werden, wie HTML, vom W3C verwaltet und weiterentwickelt

Christof Lutz, 2005


• Vorteile gegenüber herkömmlichem HTML:

– Vergrößerte Gestaltungsvielfalt– Trennung von Inhalt und Layout möglich– Zentrale Definition von Stilen schneller

Veränderbar– Keine „Tricks“ mit Tabellenlayouts mehr nötig– „Suchmaschinenfreundlicher“

Christof Lutz, 2005


• Neben den Cascading Style Sheets (CSS), die für HTML entwickelt wurden existieren noch weitere Stylesheetsprachen:– die „Document Style Semantics and

Specification Language" (DSSSL), wurde für SGML konzipiert

– "Extensible Stylesheet Language" (XSL), ist eine Entwicklung für XML

Christof Lutz, 2005

Historie

• CSS 1.0 existiert seit 1996 (1999 nochmals überarbeitet)– beinhaltete schon die meisten heute geläufigen

Styleangaben

• CSS 2.0 seit 1998– weitere Elemente hinzugefügt und vorhandene um

zusätzliche Eigenschaften erweitert

• CSS 2.1 und CSS 3.0 sind derzeit in Bearbeitung

Christof Lutz, 2005

Syntax von CSS

• Allgemein wird eine CSS-Eigenschaft nach folgendem Muster deklariert:

Selektor { Eigenschaft:Wert;}

• Der Selektor gibt an, welchem HTML-Tag die Formatierung zugewiesen wird

• Die Eigenschaft bestimmt, was im Tag geändert werden soll

• Der Wert gibt an, auf welchen Wert die Eigenschaft geändert wird

Christof Lutz, 2005

CSS in ein Dokument einbinden

Es gibt 3 Möglichkeiten ein Stylesheet in HTML einzubinden:

1. Innerhalb eines HTML-Elements

2. Zentral am Anfang einer HTML-Datei

3. In einer externen CSS-Datei

Christof Lutz, 2005

Einbinden innerhalb eines Tags

Wenn einzelne HTML-Elemente eine spezielle Formatierung erlangen sollen kann die Style-Angabe direkt im Tag angegeben werden:

<tag style="[element-spezifische Formate]">...</tag>

Beispiel:

<h1 style="font-family:'Century Schoolbook',serif; font-size:4em; ">Titel</h1>

Christof Lutz, 2005

Einbinden am Anfang der Datei

Um zentrale Formate innerhalb einer HTML-Datei zu definieren kann das Stylesheet am Anfang dieser Datei definiert werden:

Syntax:<html>

<head>

…

<style type="text/css">

[Stildefinitonen]

</style>

</head>

Beispiel:<html>

<head>

<style type="text/css">



</style>

</head>

Christof Lutz, 2005

Externe CSS-Dateien

Externe CSS-Dateien bieten den Vorteil, dass mehrere HTML-Dateien mit gleichen Stilvorlagen definiert werden können:Es wird eine Datei mit der Endung .css erstellt, in der die Styles definiert werden. Im HTML Dokument wird die CSS-Datei über ein Link-Tag eingebunden.

abc.css:h1 { font-size:26px; margin-bottom:18px; }

ul { color:blue; }

p,div { font-size:13px; }

…

HTML-Datei:<html>

<head>

…

<link rel="stylesheet" type="text/css“ href=“abc.css">

</head>

Christof Lutz, 2005

Unterschiedliche Medien

Eine weitere Stärke von CSS ist die Möglichkeit verschiedene Stildefinitionen für unterschiedliche Ausgabemedien festzulegen. Somit kann eine HTML-Datei für z.B. PC-Bildschirm, PDA, Drucker und andere Medien verwendet werden. Dazu werden verschieden CSS-Dateien eingebunden:

<html><head><link rel="stylesheet" media="screen" href="website.css"><link rel="stylesheet" media="print, embossed" href="druck.css"><link rel="stylesheet" media="aural" href="speaker.css"></head>…

Christof Lutz, 2005

KlassenIn CSS können Klassen definiert werden. Dadurch kann ein HTML-Element mit verschiedenen Eigenschaften belegt werden:

<style type="text/css" ></style>…<body><h1>H1 ohne Klasse</h1><h1 class="hinterlegt">H1 mit Klasse hinterlegt</h1> <h2 class="extra">H2 mit Klasse extra</h1>…

Christof Lutz, 2005

Die Elemente „div“ und „span“

• In HTML gibt es 2 Tags, welche keine eigene Formatierungseigenschaft besitzen. Die Elemente „div und „span“.

• Sie dienen dazu Bereiche zu definieren, die per CSS-Klassen mit Eigenschaften gefüllt werden.

• Das „div“-Element bildet einen Block, während „span“ als Inline-Element benutzt wird.

Christof Lutz, 2005

Die Elemente „div“ und „span“Beispiel:

<style type="text/css"></style>…<body><div class="p"> Hier wird ein Block gestaltet <span class="red"> mit roten Inline-Element

</span></div><div class="bold"> Ein weiterer Block <span class="big"> mit zusätzlicher Größe</span>

und wieder kleiner …</div>…

Christof Lutz, 2005

Individualformate

• So wie Formate für Klassen definieren können, mit dem Universalattribut class angesprochen werden, können auch Formate definiert werden, die über das Universalattribut id angesprochen werden.

• Der Bezeichner für ein id-Attribut sollte ein dokumentweit eindeutiger Name sein, da es sich um eine zentrale Formatdefinition handelt .

• In CSS werden die id-Namen allerdings nicht nur wie beispielsweise in JavaScript als dokumentweit eindeutige Bezeichner betrachtet, sondern auch als elementtypweit eindeutige Bezeichner.

Christof Lutz, 2005

Individualformate

• Id-Attribute werden in der Style-Definition mit # und einem Namen erstellt. In der HTML-Datei wird das id-Attribut mit id=„idname“ aufgerufen:

<style type="text/css"> #roterBereich { position:absolute; top:130px; left:30px; width:320px; border:4px solid #EE0000; }</style>…<body><div id="roterBereich">Der rote Bereich</div>

Christof Lutz, 2005

Kaskadierung

• Wird in einem HTML-Dokument kein Stylesheet definiert, so bestimmt der Browser die Darstellung der Elemente. Der Browser liefert ein „eigenes“ Stylesheet (Browser-Stylesheet).

• Aber auch der Benutzer des Browsers kann über die Browsereinstellung oder Zusatzprogramme festlegen, wie ein Dokument angezeigt werden soll (Benutzer-Stylesheet).

• Erst wenn im Programmcode ein Stil explizit festgelegt wird werden die „voreingestellten“ Styles überschrieben.

Christof Lutz, 2005

Kaskadierung

• Selbst innerhalb einer Styledefinition können widersprüchliche Anweisungen definiert sein.

• Der Browser folgt darum festgelegten Regeln, welche Anweisung befolgt werden soll.

• Diese Regeln sollten bekannt sein und beachtet werden, damit auch das gewünschte Ergebnis erscheint

• Auch kann aus dieser Eigenart ein Nutzen gezogen werden – in dem gezielt einzelne Anweisungen überschrieben werden.

Christof Lutz, 2005

Kaskadierung

• Existieren verschiedene Style-Angaben für ein Element wird die nach „Ursprung und Priorität“ ermittelt, welche Angabe verwendet wird. Reihenfolge in absteigender Wichtigkeit:

Benutzer-Stylesheet mit !important*Autoren-Stylesheet mit !important*Autoren-StylesheetBenutzer-StylesheetBrowser-Stylesheet

*!important: Selektor { Eigenschaft:Wert !important; }

Christof Lutz, 2005

Kaskadierung

• weitere Regeln:– #id-Elemente vor– Klassen vor– Elementen

– Direktformatierung vor – Stildefinition im Header vor– Stildefinition aus CSS-Datei

– zuletzt definierte Angabe überschreibt vorherige Angaben

Christof Lutz, 2005

Kaskadierung

Beispiele:CSS-Datei:h1 {color:red; font-size:48px;}

HTML-Datei:<style type="text/css">h1 {color:blue; font-size:24px;}</style>…<body><h1 style="color:green; font-size:36px; ">Titel</h1>

Hier wird der Titel in grün mit 36 Pixel ausgegeben

Christof Lutz, 2005

KaskadierungBeispiele (2):

<style type="text/css">a { color:blue; text-decoration:underline; } .xy { color:green; text-decoration:line-through; } li a { color:red; text-decoration:none; } </style>…<body><ul><li>Listenpunkt: <a class="xy" href="ziel.htm"> Verweis</a></li>

Die Klasse hat vor den anderen Eigenschaften Vorrang der Verweis wird grün und durchgestrichen.

Christof Lutz, 2005

Quellen:

• http://www.selfhtml.org• Daniel G. Shafer & Kevin Yank, Cascading

Stylesheets, dpunkt-Verlag, 1.Aufl.• Kai Laborenz, CSS-Praxis, Galileo Press, 2.Aufl.• HTML-World eBook, CSS, http://www.html-world.de

Christof Lutz, 2005 Cascading Style Sheets CSS Einführung und Grundkonzepte.

Documents

Transcript of Christof Lutz, 2005 Cascading Style Sheets CSS Einführung und Grundkonzepte.