Informatik - CSS - Grundlagen

CSS

Pfad: Startseite / Fächer / Informatik / CSS / Grundlagen

Autor: mk
15.03.2005 17:17
2408

Grundlagen

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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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, lokal bei http://linux1/w3c-markup-validator :</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>
<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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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, lokal bei http://linux1/w3c-markup-validator :</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>
<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; }