body {
color : #003333; //Schriftfarbe
background-image: url(grafik/grw09.jpg); //Hintergrundbild
background-attachment:fixed; //HG bleibt
beim Scrollen stehen
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: middle; //Schriftgröße
font-style: normal;
// Farbe der Scrollbalken
scrollbar-arrow-color: #00cc00;
scrollbar-base-color: #ffcc00;
scrollbar-darkshadow-color: #ff6600;
scrollbar-highlight-color: #006600;
scrollbar-face-color: #006600;
scrollbar-track-color: #cccccc;
scrollbar-shadow-color: #cccccc;
scrollbar-3dlight-color: #ffcc00;
}
//Farbe der Schrift in Tabellen
td {
font-size: middle;
color: #003333;
}
//Farbe und Eigenschaften der Verweise
A:link { color:#cc0000; text-decoration: underline; } //angezeigter
Link
A:visited { color : #990000; text-decoration: underline; } //
besuchter Link
A:hover {// Link bei Maus drüber
color:#006600;
text-decoration: overline;
}
A:active {// geöffneter Link ( Seite)
color: #FFFFCC;
background: #ff0000;
text-decoration: none;
}
.under {// Überschrift
font-weight: bold;
text-decoration: underline;
}
// Bilderrahmen mit Mauszeichen als Fragezeichen
Maus über das Bild
Anstatt die Bilder im Grafikprogramm mit einem Rahmen zu versehen, der nur unnötig
Speicher belegt, geht es mit css an Ort und Stelle viel einfacher und das Bild
wird schneller geladen! Farbe, Form und Stärke des Rahmens kann man natürlich
ändern. Im Quelltext wird dann diese Option als class="bild"
angezeigt:
<img src="grafik/01_jpg.jpg" alt="Beispiel" width="100"
height="75" align="middle" class="bild">
.bild {
border: medium ridge #00CC00;
cursor: help; <<<mehr
}
.borderbold {// Text mit gelben
Rahmen
border: thin groove #FFFF99;
}
Die rot markierten Zeilen werden vom Browser überlesen
und dienen nur zur Beschreibung!
Die gezeigte CSS-Datei wird vom Internet Explorer komplett dargestellt!
Alternativ-Browser (Firefox und Co.) können einige css-Elemente nicht darstellen
(z.B. scrollbar und Filter)!
Alle css-Eigenschaften mit einem Punkt vor dem Titel ( zb. .under, .bild ,
.borderbold )
gelten nicht für die ganze Seite, sondern können als Auswahl für
ein Objekt verwendet werden. Sie erscheinen in deinem Editor im CSS-Fenster
als Option!
Um diese css-datei zu erstellen, öffnet man im Editor eine neue Seite
> geht dann in die html-Ansicht ( Codeansicht ) > entfernt den ganzen
Inhalt und fügt den css-text ein.
Anschließend speichert man diese Datei im Hauptverzeichnis oder Ordner
der Homepage ab.
Wichtig ist die Dateiendung .css ! Dieses Format steht meist im DropDown-Menü
des Fensters "Speichern" zur Verfügung!
Jetzt kann man die css-datei mit der gewünschten Seite verknüpfen.
Der Link einer css.datei im Kopf ( <head> ) sieht dann so aus:
<html>
<head>
<title>CSS - Bergseite - Uwe Götte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="berg.css" rel="stylesheet"
type="text/css">
</head>
Der Name "berg" ist hier nur ein Beispiel !
Hier die berg.css als Beispiel zum kopieren:
( Die Bild-url durch deine Grafik erzetzen!)
Maus über das Bild