14 - CSS
14.1 - CSS Grundlagen
Was ist CSS?
CSS (Cascading Style Sheets) kannst du dir als eine Art Erweiterung zu HTML vorstellen. Die Aufgabe von CSS ist die Formatierung von HTML-Elementen, also z. B. die Schriftgröße von Text oder die Hintergrundfarbe von Tabellen festlegen. Wie HTML hat auch CSS nichts direkt mit MapTool zu tun, wird aber ebenfalls unterstützt.
CSS in diesem Tutorial
Wie auch schon im Kapitel über HTML beschränke ich mich erneut auf die wichtigsten Dinge in Verbindung mit MapTool, alles andere wäre zu ausufernd. Wenn du mehr über CSS und dessen Möglichkeiten erfahren möchtest empfehle ich dir wieder die Seite
SELFHTML.Dort findest du nämlich nicht nur alles Wissenswerte über HTML, sondern eben auch alles über CSS.
Die CSS-Version
MapTool unterstützt leider nur eine veraltete CSS-Version, nämlich "CSS Level 1", und selbst davon nicht alle Möglichkeiten. Das musst du beachten falls du dich bereits besser mit CSS auskennst, oder dich entschließt mehr darüber zu lernen. Im Rahmen dieses Tutorials spielt das aber keine Rolle.
Aufbau
Schauen wir uns an wie CSS-Anweisungen, auch
Styles genannt, aufgebaut sind. Zuerst kommt die Eigenschaft, dann ein Doppelpunkt (:) und schließlich der Wert für die Eigenschaft. Ein Beispiel:
Die Eigenschaft hier ist
font-weight, mit der du die Strichstärke beeinflussen kannst. Als Wert ist
bold (fett) angegeben. Die Schrift würde also fett dargestellt werden. Ein weiterer möglicher Wert wäre z. B. "normal" (normale Strichstärke, Standardwert).
Es können natürlich auch mehrere Eigenschaften angegeben werden. Diese werden dann einfach mit einem Semikolon (;) voneinander getrennt:
Code: Select all
font-weight: bold; font-style: italic
Nun müssen wir die Styles ja auch irgendwie in den Code integrieren, das kannst du auf zwei verschiedene Arten tun. Bei der ersten Möglichkeit benutzt du das HTML-Attribut "style", um die CSS-Anweisung direkt im HTML-Tag für das Element unterzubringen. Dabei werden die CSS-Anweisungen nochmal in Anführungszeichen eingeschlossen:
Code: Select all
<table style='font-weight: bold'>...</table>
In diesem Fall würde also der gesamte Text in der Tabelle, und somit in allen Zellen, fett dargestellt. Nun kann es aber natürlich auch sein, dass du nur ein paar Wörter innerhalb der Tabelle fett darstellen möchtest. Dann wäre diese Variante natürlich nicht sehr hilfreich. Zum Glück gibt es eine weitere Möglichkeit.
span ist ein HTML-Element und wird wie andere Tags gehandhabt, markiert also einen Bereich:
<span>...</span>
Allerdings ist
span ein Sonderfall, denn in dieser Form hat es keine Bedeutung. Wirklich, es bewirkt einfach absolut gar nichts. Damit es aber einen Sinn ergibt kannst du es, wie andere Elemente auch, mit CSS formatieren. Also:
Code: Select all
<span style='font-weight: bold'>...</span>
Und hier ein Beispiel:
Code: Select all
In diesem Satz werden nur <span style='font-weight: bold'>zwei Worte</span> fett geschrieben.
Wenn du ein Element mit CSS formatierst wirkt sich das, je nach Eigenschaft, oft auch auf alle untergeordneten Elemente, die sogenannten
Tochter- oder Kindelemente aus. Wenn du also z. B. für eine Tabelle die Strichstärke festlegst:
<table style='font-weight: bold'>
wirkt sich das auch auf alle Zeilen (<tr>) und Zellen (<td>) innerhalb der Tabelle aus. Auf übergeordnete Elemente, z. B.
<body>, das den gesamten Inhalt enthält, oder andere Elemente außerhalb der Tabelle, wirkt sich die Formatierung nicht aus. Übergeordnete Elemente werden übrigens
Elternelemente genannt. Gleichwertige Elemente, also weder über- noch untergeordnet, werden
Nachbarelemente genannt.
Tochterelemente kannst du auch unabhängig von dem Elternelement formatieren, also weitere Formatierungen festlegen oder auch die Formatierung des Elternelements überschreiben. Wenn wir bei obigem Beispiel mit der Strichstärke bleiben, könntest du z. B. für eine einzelne Zelle (<td>) eine andere Strichstärke festlegen:
Code: Select all
<table style='font-weight: bold'>
<tr>
<td>
Zelle 1
</td>
<td>
Zelle 2
</td>
<td style='font-weight: normal'>
Zelle 3
</td>
</tr>
</table>
CSS Eigenschaften haben meistens auch Standardwerte. Wenn du in einem Element eine Eigenschaft nicht angibst, und diese Eigenschaft auch nicht von einem Elternelement geerbt wurde, wird automatisch der Standardwert der Eigenschaft genutzt. Nehmen wir als Beispiel wieder die Strichstärke. Wenn also
font-weight weder in dem betroffenem Element (z. B. eine Tabellenzelle) noch in einem Elternelement angegeben wird, wird für die Strichstärke immer der Wert "normal" genutzt, da dies der Standardwert von
font-weight ist.
Das Box-Modell
Später geht es darum "Boxen" zu formatieren. Dafür solltest du natürlich wissen was "Boxen" überhaupt sind. Das ist zum Glück recht einfach: Eine Box ist ein rechteckiger Kasten. Boxen sind selbst keine Elemente, werden aber von Elementen erzeugt. Eine Tabelle (<table>) oder eine Tabellenzelle (<td>) erzeugen zum Beispiel immer eine Box. DIV Container (<div>) und das body-Element (<body>), in dem der gesamte Inhalt notiert wird, ebenfalls. Diese Boxen lassen sich dann mit CSS-Eigenschaften im entsprechenden HTML-Tag auf vielfältige Weise formatieren.
