Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp09/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2009 - Gruppe 1 - Web-CSS

CSS

CSS und Stylesheets

In klassischem HTML sind Formatierungsattribute sehr unflexibel und der Inhalt wird mit der Darstellung zusammengemischt. Um dieses Problem zu lösen, wird eine Trennung zwischen Inhalt und Darstellung vorgenommen:

  • der eigentliche Inhalt wird nach wie vor in einer Markup-Sprache wie XML bzw. (X)HTML ausgedrückt, die Tags sollen Auskunft darüber geben, was für eine Inhalt dargestellt werden soll, und nicht wie das geschehen oder aussehen soll.
  • die Festlegung der Darstellung geschieht dann mit Stylesheet-Dateien wie XSL oder Cascading Style Sheets (CSS)

Dieses Muster haben wir auch durchgehend bei der Web-Oberfläche eingehalten. Die einzigen Hinweise auf spätere Darstellung der Web-Seite, die in den Templates und HTML-Dateien zu finden sind, sind class- und id-Attribute in den jeweiligen HTML-Tags. Ein Verweis auf das zu benutzende Stylesheet kann auf verschiedene Weisen angegeben werden.

Einbindung

  • externes Stylesheet (link-Element)
<link rel="stylesheet" type="text/css" href="main.css" />
    <?xml-stylesheet type="text/css" href="foo.css" ?>
  • internes Stylesheet (style-Element)
<head><title>Formatierte Seite</title>
    <style type="text/css">
    body { color: #f00; font-size: 2pt;}
    </style>
</head>
  • Innerhalb von (X)HTML-Tags (style-Attribut)
<span style="font-size: small;">Text</span>

Einbindung per Helper

<head>
	<meta http-equiv="Content-Type" content="text/html;
		  charset=utf-8" />
	<title>Space-Game</title>
	<%= stylesheet_link_tag 'main'%>

rendert als:

<link href="/stylesheets/main.css?1250156108" media="screen" 			  
              rel="stylesheet" type="text/css" />


Page last modified on August 24, 2009, at 11:09 AM