cascading style sheets
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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 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;}
Layout mit CSS
Layout mit CSS
Weiterführende URLs
w3c.org/Style/CSS/ de.selfhtml.org csszengarden.com smashingmagazine.com/category/css drweb.de