Ein einfaches Beispiel
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Nach einem Überblick darüber, was CSS sind, warum es sie gibt und warum sie eine wichtige Arbeitstechnik für Webdesigner sind, fehlt nur noch der Beweis. Die folgende Abbildung zeigt ein Beispiel einer kleinen Webseite, für deren Programmierung wir uns ein bisschen mehr Mühe gegeben haben als einfach nur HTML einzusetzen.
Abbildung: Beispiel-Webseite mit eingebetteten CSS-Stilen.
Im Folgenden finden Sie den HTML-Code, der mit den eingebetteten Stylesheets diese Seite erzeugt. Lassen Sie sich nicht von der Komplexität des Codes einschüchtern – am Ende von Blick hinter die Kulissen werden Sie sich einen Großteil davon selbstständig erschließen können. Die folgende Datei heißt beispiel_1-4.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ein dreispaltiges Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: teal;
margin: 20px;
padding: 0;
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 0 15px 0;
padding:
color: #888;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0 0 5px 0;
padding: 0;
font-size: 1.1em;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.1em;
margin: 0 0 16px 0;
padding: 0;
}
.content>p {
margin: 0;
}
.content>p+p {
text-indent: 30px;
}
a {
color: teal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: 600;
}
a:link {
color: teal;
}
a:visited {
color: teal;
}
a:hover {
background-color: #bbb;
}
/*Alle Inhaltsboxen gehören zur content-Klasse*/
.content {
position: relative;
width: auto;
min-width: 120px;
margin: 0 210px 20px 170px;
border: 1px solid black;
background-color: white;
padding: 10px;
z-index: 3;
}
#navleft {
position: absolute;
width: 128px;
top: 20px;
left: 20px;
font-size: 0.9em;
border: 1px dashed black;
background-color: white;
padding: 10px;
z-index: 2;
}
#navleft ul {
list-style: none;
margin: 0;
padding: 0;
}
#navright {
position: absolute;
width: 168px;
top: 20px;
right: 20px;
border: 1px dashed black;
background-color: #eee;
padding: 10px;
z-index: 1;
}
</style>
</head>
<body>
<div class="content">
<h1>Erste Orientierung</h1>
<p>Man kann Cascading Stylesheets (CSS) unter verschiedenen Blickwinkeln betrachten. Ich sehe sie vor allem als Korrektur eines elementaren Fehlers, der bereits in den frühen 90er Jahren begangen wurde, als Tim Berners-Lee und die anderen Pioniere gerade erst loslegten mit dem Web.</p>
<p>Was war dieser Fehler?</p>
</div>
<div class="content">
<h2>CSS im Kontext</h2>
<p>Zu der Zeit, als das Web mit dem Aufkommen des ersten grafischen Browsers (dem Vorgänger des Netscape Navigator) immer beliebter wurde, wurde den Designern allmählich bewusst, dass sie vor einem Problem standen: Die Methoden, mit der die in HTML-Dateien gespeicherten Daten im Browser dargestellt wurden, unterlagen nicht ihrer Kontrolle. Es waren vielmehr die Benutzer, die in ihrem Browser einstellen konnten, wie sie eine Webseite aussehen lassen wollten.</p>
</div>
<div class="content">
<h2>Inhalte hinzufügen</h2>
<p>Wie Sie hier sehen können, kann man unter den Spalten auch ganz einfach weitere Inhalte in zentrierten Boxen anfügen.</p>
</div>
<div id="navleft">
<h2>Einige Links</h2>
<ul>
<li><a href="http://www.danshafer.com/" title="Dan Shafer Homepage">Dan Shafer</a></li>
<li><a href="http://www.rachelandrew.co.uk/" title="Rachel Andrew Homepage"> Rachel Andrew</a></li>
<li><a href="http://www.sitepoint.com/" title="SitePoint Home Base">SitePoint Home</a></li>
<li><a href="http://www.sitepoint.com/forums" title="SitePoint Discussion Forums"> SitePoint Forums</a></li>
<li><a href="http://www.mozilla.org/firefox" title="Firefox at The Mozilla Foundation"> Firefox</a></li>
<li><a href="http://www.microsoft.com/ie" title="Internet Explorer at Microsoft's Site"> Internet Explorer</a>
<li><a href="http://www.opera.com/" title="Opera Home Page">Opera</a></li>
<li><a href="http://www.apple.com/safari" title="Safari on Apple's Web Site">Safari</a></li>
</ul>
</div>
<div id="navright">
<h2>Warum sind CSS besser?</h2>
<p>Mit Stylesheets können Sie den Inhalt von seiner Darstellung trennen, was dazu führt, dass Webseiten einfacher zu pflegen sind und besser als Vorlagen für weitere Seiten benutzt werden können. Kleinere Dateien, weniger Platzhalter-Grafiken und schnellere Ladezeiten sind zusätzliche Vorteile von CSS.</p>
</div>
</body>
</html>| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg