Babybytes Hilfe - Stylesheets-ändern

Sie können Ihre persönlichen Seiten mit einem Farbton Ihrer Wahl gestalten, indem Sie den Stylesheet ändern.

Ihr Stylesheet beinhaltet Anweisungen, die bestimmen, wie Dinge auf Ihrer Seite wiedergegeben werden. So können Sie mit Ihrem Stylesheet den Schrifttypen auf dem Hintergrund ändern, Farben ändern, Schatten hinzufügen, Scrollbalken (Rollbalken) einfärben, Grafikeigenschaften ändern, die Farbe und Größe der Buttons verändern, etc.

Klicken Sie auf `Stylesheet ändern`

Wenn Sie noch kein Mitglied sind oder noch nie mit Ihrem Stylesheet gearbeitet haben, ist es noch leer:

Unter diesem noch leeren Textkästchen auf der Seite `Stylesheet ändern` sehen Sie verschiedene Beispiele.
Wir nehmen eine Zeile, um zu versuchen, ob es funktioniert.
Tipp: Wenn Sie kopieren und einfügen, unterlaufen Ihnen weniger Schreibfehler. Wenn Sie einen Schreibfehler im Text haben, wird es nicht funktionieren.

Klicken Sie auf `Speichern`, um zu sehen, ob es funktioniert:

Es funktioniert!

Wenn Sie mehr Zeilen an Ihrem Stylesheet hinzufügen, können Sie weitere Dinge verändern.

#body{font-family:tahoma}
#body{font-size:11pt}

ul { list-style-image: url('http://www.babybytes.de/images/realsmallbaby.gif') }

img{border: 1px dashed green;}

textarea {background-color:gold}
input {background-color:goldenrod; color:white}

Erklärung:
Die Farben, die Sie benutzen können, finden Sie auf http://w3schools.com/HTML/html_colornames.asp
Neben den naheliegenden Farben wie white, green und blue finden Sie auch schöne Namen wie MediumAquaMarine und CornflowerBlue.
Zeile 1: body{font-family:tahoma}
Alle Texte werden auf Ihrer Seite mit dem Schrifttypen Tahoma geschrieben.

Zeile 2: #body{font-size:11pt}
Die Textgröße ist 11.

Zeile 3: ul { list-style-image: url('http://www.babybytes.de/images/realsmallbaby.gif') }
Alle Listen der Aufzählungszeichen werden auf Ihrer Seite durch ein rollendes Baby vorausgegangen. In diesem Beispiel benutzen wir das Babybytesbaby auf http://www.babybytes.de/images/realsmallbaby.gi

Zeile 4: img{border: 1px dashed green;}
Alle Bilder bekommen einen grün (green) gestreiften (dashed) Rand mit einer Stärke von 1 Pixel (1px). Außer dashed können Sie auch diese benutzen: none, dotted, dashed, solid, double, groove, ridge, inset und outse.

Zeile 5: textarea {background-color:gold}
Alle Textareas, -das sind die viereckigen Kästchen, worin Sie etwas schreiben können- , bekommen einen goldfarbenen Hintergrund.

Zeile 6: input {background-color:goldenrod; color:white}
Alle `input` Elemente, -das sind Buttons, Kontrollkästchen und Ausfüllfelder -, bekommen die Hintergrundfarbe `goldenrod` und der Text auf dem Button bekommt die Schriftfarbe weiß.

#body{font-family:Franklin Gothic Book}
#body{font-size:11pt}

textarea {background-image:url(http://nps.gov/cabr/historyculture/images/Foggy_Lighthouse_RESIZED.jpg);}

input {background-color:CornflowerBlue; color:AliceBlue}

a:hover {color:red; background-color:Wheat}

Erklärung:
Zeile 1: Alle Texte werden auf Ihrer Seite mit dem Schrifttypen Franklin Gothic Book geschrieben.
Zeile 2: Die Textgröße ist 11.
Zeile 3: Alle Ausfüllfelder bekommen auf Ihrer Seite ein Hintergrundbild. In diesem Beispiel ist es ein Leuchttum, den wir auf folgende Website gefunden haben http://nps.gov/cabr/historyculture/images/Foggy_Lighthouse_RESIZED.jpg.
Zeile 4: Alle Buttons bekommen auf Ihrer Seite die Hintergrundfarbe `cornflowerblue` und die Textfarbe aliceblue.
Zeile 5: Wenn Sie mit Hilfe der Maus über einen Link bewegen, wird der Hintergrund `wheat`-farbig und der Text wird rot.

#body
{
background-image:url(http://artgraphica.net/images/lighthouse-on-cliff/light-house-drawing-demo.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right top;
}

dddd

Erklärung:
background-image:url(http://artgraphica.net/images/lighthouse-on-cliff/light-house-drawing-demo.jpg);
Diese Zeile stellt den Hintergrund ein. In diesem Beispiel ist eine Zeichnung eines Leuchtturms.

background-repeat:no-repeat;
Diese Zeile stellt ein, ob das Foto ständig wiederholt werden soll. Mit `no-repeat` geben wir an, dass wir es nur 1x wollen.

background-attachment:fixed;
Diese Zeile sorgt dafür, dass der Hintergrund stillsteht, wenn wir den Rollbalken verschieben.

background-position:top right;
Diese Zeile platziert das Foto in die rechte obere Ecke. `top right` in oben aufgeführtem Beispiel können Sie verändern in

left top - links oben
left center - links zentriert
left bottom - links unten
right top - rechts oben
right center - rechts zentriert
right bottom - rechts unten
center top - Mitte oben
center center - Mitte zentriert
center bottom - Mitte unten