Zwei unterschiedliche Styles für den Contentbereich (text/html) und die Navigation?

Peter Beauvain
2008-06-13 23:38

Formate für Klassen definieren:
Sie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem Universalattribut class=. So können Sie beispielsweise für Überschriften 1. Ordnung zwei Varianten erzeugen. Dazu vergeben Sie Namen für die Klassen.

Erläuterung:

Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu notieren: entweder für einen bestimmten HTML-Elementtyp, oder für keinen bestimmten. In jedem Fall bestimmen Sie eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Im obigen Beispiel wird mit h1.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h1 gilt: also z.B. auf HTML-Elemente wie <h1 class="hinterlegt"> anwendbar ist. Mit *.hinterlegt wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden können. Der Stern gilt als Platzhalterzeichen und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel .extra können Sie das sehen. Ein h1-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor h1.hinterlegt bestimmt werden. Ein p-Element mit erhält dagegen die Formatierungen, die mit *.hinterlegt bestimmt weden. Die Namen hinter dem Punkt können Sie frei vergeben. Die Namen sollten nicht zu lang sein und keine Leerzeichen und keine deutschen Umlaute enthalten.

Format für HTML-Elemente:
Also z.B. beim Link:
a {
   font: normal 12px verdana, arial, helvetica, geneva;
   font-weight: bold;
   color:red;
}
a:link {
   text-decoration: underline;
}
a:visited {
   text-decoration: underline;
}
a:hover {
   text-decoration: none;
}

Speziell für die Navigation:

.navigation, .navigation a, .navigation a:link, .navigation a:visited, .navigation a:hover {
   font-family: Verdana, Helvetica, Arial, sans-serif;
   font-size: 10px; color: #4A5966;
   font-weight: normal;
   text-decoration: none;
}

Durchschnittliche Bewertung: 3.67 (6 Abstimmungen)

Kommentieren nicht möglich