Forgot your password?
New user?
Document Actions
CSS-schulung
HLW St. Poelten
Allgemeines zu XHTML
- Seit Januar 2000 liegt XHTML 1.0 als Empfehlung des W3-Konsortiums vor
- XHTML ist XML-gerechtes HTML
Vorteile von XHTML?
- Trennung von Struktur und Darstellung -> Einfacher zu administrieren
- suchmaschinenfreundlich, barrierefei
- XHTML kann als Dateninsel innerhalb anderer Sprachen eingebunden werden
- XHTML ist syntaktisch hundertprozentig kompatibel zu wichtigen XML-Standardsprachen wie zB: SVG
Unterschiede: HTML vs. XHTML
- Kleinschreibung: <body>Inhaltsmodell</body>
- auch leere Elemente müssen geschlossen werden: <img src="logo.gif" alt="logo" />
- XML-Deklaration und Zeichenkodierung: <?xml version="1.0" encoding="ISO-8859-1" ?>
- Dokumententypdeklaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
CSS: Entwurfskonzepte und Vorteile
- Auf- und Abwärtskompatibilität:
CSS 1 ist im Wesentlichen eine Teilmenge von CSS 2 - Verbesserung der Wartbarkeit
- CSS vereinfacht das Schreiben von Webseiten
Einbindung von CSS in ein XHTML-Dokument
- Einbindung per style-Attribut
<body>
<p style="text-align: center; font-weight: bold;">Erster Absatz</p>
<p>Zweiter Absatz</p>
</body>
- Einbindung per style-Element
<head>
<style type="text/css">
p { text-align: center; font-weight: bold;}
</style>
</head> - Einbindung per link-Element
<head>
<link rel="stylesheet" media="screen"title="Standardstylesheet" href="/stylesheets/default.css" type="text/css"/>
</head>
CSS: Syntax und Vokabular
p { margin: 0; }
h1 {
color: #889399;
background-color: transparent;
margin: 2em 0 1em 0;
}
Klassen- und ID-Selektor
#bereich { border: 1px black solid; }
.block { margin: 0; }
<div id="bereich">
<p class="block">Klassendefinition</p>
</div>
CSS-Boxmodell
#content
{border: 10px #00f solid; padding: 10px; margin:10px;}
<div id="content">content</div>
Vererbung und Initialwerte
- für fast jede Eigenschaft gibt es einen so genannten Initialwert, der vom Browser angenommen wird
- Da CSS für hierarchische Auszeichnungssprachen konzipiert wurde, bei denen jedes Element außer dem Wurzelelement innerhalb eines anderen liegt, können Eigenschaften entlang dieser Verschachtelung vererbt werden.