 |
|||
| HSG |
|
CSS - Cascading Style Sheets -hat mit Stil, Kaskadierung und Folien (sheets) zu tun. Anweisungen, die die Darstellung von HTML-Elementen beeinflussen, werden in CSS Stile genannt.
Es gibt drei Arten, CSS zu benutzen:
1. Direkte Beeinflussung eine HTML-Elements (inline)
b1.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Informatik - CSS - Einbindung 1</title>
<meta name="author" content="mk" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p style="font-size:xx-large;color:red;">Hallo Welt!</p>
<h4>Validierung, lokal:</h4>
<p><a href="http://linux1/w3c-markup-validator/check?uri=referer">
<img src="../../valid-xhtml10.png" alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>
</body>
</html>
2. StyleSheets zentral im Header (embedded)
b2.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Informatik - CSS - Einbindung 1</title>
<meta name="author" content="mk" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body { color:#ffff00; background-color:#000000; }
h1 { color:#ff0000; font-size:350%; text-align:center; }
-->
</style>
</head>
<body>
<h1>Hallo Welt!</h1>
<h4>Validierung, im Internet bei http://validator.w3.org :</h4>
<p><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>
</body>
</html>
3. StyleSheets in separaten CSS-Dateien (extern)
b3.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Informatik - CSS - Einbindung 3</title>
<meta name="author" content="mk" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="muster.css" />
</head>
<body>
<h1>Hallo Welt!</h1>
<h4>Validierung, im Internet bei http://validator.w3.org :</h4>
<p><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0!" height="31" width="88" /></a>
</p>
</body>
</html>
Die dazugehörige CSS-Datei muster.css sieht so aus:
body { color:#ffff00; background-color:#000000; }
h1 { color:#ff0000; font-size:350%; text-align:center; }