ButterflyHintergrundbild ist an der Bärgündele Alpe in Richtung Laufbacher Eck aufgenommen Butterfly
Bergwandern im Oberallgäu

Videoclips Ferienwohnungen

Ich wünsche allen Bergwanderen schöne Touren u. eine gesunde Heimkehr !

Durch Inkrafttreten der EU-DSGVO, sind Inhalte die evtl. gegen Datenschutz verstoßen geschützt !
Diese Webseite ist mit SSL verschlüsselt ( https )
Daten, Cookies und IP-Adressen werden nicht gespeichert !


 

Die css Datei dieser Homepage

 

Damit alle Seiten einer Homepage das gleiche Layout haben, erstellt man für die Formatierung nur eine Datei. In dieser CSS Datei werden die Schriftfarbe u.-Größe, Hintergrundfarbe oder -Grafik, Bildoptionen, Tabellengestaltung, Gestaltung der Verweise (Links), Button, farbige Scrollbalken, Textboxen, Textoptionen und weitere Formatierungen erstellt. Man erstellt erst eine leere Seite und nennt sie z.B. berg.css!
Jetzt kann man mit der Arbeit beginnen und die einzelnen Styls eintragen.
Den Code zum kopieren findest dann ganz unten !!!
Aber schauen wir uns doch mal so eine fertige css Datei als Beispiel an:

/* CSS Document */
body,html {
color : #003333; Schriftfarbe
background-image: url(grafik/Bildgr02.jpg); Hintergrundgrafik
background-attachment:fixed; Hintergrundgrafik scrollt nicht mit

Verwendet man keine Hintergrundgrafik genügt dieser Eintrag:

background-color: #66CC66;


text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif; Schriftart
font-size: 16px; Schriftgröße
font-style: normal;
scrollbar-arrow-color: #00cc00; Farben der Scrollbalken
scrollbar-base-color: #ffcc00;
scrollbar-darkshadow-color: #ff6600;
scrollbar-highlight-color: #006600;
scrollbar-face-color: #006600;
scrollbar-track-color: #00cc00;
scrollbar-shadow-color: #00cc00;
scrollbar-3dlight-color: #ffcc00;
}
td { Tabellenformatierung
font-size: 16px;
color: #003333;
}
A:link { angezeigten Link
color:#ffff99;
text-decoration:
underline;
font-size: 16px;
}
A:visited { besuchter Link
color : #990000;
text-decoration: underline;
font-size: 16px;
}
A:hover { Maus drüber Link
color:#006600;
text-decoration: overline;
font-size: 16px;
}
A:active { aktiver Link
color: #FFFFCC;
background: #ff0000;
text-decoration: none;
font-size: 16px;
}

Ab hier können Styls dazu geklickt werden u. erscheinen in der css datei mit einem Punkt davor.
Diese Optionen werden nicht automatisch auf die Seite angewendet.
Sie erscheinen dann im Quelltext z.B. als <span class="under">.


.under { Fettschrift u. unterstrichen
font-weight: bold;
text-decoration: underline;
}
.bild { Bilderrahmen grün mit Mauszeichen Hilfe:
border: medium ridge #00CC00;
cursor: help;
}
.code { Textfeld, Hintergrund grau, Rahmen rot gestrichelt
color: #003366;
border: thin dashed #FF0000;
background: #cccccc;
}
.box { Textfeld mit einer Position
height: auto;
width: 736px;
border: thin none #00FF00;
clear: both;
font-style: normal;
text-align: left;
}
.footer{ Textformatierung kleine Schrift
color:#003333;
font-size: 12px;
}
.ecards_submit { Formatierung der Button
font-weight: bold;
background-color: #00cc00;
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #333333;
color: #000000;
text-decoration: none;
}

In einer CSS Datei kann man fast alles festlegen u. es auf die Seite anwenden.


Ist man damit fertig wird diese Datei in der header.inc.php im <head> verlinkt.

Link css Datei

Hier der Code zum kopieren:

/* CSS Document */
body,html {
color : #003300;
background-image: url(grafik/alpin.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
scrollbar-arrow-color: #00cc00;
scrollbar-base-color: #ffcc00;
scrollbar-darkshadow-color: #ff6600;
scrollbar-highlight-color: #006600;
scrollbar-face-color: #006600;
scrollbar-track-color: #00cc00;
scrollbar-shadow-color: #00cc00;
scrollbar-3dlight-color: #ffcc00;
}
.fixed {
background-attachment:fixed;
}
td {
font-size: 16px;
color: #003300;
}
A:link {
color:#ffff99;
text-decoration:
underline;
font-size: 16px;
}
A:visited {
color : #FFCC33;
text-decoration: underline;
font-size: 16px;
}
A:hover {
color:#006600;
text-decoration: overline;
font-size: 16px;
}
A:active {
color: #FFFF;
background: #ff0000;
text-decoration: none;
font-size: 16px;
}
.haedline {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
font-style: italic;
letter-spacing: .1em;
color : #003300;
text-shadow: 0 0 5px white,
0 0 10px white,
0 0 20px yellow,
0 0 40px yellow,
0 0 60px yellow,
0 0 90px yellow,
0 0 120px yellow,
0 0 160px yellow;
}
.neontext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
letter-spacing: .1em;
color : #003300;
text-shadow: 0 0 5px white,
0 0 10px white,
0 0 10px yellow,
0 0 20px yellow,
0 0 40px yellow,
0 0 70px yellow,
0 0 90px yellow,
0 0 100px yellow;
}
.under {
font-weight: bold;
text-decoration: underline;
color:#FFFF99;
}
.underline {
text-decoration: underline;
color:#33ff66;
}
.bild {
border: medium ridge #00CC00;

border-radius: 20px;
}
border {
border: medium ridge #00CC00;
}
.borderbold {
border: thin groove #FFFF99;
border-radius: 20px;
}
.neon {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 34px;
font-weight: bold;
font-style: italic;
letter-spacing: .1em;
color : #003300;
text-shadow: 0 0 5px white,
0 0 10px white,
0 0 20px yellow,
0 0 40px yellow,
0 0 60px yellow,
0 0 90px yellow,
0 0 120px yellow,
0 0 160px yellow;
}
.bildk {
border: 1px ridge #00CC00;
}
.ecards_submit {
font-weight: bold;
background-color: #00cc00;
background-repeat: repeat-x;
background-position: left top;
border: 1px solid #333333;
color: #000000;
text-decoration: none;
}
.footer{
color:#ffffcc;
font-size: 12px;
}
.tags{
color:#ffffff;
font-size: 10px;
}
.pixlie-bildhalter{
background: url(../moonlight/pixlieloader.gif) 50% 50% no-repeat;
}.pixlie-vorschaubild {
background: transparent;
}.pixlie-vorschaubild-rahmen{
border:medium ridge #00CC00;
padding:5px;
margin:30px 0px 0px 0px;
}a:hover .pixlie-vorschaubild-rahmen{
border:1px solid #00cc00;
}
.box {
width: auto;
clear: both;
padding: 20px;
font-style: normal;
font-size: 16px;
text-align: justify;
background: #00ff00;
border: medium ridge #00CC00;
border-radius: 20px;
}
.box1 {
width: 730px;
clear: both;
padding: 10px;
font-style: normal;
margin: 10px;
font-size: 16px;
text-align: justify;
background: #00ff00;
border: medium ridge #00CC00;
border-radius: 20px;
}
.div {
width: 700px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
.box2 {
width: 736px;
clear: both;
font-style: normal;
font-size: 14px;
text-align: center;
background: #00ff00;
border: medium ridge #00CC00;
border-radius: 20px;
}
.code {
color: #003366;
border: thin dashed #FF0000;
background: #cccccc;
}.hg {
background-color: #66CC66;
}

 

 


Wer Fheler fnidet draf sie bhealten !
Meine Webseite verwendet keine Cookies und ist ohne lästigen Werbemüll !

 

Gastronomie in Hinterstein | Impressum | Videoclips | FFW Langula |
Letztes Update: 14.03.2019 17:59
Meine Homepage ist gehostet bei Webspace preiswert! - Alfahosting.de | © Schuwi-Media.de