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; }
Formatierung mit CSS 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 Einbinden im Quelltext direkt vor Ort: <Element style="Attribut-A: Wert-A; Attribut-B: Wert-B" />
Formatierung mit CSS 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;}
Layout mit CSS
Layout mit CSS
Weiterführende URLs w3c.org/Style/CSS/ de.selfhtml.org csszengarden.com smashingmagazine.com/category/css drweb.de