Step 02 - Scrollbalken und Links

4) Was ist wo

Diese Teile des Codes werden jetzt betrachtet:

Diese Sprache ist kein HTML mehr, sondern CSS (Cascading Style Sheet) [mehr zu CSS hier unter 5]

Wer nicht weiss, was Links sind:
Das ist zB ein Link, der aber zu keiner Seite führt
Das ist auch ein Link, der zu Google führt
Ein Link

1) Scrollbalken

Das sind Scrollbalken:

In dem Grundcode unter "Designs Coden" gibt es einmal den Teil, wo die Scrollbalken definiert werden.
Das ist der Teil:

Bei den Scrollbalken finde ich es ziemlich schwierig, jetzt alles nur mit Worten zu erklären, also schaut euch selbst mal an, was womit gemeint ist: Scrollbalken-Generator

Jeder Hex-Code (also zB "#00FF00") steht ja für eine bestimmte Farbe. Man kann die Scrollbalken also farblich so erstellen, wie man es haben möchte.

Wenn ihr den Code dort generieren lasst, bekommt ihr so einen ähnlichen Code raus:

Ihr müsst jetzt bestimmte Zeilen löschen, damit ihr diesen Code für euch benutzen köt. Vergleicht diesen Code einfach mit euren und entfernt alles, was ich auch entfernt habe:

Jetzt ersetzt ihr den Teil einfach aus dem ursprünglichen Code. Das siehr jetzt so aus:

Natürlich könnt ihr auch alle Hex-Werte (diese Zahlen und Buchstaben ergeben eine Farbe, zB #000000 ist schwarz) manuell ersetzen. Probiert einfach mit den Zahlen von 0 bis 9 und den Buchstaben von A bis F rum, es müssen immer 6 Stellen vorhanden sein. Ihr könnt also nur diese Zeichen verwenden: 0 1 2 3 4 5 6 7 8 9 A B C D E F
Also zB könnt ihr euch eure Farbe selbst kombinieren, zB #123456 oder #ABCABC oder #11AA11 oder #1A2B3C (vergesst die Raute nicht!).

2) Links + Effekte

In dem Grundcode gibt es auch einen Teil, bei dem die Links definiert werden. Also welche Farbe die Links haben sollen etc pp.
Das ist der Teil:

Also, das a:link steht für den ganz normalen Link. Wie der Link aussehen soll, wenn man ihn sieht.

a:visited steht für "besucht". Also, wie sich der Link ändern soll, wenn man schon mal drauf geklickt hat. Man kann natürlich auch keine Veränderung machen, dann schreibt man das Gleiche, wie bei a:link hin.

a:hover steht für, wie sich der Link ändern soll, wenn man mit der Maus drüber fährt.

a:active steht dafür, wenn der Link gerade aktiv ist. Also, wenn man gerade draufgeklickt hat und die Seite geladen wird.

3) Jetzt zu den Effekten

color ist ja klar was das heisst: Farbe
Dahinter wird der Hexcode der Farbe hingeschrieben, die man haben möchte.
text-decoration ist halt die Dekoration der Links.
none bedeutet nichts. Also keine Effekte.

Man kann zB Auch text-decoration:underline schreiben. Dann ist der Link unterstrichen, je nach dem, wo man das hinschreibt.
Wenn man text-decoration:underline bei a:hover hinschreibt, wird der Link unterstrichen, wenn man mit der Maus drüber fährt. Wenn man das zB bei a:link hinschreibt, ist ein normaler Link immer untertrichen. Und bei a:visited ist der Link unterstrichen, wenn man den Link schon einmal besucht hat und bei a:active ist er halt unterstrichen, wenn der Link gerade aktiv ist.

Es gibt auch noch die Effekte:
overline = überstrichen (also einen Strich über dem Link)
line-through = durchgestrichen
underline overline = dann bekommt ihr,wie bei diese Homepage, die Links unterstrichen und überstrichen.