Cascading Style Sheets - PowerPoint PPT Presentation

cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets PowerPoint Presentation
Download Presentation
Cascading Style Sheets

play fullscreen
1 / 15
Cascading Style Sheets
127 Views
Download Presentation
abie
Download Presentation

Cascading Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

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

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

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

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

  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