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

Präsentation zum Thema: "Cascading Style Sheets1 Sprache zum Formatieren von HTML-Elementen Vom W3-Konsortium vorgeschlagen Einfach, aber mächtigere als Formatierungsmöglichkeiten."—  Präsentation transkript:

1 Cascading Style Sheets1 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)?

2 Cascading Style Sheets2 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

3 Cascading Style Sheets3 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: Style im head der HTML-Seite... Konzept(I)

4 Cascading Style Sheets4 Style in HTML-Element Inhalt und Präsentation gemischt  viele Vorteile von css verloren text Mehrere oder auch alternative Styles möglich Konzept(II)

5 Cascading Style Sheets5 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)

6 Cascading Style Sheets6 Selector {property: value;} selector: zu formatierender Tag property: zu änderndes Attribut value: festgelegter Wert body{color: yellow;} Universalselektor: *{...} Typselector: p{...} Class-Selector h1.blau{...} oder.blau text Syntax (I)

7 Cascading Style Sheets7 Pseudoklassen: selector: pseudo-class{property: value;} Nur zentral definierbar Beispiel: a:linknormaler Link a:visitedbereits besuchter Link a:active aktiver Link a:hoverLink bei Mouseberührung Unterschiedliche Links in einem Dokument mit class-Selector Kommentar /* Kommentar */ Syntax(II)

8 Cascading Style Sheets8 Erben von übergeordnetem Element text Erben von allgemeineren Element em.wichtig{...} erbt von em p{...} und em{...} definiert -> p em{...} erbt davon Gruppierung von Elementen h1, h2{font-family:arial;} h1{font-size:30px;} h2{background:red; font-size:25px;} Vererbung / Gruppierung

9 Cascading Style Sheets9 Boxmodell

10 Cascading Style Sheets10 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

11 Cascading Style Sheets11 Quellen Mintert, St.: Ordnung muss sein. iX, 3/2003, S. 50: Web- Publishing oder http://www.heise.de/ix/artikel/2003/03/050/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.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/