css-stylesheets


<b style="color:#0000ff;background-color:#ffff00;padding:5px;">

 css stylesheets können das Aussehen von Text und Links beeinflussen 

</b>


Vielleicht möchten Sie z.B., das Links rot aufleuchten wenn man mit der Maus darüber fährt,
oder die Hintergrundfarbe vom Link soll sich ändern usw...


Es gibt 3 Möglichkeiten ein Stylesheet einzubinden:

  1. Ein Stylesheet kann im body untergebracht werden. Dann gilt es nur für eine bestimmte Textpassage (siehe Beispiel oben).

  2. Ein Stylesheet kann im html-Header untergebracht werden. Dann gilt es zentral für das ganze Dokument.

  3. Ein Stylesheet kann zentral in einem eigenen Verzeichnis als Datei abgelegt werden. Dann gilt es zentral für die gesamte Homepage. Diese Variante wird in diesem Artikel nicht besprochen.



Muster html-Kopf mit Stylesheet:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta name="Author" content="mein Name">
<meta name="Generator" content="Notepad">
<meta name="keywords" content="xxxxx, xxxxx, xxxxx, xxxxx">
<meta name="description" content="xxxxxxxxxxxxxxxxxxxx">
<title>Titel der Seite</title>
<style fprolloverstyle>a{text-decoration: none}a:hover{color: red}a:active {color: red}</style>
</head>
<body style="font-family: helvetica,arial,sans-serif; font-size: 14px;"><br>



Stylesheets zum Ausprobieren:


<style fprolloverstyle>a{text-decoration: none}a:hover{color: red}a:active {color: red}</style>


oder


<style fprolloverstyle>
a {text-decoration: none}
a:hover {color: red}
a:active {color: red}
</style>


oder


<style fprolloverstyle>
a:hover {color: red;font-weight: bold}
a:active {color: red}
</style>


oder


<style fprolloverstyle>
a {text-decoration: none}
a:hover {color: #ff0000;background-color: #ffff66}
a:active {color: #ff0000;background-color: #ffff66}
</style>


oder


<style type="text/css">
<!--
a { text-decoration: none; }
a:link { color: ##0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #FF0000; }
a:active { color: #FF0000; }
span { color: #000000; font : menu;}
-->
</style>


oder


<style fprolloverstyle>
a {text-decoration: none}
a:hover {background-color: #bacdeb;border-color: #046ac5;border-style: solid;border-width: 1px;}
a:active {background-color: #bacdeb;border-color: #046ac5;border-style: solid;border-width: 1px;}
</style>


oder


<style>
<!--
A:link { text-decoration: none; color: #8080FF; }
A:visited { text-decoration: none; color: #8080FF; }
A:active { text-decoration: none; color: #FF0099; }
A:hover { text-decoration: underline; color: #0000FF; }
-->
</style>




Stylesheet für Tabelle:

<table style=filter:glow(color.red)>




Farben können Hexadezimal angegeben werden:
#FF0000 bedeutet rot
#00FF00 bedeutet grün
#0000FF bedeutet blau
#FFFF00 bedeutet gelb
um die richtige Farbe zu finden suchen Sie mit Google nach "Farbtabellen".
RGB-Farben umrechnen: screenexa.net/html/farbtab.htm




Back-Button JavaScript:

<p><form></p>
<center><p><input type="button" value="  zur&uuml;ck  " onclick="history.go(-1)"></p></center>
<p></form></p>

<p><form></p>
<p><input type="button" value=" vorwärts " onclick="history.go(1)"></p>
<p></form></p>



Viele Grüße
Thomas