Cascading Style Sheets 1

• Sprache zum Formatieren von HTML-Elementen• Vom W3-Konsortium vorgeschlagen• Einfach, aber mächtigere als Formatierungsmöglichkeiten als

HTML

• In HTML ursprünglich nur Inhalt angegeben, für Layout Browser verantwortlich

• Durch font-Tag usw. diese Idee unterwandert Trennung Inhalt und Layout kaum möglich CSS

• Aktuell: Version 2.0

Was sind Cascading Style Sheets (CSS)?

Cascading Style Sheets 2

• Layout verschiedener Seiten auf einmal kontrollierbar• Einheitliches Erscheinungsbild für gesamtes Dokument oder

Projekt• Speicherplatzeinsparung, geringere Übertragungszeiten• größere Formatierungsmöglichkeiten als HTML• Barrierefrei ins Web

Motivation

Cascading Style Sheets 3

• Viele Styles gehen stufenförmig in neuen ein

• Styles in externer Datei (am besten)• Definition der Styles in Textdatei mit Endung .css

• In HTML-Seite auf Style verweisen:

<link rel=„stylesheet“ type=„text/css“ href=„dateiname.css“>

• Style im head der HTML-Seite<style type=„text/css“> ... </style>

Konzept(I)

Cascading Style Sheets 4

• Style in HTML-Element• Inhalt und Präsentation gemischt viele Vorteile von css verloren

<p style=„color=red;“>text</p>

• Mehrere oder auch alternative Styles möglich<link rel=„stylesheet“ type=„text/css“

href=„dateiname.css“ title=„titel“>

<link rel=„alternate stylesheet“ type=„text/css“ href=„dateiname.css“ title=„titel“>

Konzept(II)

Cascading Style Sheets 5

• Priorität:• Interpretation des Browsers

• Reihenfolge im head der HTML-Datei

• Style am HTML-Element

• Angefangen von der niedrigsten Priorität werden Styles in neues virtuelles Style übernommen

• Bei gleichen Attributen überschreibt Style mit höherer Priorität das niedrigerer Priorität

Konzept(III)

Cascading Style Sheets 6

• Selector {property: value;}• selector: zu formatierender Tag• property: zu änderndes Attribut• value: festgelegter Wert

body{color: yellow;}

• Universalselektor: *{...}

• Typselector:p{...}

• Class-Selectorh1.blau{...} oder .blau <h1 class=„blau“>text </h1>

Syntax (I)

Cascading Style Sheets 7

• Pseudoklassen: selector: pseudo-class{property: value;}• Nur zentral definierbar

• Beispiel:

a:link normaler Link

a:visited bereits besuchter Link

a:active aktiver Link

a:hover Link bei Mouseberührung

• Unterschiedliche Links in einem Dokument mit class-Selector

• Kommentar/* Kommentar */

Syntax(II)

Cascading Style Sheets 8

• Erben von übergeordnetem Element<div><span>text</span></div>

• Erben von allgemeineren Elementem.wichtig{...} erbt von em

p{...} und em{...} definiert -> p em{...} erbt davon

• Gruppierung von Elementenh1, h2{font-family:arial;}

h1{font-size:30px;}

h2{background:red; font-size:25px;}

Vererbung / Gruppierung

Cascading Style Sheets 9

Boxmodell

Cascading Style Sheets 10

• Browser setzen CSS unterschiedlich um:• Netscape 4.x und IE4.x: nur teilweise

• Ab Netscape 6.x, IE 5.x und Opera 5.x: fast vollständig

• Moderne Browser setzen also Standard weitestgehend um man sollte CSS verwenden

Zusammenfassung

Cascading Style Sheets 11

Quellen

• Mintert, St.: Ordnung muss sein. iX, 3/2003, S. 50: Web-Publishing oder http://www.heise.de/ix/artikel/2003/03/050/

• Mintert, St.: Formationsflug. iX, 4/2003, S. 138: Web-Publishing oder http://www.heise.de/ix/artikel/2003/04/138/

• http://www.w3.org/Style/CSS/learning• http://www.style-sheets.de/• http://www.css4you.pehlgrim.de/• http://www.w3schools.com/css/default.asp• http://selfhtml.teamone.de/