Grundlagen von CSS (Cascading Stylesheets)
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 21.08.2019
     
Grundlagen von CSS (Cascading Stylesheets)
Formatierung Extern Ladezeiten verkürzen Font-Tags ausradieren

Wer seine Webseiten in Helvetica oder Verdana formatieren will oder muss, kommt um unzählige Font Tags nicht herum. Die aber machen den Quellcode unübersichtlich und verdoppeln unter Umständen die Ladezeit eines Dokuments. Externe Style-Sheets sind eine Alternative. Doch gilt es einige Klippen zu umschiffen. Vor allem der inzwischen recht veraltete Netscape 4.x macht die Reinigungsaktion zu einem wackeligen Unterfangen. Es geht aber doch. Definieren Sie für Absätze <P> sowie Tabellenspalten und -Zeilen jeweils dieselbe Formatierung.

P { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}
TD { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}
TR { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}

Das veranlasst sowohl Internet Explorer als auch Netscape sämtlichen Text in einer serifenlosen Schriftart anzuzeigen. Und zwar in der hier definierten Größe von 10 Punkt. Sie können auch alles in eine Zeile schreiben:

p,td,tr { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}

Zu Problemen kommt es, wenn Sie verschiedene Schriftgrößen einsetzen möchten. Denn die Formatierung size="1" funktioniert jetzt nur noch im Microsoft Browser. Netscape erzwingt überall 10 Punkt, egal was sonst noch im Quellcode steht. Dies läßt sich umgehen, indem Sie jedem anders zu formatieren Bereich eine eigene Styleanweisung (class) definieren.

Im HTML Code sieht das dann so aus.

<p class="klein">Kleiner Text</p>

Das gilt auch, wenn Sie zum Beispiel Blocksatz erzwingen wollen. Denn was für Fließtext sinnvoll ist, ist es bei Überschriften nicht unbedingt. Auch hier muss mit einer zusätzlichen Definition gearbeitet werden, um einen Textbereich linksbündig oder mittig auszurichten.

Das Gute daran. Alles was in ein externes Style Sheet ausgelagert wurde, lässt sich flink ändern. Sie können mit einem Handgriff den Blocksatz für die gesamte Web-Site aufheben, die Schriftfarbe, den Zeilenabstand oder die Größe ganzer Passagen oder Teile davon ändern.

Ganz auszuschließen sind Probleme allerdings nicht. Der IE3 ist in Sachen CSS recht unterbelichtet, glücklicherweise ist er nur noch selten anzutreffen. Vom Communicator gibt es inzwischen so viele Versionen, dass Testen keinen Sinn mehr macht. Manchmal klappt es nicht, wenn mehrere Anweisungen hintereinander stehen, dann hilft nur noch probieren. Eine praktikable Lösung läßt sich aber meist finden.

 






Hintergrundgrafiken via CSS top

Auch CSS liefert einige Möglichkeiten Hintergrundbilder flexibel einzubauen. Eine schmale Grafik (ca. 8 mal 8 Pixel) lässt sich so auf verschiedene Weise einsetzen. Pfade bzw. Grafikdatei müssen entsprechend angepasst werden.

Diese Befehlskette (in einem externen StyleSheet) erzeugt eine fixe, durchgehende Linie am oberen Bildschirmrand, die nicht mitrollt.

BODY {background-image: url(images/back.gif); background-repeat: repeat-x; background-attachment: fixed;}

Diese Befehlskette (in einem externen StyleSheet) erzeugt eine fixe, durchgehende Linie am linken Bildschirmrand.

BODY {background-image: url(images/back.gif); background-repeat: repeat-y;}

Diese Befehlskette (in einem externen StyleSheet) erzeugt eine fixe, durchgehende Linie am oberen Bildschirmrand, die herausrollt.

BODY {background-image: url(images/back.gif); background-repeat: repeat-x; background-attachment: fixed;}





Linkfarben

Frage:
Wie kann ich verschiedenen Links auf ein und der selben Seite verschiedene Farben verpassen? Ein Teil meiner Page ist auf dunklem, der andere Teil ist auf hellem Untergrund, desshalb kann ich keine Einheitliche Linkfarbe verwenden.

Ist es möglich den Link dazu zu bringen die Farbe anzunehmen, die man vorher im Font-Tag vergeben hat?
Wenn ja, wie??

Antwort:
Also dazu brauchst du erstmal folgenden Quellcode:

<STYLE type="text/css">
.input {background: "#00116e"; color: "#ffffff"; font-weight: normal;}
a.link1:link { text-decoration: none; color: "#ffffff"; }
a.link1:visited { text-decoration: none; color: "#ffffff"; }
a.link1:hover { text-decoration: none; color: "#ffcc00"; }

a.link2:link { text-decoration: none; color: "#ffffff"; }
a.link2:visited { text-decoration: none; color: "#ffffff"; }
a.link2:hover { text-decoration: none; color: "#00a444"; }

textarea#textfield1 {background: #00116e; font-family:verdana; color: #ffffff; font-size: 10pt; border-color: #000000; border-colordark:#000000; border-colorlight: #000000;}
input#textfield1 {background: #00116e; font-family:verdana; color: #ffffff; font-size: 10; border-color: #000000; border-colordark:#000000; border-colorlight: #000000;}
select#textfield1 {background: #00116e; font-family:verdana; color: #FFFFFF; font-size: 8pt; border-color: #00116e; border-colordark:#00116e; border-colorlight: #00116e;}
input#knopf1 {background: #00116e; font-family:verdana; color: #FFFFFF; font-size: 10pt; border-color: #000000; border-colordark:#000000; border-colorlight: #000000;}
</STYLE>

Oben sind dann angegeben link1 und link2, die du freiwählbar definieren kannst. Dann brauchst du einach nach dem Link folgendes schreiben:

<a href="link" class=link1> oder
<a href="link" class=link2>

also einfach class=link1 oder link2 hintersetzen. Du kannst natürlich auch noch mehrere Links definieren, indem du einfach den ganzen link1 Block kopierst und wieder einfügst und anstatt link1 schreibst du dann link3......





Verweisfarben definieren
Normalerweise kann der Nutzer die Farben für Verweise zu besuchten und noch nicht besuchten Seiten im Browser einstellen. Damit jedoch das Layout Ihres Werkes erhalten bleibt, sollten Sie diese Farben selbst festlegen.

Folgende Verweisdefinitionen gelten für das Element <A> dateiweit:

a:link Verweis

a:visited Besuchter Verweis

a:active Gerade angeklickter Verweis

Notieren Sie mindestens die ersten beiden Angaben. Nach diesen Namen folgt in der geschweiften Klammer die Angabe der Farbe.

Blindverweis

a:link {color:#FF0000;} a:visited {color:#0000FF;} a:active {color:#00FF00;}

Beachten Sie, dass das Beispiel nur einmal funktioniert, anderenfalls müssten Sie die History des Browsers löschen und diese Seite neu laden.

Es ist sinnvoll, die Verweisfarben für alle Verweise einheitlich zu gestalten. Möchten Sie aus welchen Gründen auch immer, für aus Ihrer Sicht verschiedene Verweistypen, unterschiedliche Farben definieren müssen Sie eine neue Klasse einrichten.

Im folgenden Beispiel ist eine

Klasse neu gebildet. Damit nun einige Verweise in Ihrer Datei die Farben der Klasse neu annehmen, müssen sie auch die Verweise in der HTML Datei mit dieser Klasse versehen.


/* eine neue Klasse definieren */
a.neu:link {color:#FF0000; text-transform:uppercase;}
a.neu:visited {color:#0000FF; text-transform:uppercase;}
a.neu:active {color:#00FF00; text-transform:uppercase;}
/* Aufruf im Verweis */
<A CLASS="neu" HREF="http://www.name.de">Verweistext</A>

Im übrigen können Sie nicht nur Farben, sondern alle Textformatierungen auf Verweise anwenden. Schreiben Sie die gewünschte Formatierung wie im Beispiel mit in die geschweifte Klammer.