Webdesign – Cascading Stylesheets
Spezielle Formatklassen

DeveloperIT-ProjekteOffice-AnwendungenSoftware

Erstellen Sie die Formate für spezielle Seitenelemente mit CSS-Klassen. Vielleicht möchten Sie interne Verweise anders färben als externe. Legen Sie für jeden Link-Typ eine Formatklasse an.


Seitenelemente ___

Erstellen Sie die Formate für spezielle Seitenelemente mit CSS-Klassen. Vielleicht möchten Sie interne Verweise anders färben als externe. Legen Sie für jeden Link-Typ eine Formatklasse an. Interne Links formatieren Sie beispielsweise hellblau mit

a.intern {color:#003399;}

Externe Verweise definieren Sie in oranger Farbe mit der Formatklasse

a.extern {color:#FF9900;}

Weisen Sie dem jeweiligen Link die Klasse nach dem folgenden Muster zu:
Link

Ein weiteres Beispiel: Möchten Sie Bilder im Fließtext abwechselnd links- und rechtsbündig ausrichten, dann legen Sie zwei CSS-Klassen an. In der ersten lassen Sie den Text mit den folgenden Angaben rechts um das jeweilige Bild fließen:

img.bildlinks {float:left; margin-top:10px; margin-bottom:10px; margin-right:20px;}

Dabei legen die Parameter margin- ? die Abstände zum angrenzenden Text fest. Verwenden Sie für die rechtsbündigen Bilder die folgende Formatklasse:

img.bildrechts {float:right; margin-top:10px; margin-bottom:10px; margin-left:20px;}

Beherzigen Sie bei den Klassennamen die folgenden Regeln: Benennen Sie die CSS-Formate nicht nach der Gestaltung, sondern nach der logischen Funktion. Der Name orange für externe Links würde im obigen Beispiel zwar erst einmal passen. Krempeln Sie die Farben Ihrer Site später jedoch komplett um, dann kommen Sie mit Sicherheit durcheinander.Vermeiden Sie zudem Abkürzungen oder kryptische Bezeichnungen. Je sprechender die Namen sind, desto leichter verstehen Sie oder andere das Prinzip auch noch nach Wochen. Besser noch: Greifen Sie mit den Klassennamen die Struktur der Seite auf. So lassen sie sich noch schneller zuordnen. Bei den Namen teaser_text und teaser_ueberschrift erkennen Sie auf einen Blick, auf welches Objekt der Seite sie sich beziehen. Fügen Sie solche zusammengehörigen CSSAngaben direkt hintereinander in den CSS-Code ein und stellen Sie einen kurzen Kommentar voran. In diesem erläutern Sie beispielsweise, um welche Teaser es konkret geht.