Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3
Cascading Style Sheets
description
Transcript of Cascading Style Sheets
![Page 1: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/1.jpg)
Cascading Style Sheets
Ein Kurzvortrag über CSS
Von Justin Doods & Andreas Krings
![Page 2: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/2.jpg)
Inhalt
Kurzvorstellung Geschichte Formatierung mit CSS Layout mit CSS Weiterführende URLs
![Page 3: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/3.jpg)
Kurzvorstellung
Deklarative Stylesheet Sprache Trennung von Inhalt und Design Ergänzt HTML und XML Verschiedene Ausgabemedien:
Handheld, Print, Beamer Formatierung und Projektion
![Page 4: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/4.jpg)
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
![Page 5: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/5.jpg)
Formatierung mit CSS
Hierarchische Struktur (Syntax) Einbinden von CSS Beispiele
![Page 6: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/6.jpg)
Formatierung mit CSS
Syntax
Selektor {
Attribut-A: Wert-A;
Attribut-B: Wert-B1 Wert-B2;
}
![Page 7: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/7.jpg)
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>
![Page 8: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/8.jpg)
Formatierung mit CSS
Einbinden im Quelltext direkt vor Ort:
<Element style="Attribut-A: Wert-A; Attribut-B: Wert-B" />
![Page 9: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/9.jpg)
Formatierung mit CSS
body {
background-color: #00FF00;
color: #FF0000;
}
h1 {
color: #0000FF;
}
![Page 10: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/10.jpg)
Formatierung mit CSS
div {
margin-top 1px;
padding-right: 1pt;
border-bottom: 1.2 em;
border-left: 1px;
height: 50%;
width: 100cm;
}
![Page 11: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/11.jpg)
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%;
}
![Page 12: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/12.jpg)
Formatierung mit CSSa { 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;}
![Page 13: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/13.jpg)
Layout mit CSS
![Page 14: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/14.jpg)
Layout mit CSS
![Page 15: Cascading Style Sheets](https://reader036.fdocuments.net/reader036/viewer/2022083006/56813c0c550346895da579ae/html5/thumbnails/15.jpg)
Weiterführende URLs
w3c.org/Style/CSS/ de.selfhtml.org csszengarden.com smashingmagazine.com/category/css drweb.de