Aufbau einer standardgemäßen und barrierefreien Navigationsleiste: CSS-Tricks für TYPO3

Aus dem
t3n Magazin Nr. 2

Ergänzend zu dem Artikel von Jochen Weiland über den Aufbau einer Website mit TYPO3 in dieser Ausgabe, soll hier am Beispiel einer Navigationsleiste die Verwendung von CSS in TYPO3 vermittelt werden.

CSS mit TYPO3 verwenden

Generell lassen sich CSS-Anweisungen auf drei Arten in HTML-Dokumente einbinden:

1. Als Inline-Styles für HTML-Elemente:

HTML

<strong style="font-weight: bold;">Text</strong>

Listing 1

2. Als Styles im Kopfbereich der HTML-Datei:

HTML

<style> 
   strong { font-weight: bold; }
</style>

Listing 2

3. Als verlinktes oder eingebundenes Stylesheet:

HTML

<link xhref="stylesheet.css" rel="stylesheet" type="text/css" />
<style>
   @import url(stylesheet.css);
</style>

Listing 3

Während die erste Methode nur in wenigen Fällen geeignet ist, kommen bei TYPO3-Websites Styles im Kopfbereich und verlinkte Stylesheets häufig vor. Die TypoScript-Anweisung zum Einbinden eines Stylesheets im Kopfbereich lautet:

TYPOSCRIPT

page.stylesheet = stylesheet.css

Listing 4

Diese Methode hat jedoch einige Nachteile – so lassen sich keine individuellen Titel oder rel-Attribute für die Stylesheets vergeben. Stattdessen wird auf eine universellere Methode zurückgriffen, mit der beliebige Zeichenfolgen in den Seitenkopf geschrieben werden können:

Seite: 1 2 3 4 5 6 7

►

Das interessiert dich bestimmt auch