CSS, Body, Links und Divs

Und, noch behalten wie ihr CSS "bedient?" Gut. Man kann mit CSS praktisch alles verändern, aber wir begnügen uns mit ein paar wichtigen Sachen, dem Body, Divs und Links.

CSS im Body

body {background:url(bg.jpg);
background-color:#D2D2D2;
background-attachment: fixed;
background-repeat: no-repeat;

scrollbar-arrow-color:#F4F4F4;
scrollbar-track-color: #D2D2D2;
scrollbar-face-color: #D2D2D2;
scrollbar-highlight-color:F4F4F4;
scrollbar-3dlight-color: #D2D2D2;
scrollbar-darkshadow-color:#D2D2D2;
scrollbar-shadow-color: #BBBBBB;

color:#535353;
line-height:9pt;
font-size:11px;
text-align:justify;
font-family:arial;
}

Hier seht ihr eine Reihe von Attributen Ich werde nicht jedes Attribut erklären was euch jemals über den Weg laufen wird, auch hier bei den Peilosistas. Ihr findet hier eine Liste mit allen Attributen die wir finden konnten, da könnt ihr nachschauen wenn ihr was gefunden habt was ihr noch nicht kennt.
Mit diesen hier wollen wir uns Beispielhaft aber beschäftigen.

Wie bereits bei den Grafiken angekündigt, seht ihr hier die zweite Möglichkeit ein Hintergrundbild einzubinden, und zwar durch

background:url(bg.jpg);

Diese Anweisung sagt dass das Bild bg.jpg als Hintergrund genommen wird (achtet immer auf den korrekten Pfad - liegt eure style.css in einem anderen Verzeichniss, müsst ihr dementsprechend den Pfad ändern). Normalerweise würde sich der Hintergrund natürlich kacheln, aber wir haben vorgesorgt:

background-repeat: no-repeat;

Der Hintergrund wird nur einmal abgebildet und sich nicht wiederholen.

Wenn nun der Besucher einen MEEEEGA großen Apple Cinema Display hat (wie groß is das Ding? 30"?), wird er trotz alledem um das Hintergrundbild nicht weiß sehen, sondern die Farbe die wir mit "background-color:#D2D2D2" eingestellt haben.

Vielleicht liegt unser Inhalt aber auch in einem relativ kleinen Frame und ist größer als die angezeigte Fläche. Dann bekommt ihr automatisch einen Scrollbalken.
Das Atrribut

background-attachment: fixed;

sagt, dass das Hintergrundbild nicht mitscrollen soll, dh, bewegt der Besucher den Scrollbalken wandert es nicht mit sondern bleibt stocksteif stehn. Nur der Text scrollt also.

Darunter befindet sich, apropos Scrollbalken, eine schöne Spielerei die aber NUR im Internet Explorer funktioniert: Farbige Scrollbalken. Wir unterstützen hier, als Firefox Fans, natürlich Browserkompatibilität, allerdings spricht nichts dagegen farbige Scrollbalken einzubauen. Nur kann die außer IE Nutzern niemand sehn.

Darunter seht ihr noch ein paar mehr Attribute: color, line-height,font-size, text-align, font-family. Die geben Schriftfarbe, Schriftgröße, Absatzformatierung (hier: Blocksatz) und Schriftart an. Das ist also nicht anders als wenn man etwas in Word oder Star Office oder was auch immer schreibt. Wenn man irgendwas davon weglässt benutzt der Browser einfach das was ihm voreingestellt ist.

CSS für Links

Jah, endlich kann man die Unterstreichung der Links knicken und auch schöne Farben machen, nicht mehr nur blau und lila (das geht auch in html - aber CSS bietet mehr Möglichkeiten, also gleich das ;D). Hier mal wie so Links aussehen können:

a:link {text-decoration:none; color:#C20000; font-weight:bold}
a:active {text-decoration:none; color:#C20000; font-weight:bold}
a:visited {text-decoration:none; color:#C20000; font-weight:bold}
a:hover {text-decoration:overline underline; color:#2B2B2B; font-weight:bold;}

Es gibt vier verschiedene Linkzustände: der normale Link wenn der Betrachter auf die Seite kommt, der aktive Link wenn der Betrachter draufklickt, den besuchten Link wenn der Betrachter sich die betreffende Seite schonmal angesehen hat und hover, wenn der Betrachter mit der Maus über den Link drüberfährt.

Die "text-decoration" gibt an ob der Link unterstrichen werden soll, ob er nichts drumrum haben soll, oder vielleicht wie hier bei Hover oben und unten eine Linie oder nur oben eine Linie oder durchgestrichen sein soll.
"color" gibt auch hier wieder die Schriftfarbe an, "font-weight:bold" das die Links fett sein sollen.
Damit wisst ihr eigentlich auch schon alles essentielle über Links - man kann ihnen natürlich so viele Attribute geben wie man lustig ist - auch Hintergründe oder Ränder. Die passenden Attribute findet ihr in unserer CSS-Attribut-Liste.

CSS erlauben es einem Links so dazustellen, das sie sich nicht mehr von der normalen Schrift abheben. Ratschlag: tut das nicht. Niemandem macht es Spaß zu raten ob sich irgendwo ein Link versteckt. Des weiteren lässt sich bei "hover" natürlich eine andere Größe der Schrift oder Fettschrift oder kursiv Schrift einstellen. Wenn ihr das tut, aber in allen anderen Linkzuständen die normale Schrift ohne all diese Attribute einstellt, braucht der Link beim Hovern natürlich mehr platz, das verschiebt den ganzen Text drumrum (falls welcher drumrum ist). Natürlich bleibt euch überlassen ob ihr diese Sachen doch anwenden wollt.

Link

CSS für Divs

div {
color:#ffffff;
width:50%;
padding:5px;
border:1px #000000 solid;
background-color:#C20000;
}

Hier seht ihr eine Formatierung für einen Absatz. Wie schon im Body haben wir eine Textfarbe (color) und eine Hintergrundfarbe (background-color). Zusätzlich sehen wir jetzt hier noch

padding:5px;
width:50%;
border:1px #000000 solid;

Width stellt, wie der Name schon sagt, die Breite des Absatzes ein, in diesem Fall prozentual. Man kann aber auch einen konkreten Pixel-Wert (zB 438px) angeben.
Padding gibt an, ob die Schrift sofort am Rand beginnen soll oder ob oben, an der Seite und unten eine Art "Pölsterchen" sein soll.
Danach folgt die Anweisung einen Rand um den Absatz zu machen, dieser soll einen Pixel breit sein, durchgezogen, und die Farbe C20000 haben. Es gibt noch andere Stile also durchgezogen natürlich, mehr dazu in unserer tollen Tabelle ;D

Man kann das mit der Border übrigens auch anders schreiben:

border-width:1px;
border-color:#000000;
border-style:solid;

Damit bekommt ihr das selbe Ergebnis. Und so sieht der Absatz im Endeffekt aus:

Laberlaberblubb Text

Wir schreiben mal wieder irgendwas damit man sehen kann wie das aussieht.

So! Damit habt ihr ein großes Stück Formatierung geleistet. Nochmal: Wir haben eine Attribut-Tabelle auf der ihr Attribute nachschlagen könnt. Weil jedes einzelne zu erklären wäre sehr viel Arbeit und sinnlos dazu. Wenn man die Styles einmal verstanden hat, ist es überhaupt nicht schwer ein unbekanntes Attribut auf irgendetwas anderes anzuwenden. =)