Cascading Style Sheets

Cascading Style Sheets Ein Kurzvortrag über CSS Von Justin Doods & Andreas Krings

Inhalt • Kurzvorstellung • Geschichte • Formatierung mit CSS • Layout mit CSS • Weiterführende URLs

Kurzvorstellung • Deklarative Stylesheet Sprache • Trennung von Inhalt und Design • Ergänzt HTML und XML • Verschiedene Ausgabemedien:Handheld, Print, Beamer • Formatierung und Projektion

Geschichte • 1995 – Erste Entwürfe für CSS • 1996 – W3C übernimmt CSS 1 • 1998 – W3C stellt CSS 2 vor • 2001 – CSS 2.1 wird entwickelt • 2003 – CSS 2.1 wird vorgestellt • CSS 3 unter Entwicklung

Formatierung mit CSS • Hierarchische Struktur (Syntax) • Einbinden von CSS • Beispiele

Formatierung mit CSS Syntax Selektor { Attribut-A: Wert-A; Attribut-B: Wert-B1 Wert-B2; }

Einbinden per Datei styles.css Einbinden der Datei im QT <link rel="stylesheet" href="styles.css"> Einbinden im Quelltext <head> … <style type="text/css"> … </style> … </head> Formatierung mit CSS

Formatierung mit CSS Einbinden im Quelltext direkt vor Ort: <Element style="Attribut-A: Wert-A; Attribut-B: Wert-B" />

body { background-color: #00FF00; color: #FF0000; } h1 { color: #0000FF; } Formatierung mit CSS

div { margin-top 1px; padding-right: 1pt; border-bottom: 1.2 em; border-left: 1px; height: 50%; width: 100cm; } Formatierung mit CSS

<ul id="listenmenue"> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul> CSS: #listenmenue { list-style-type: none; } #listenmenue a { display: block; width: 99%; } Formatierung mit CSS

a { font-weight: bold; text-decoration: none;} a:link {color:blue;} a:visited {color:silver;} a:focus {color:red; text-decoration:underline; } a:hover {color:green; font-style: italic;} a:active {color:lime; padding-left: 20px;} Formatierung mit CSS

Layout mit CSS

Weiterführende URLs • w3c.org/Style/CSS/ • de.selfhtml.org • csszengarden.com • smashingmagazine.com/category/css • drweb.de

Cascading Style Sheets