was sind cascading style sheets (css)?
DESCRIPTION
Was sind Cascading Style Sheets (CSS)?. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/1.jpg)
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)?
![Page 2: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/2.jpg)
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
![Page 3: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/3.jpg)
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)
![Page 4: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/4.jpg)
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)
![Page 5: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/5.jpg)
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)
![Page 6: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/6.jpg)
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)
![Page 7: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/7.jpg)
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)
![Page 8: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/8.jpg)
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
![Page 9: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/9.jpg)
Cascading Style Sheets 9
Boxmodell
![Page 10: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/10.jpg)
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
![Page 11: Was sind Cascading Style Sheets (CSS)?](https://reader036.vdokument.com/reader036/viewer/2022082404/56814e3f550346895dbbac07/html5/thumbnails/11.jpg)
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/