CSS - Cascading Style Sheets

Worum geht es hier?

inf-schule.de verwendet ein zentrales Stylesheet welches allen Seiten das entsprechend gleiche Aussehen gibt. Diese Stile geben dem Besucher seitenübergreifend gute Orientierung über die ihm vorliegenden Inhalte sowie deren Bedeutung im Kontext. Auf dieser Seite findest du die wichtigsten CSS-Klassen, die innerhalb der inhalt.html verwendet werden können.

Überschriften

Du kannst verschiedene Überschriften verwenden. Bitte beachte dabei die entsprechende Hierarchie. Wenn du eine <h4> (Überschrift der Größe 4) verwenden möchtest, so sollte dies innerhalb eines Abschnitts passieren, der von einer <h3> (Überschrift der Größe 3), passieren.

<h2>Seitenkopf (einmalig, wird automatisch aus title: generiert)</h2>
<h3>Überschrift 3</h3>
<h3 class="aufgabe">Überschrift 3 (Übungsaufgabe)</h3>
<h4>Überschrift 4</h4>

Renderergebnis

Wie du dem obigen Beispiel entnehmen kannst, erhalten Aufgabenüberschriften noch eine spezielle Klasse aufgabe, sodass sie von normalen Überschriften unterscheidbar sind.

Absätze und Inline-Klassen

Absätze werden generell über das Paragraph-Element

Innerhalb von Absätzen kannst du verschiedene Stile verwenden, die keine Blockelemente sind (und damit keinen Umbruch erzeugen sondern in der Zeile - inline - stehen)

Folgende Elemente stehen zur Verfügung

<em>Hervorgehoben</em>
<strong>Wichtig</strong>
<span class="konzept">Konzept</span>
<span class="proportional">Proportional</span>

Hier ein Beispiel zur Verwendung dieser Inline-Classes

Listen

Du kannst geordnete Listen

<ol>
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ol>

oder ungeordnete Listen verwenden:

<ul>
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ul>

Hinzu kommt noch eine ungeordnete Liste ohne Aufzählungspunkte

<ul class="ohne-listenpunkte">
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ul>

Bilder

Bilder können an verschiedenen Stellen positioniert werden. Zusätzlich bietet Javascript die Option eine Vergrößerung bei Klick.

Ein Bild rechts

<img alt="Testbild" class="rechts" src="testbild.jpg" width="200"/>

Ein Bild in der Seitenmitte

Bilder können ebenfalls in der Seitenmitte positioniert werden. Auch dies ist mit der Option vorschau verwendbar.

<img alt="Testbild" class="mitte" src="testbild.jpg" width="200"/>

Hinweis zu Bildern/Vergrößerungen

Bilder, die mit einer Quellenangabe versehen sind, erhalten automatische eine entsprechende figure-Box, in der sie sich dann befinden. Dadurch können die Bilder dann auch automatisch vergrößert dargestellt werden.

Weitere Klassen

Definitionsbox

<div class="def">
...
</div>

Weitere Boxen

Proportionale Schrift

Du kannst proportionale Schrift erhalten, in dem du einem Absatz, einem Span-Element oder einem Div-Element die Klasse proportional hinzufügst:

<p class="proportional">Inhalt</p>

<span class="proportional">Inhalt</span>

<div class="proportional">Inhalt</div>