Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Cascading Style Sheets

Ähnliche Präsentationen


Präsentation zum Thema: "Cascading Style Sheets"—  Präsentation transkript:

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

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

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

4 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

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

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

7 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>

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

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

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

11 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%;

12 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;}

13 Layout mit CSS

14 Layout mit CSS

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


Herunterladen ppt "Cascading Style Sheets"