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)</h2>
<h3>Überschrift 3</h3>
<h3 class="aufgabe">Überschrift 3 (Übungsaufgabe)</h3>
<h4>Überschrift 4</h4>

Renderergebnis

Seitenkopf (einmalig)

Überschrift 3

Überschrift 3 (Übungsaufgabe)

Überschrift 4

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

von HTML ausgezeichnet und vom CSS entsprechend angepasst.

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>
Hervorgehoben
Wichtig
Konzept
Proportional

Hier ein Beispiel zur Verwendung dieser Inline-Classes

Eine Anweisung ist ein zentrales Konzept der Informatik. Unter dem Begriff der Anweisung versteht man etwas wie x=2.

Listen

Du kannst geordnete Listen

<ol>
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ol>
  1. Punkt
  2. Punkt
  3. Punkt

oder ungeordnete Listen verwenden:

<ul>
    <li>Punkt</li>
    <li>Punkt</li>
    <li>Punkt</li>
</ul>
  • PunktPunktPunktPunktPunktPunktPunktPunktPunkt PunktPunktPunktPunktPunkt PunktPunktPunktPunktPunktPunkt PunktPunktPunktPunkt PunktPunktPunktPunkt PunktPunktPunkt PunktPunktPunkt
  • Punkt
  • Punkt

Hinzu kommt noch eine ungeordnete Liste ohne Aufzählungspunkte

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

Bilder

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

Ein Bild rechts

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

Ein Bild in der Seitenmitte

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

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

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

Defintionsbox

Um Definitionen von Objekten u.a. zu erstellen, kannst du die Definitionsbox verwenden. Du erhälst sie mit folgendem Code:

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

Diese Definitionsboxen kommen vor allem auf den Fachkonzept-Seiten zum Einsatz.

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>
X

Fehler melden

X

Suche