1 / 15

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

abie
Download Presentation

Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related