Modul: Text & Tabellen
CSS
Frühe HTML-Versionen haben Inhalt und Design zusammengefasst. Das hat den Nachteil, dass jede einzelne Web-Seite angefasst werden muss, wenn das Design einmal angepasst werden muss. Auch bei den von Forschungsdatenrepositorien erzeugten Web-Seiten ist die Trennung von Inhalt und Design die Regel. Beispielsweise werden für die Landungsseite (landing page) eines Datensatzes Metadaten und vielleicht Previews der Daten oder ein Logo aus einer Datenbank geholt und von der Repositoriums-Software zu einer Web-Seite zusammengesetzt und verschickt. Die Seite ist in der Regel also nicht fertig zusammengesetzt irgendwo gespeichert, sondern dynamisch, d.h. wird zur Laufzeit erzeugt. Wäre das Design nicht als Stylesheet-Datei verfügbar, müsste es mit in die Software integriert werden mit der Folge, dass bei jeder kleinen Design-Änderung die Software überarbeitet werden müsste. Das wäre grotesk umständlich.
Stattdessen wird die Design-Information in einer Stylesheet-Datei für alle Seiten zusammengefasst. Bei einer Design-Änderung muss dann im Idealfall nur diese eine Datei angepasst werden.
Eine Sprache, die mit HTML, TEI und dem Vektorgrafikformat SVG kombinierbar ist, ist CSS (Cascading Style Sheets). Das "Cascading" im Namen hat seinen Ursprung darin, dass nacheinander
- eine externe Stylesheet-Datei
- Style-Element im Head
- Style-Attribute der Elemente des Textteils
eingelesen werden. Dabei besitzt die zuletzt eingelesene Regel Vorrang.
Angenommen wir wollen die HTML-Tabelle von oben folgendermaßen darstellen:
|
|||||||||||
Wenn das Design im Head stehen soll, erweitern wir die HTML-Datei um einen Header mit Style-Element und schreiben die Style-Regeln dort hinein:
| <html> | HTML-Kennung |
| <head> | Beginn Head |
| <title>Seitentitel</title> | wird nicht dargestellt |
| <style type="text/css"> | Beginn Style-Element |
| caption { font-size: medium; } | Tabellenüberschrift in normal großer Schrift |
| th {background-color: lightgrey; } |
unterlegt die Zellen des Tabellenkopfes hellgrau |
| td, th { padding: 0.3em; | erzeugt einen Rand der Breite 0.3 em |
| border: thin solid black; | umrandet die Zelle mit einer dünnen, durchgezogenen, schwarzen Linie |
| text-align: center; } | Text zentriert |
| table { border-collapse: collapse; } | verschmilzt die separaten Kästen um die Zellen zu einer Begrenzungslinie |
| </style> | Ende Style-Element |
| </head> | Ende Head |
| <body> | Beginn Textteil |
| <table>
<caption>Tabellenüberschrift</caption> <thead> <th>11</th> <th>12</th> <th>13</th> </thead> <tbody> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td rowspan="2">33 und 43 verbunden</td> </tr> <tr> <td colspan="2">41 und 42 verbunden</td> </tr> </tbody> </table> |
Tabelleninhalte von einer Seite zurück |
| </body> | |
| </html> |
Eine Style-Regel nennt mindestens einen Selektor oder eine Liste von Selektoren, auf die sich die Regel auswirken soll, gefolgt von mindestens einer Deklaration in geschweiften Klammern. Beispiel:
Zwischen Eigenschaft und Wert muss immer ein Doppelpunkt stehen. Innerhalb der geschweiften Klammern können mehrere Deklarationen stehen, die durch Semikolons getrennt sind.
In einer Liste von Selektoren sind die einzelnen Selektoren durch Kommas getrennt. Selektoren sind meist Elementnamen. Es gibt aber auch spezielle Selektoren, die standardmäßig mehrere Elemente umfassen oder aktionsbezogen sind. Ein Beispiel ist :hoover, das Element, über dem gerade der Mauszeiger steht.
Style-Regeln können — wie schon erwähnt — auch aus einer externen Datei gelesen werden. Im Head der HTML-Datei steht dann der Link zur CSS-Datei:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
...
Mit rel="stylesheet" wird angezeigt, dass ein Stylesheet importiert werden soll. href enthält die URL.
Wenn Sie selbst im Repositorium Einträge in HTML zu Ihren Daten vornehmen, werden Sie vermutlich nicht die Möglichkeit haben, die Stylesheet-Datei anzupassen. Und zum HTML-Head werden Sie in der Regel ebenso keinen Zugang haben. Was in dem Fall bleibt, sind Style-Attribute in den Elementen. Beispiel:
<caption style="font-size: medium;">Tabellenüberschrift</caption>
Tutorium und Nachschlagewerk zu CSS: unter selfhtml