Wie style ich einen Link? - Eine Schritt-für-Schritt-Anleitung (Tutorial)

Wenn du nur wenige Links hast, so kannst du sie schön am oberen Rand des Bildschirms positionieren, wie hier zu sehen. Das ist Schritt 1. Habe also etwas Geduld, denn das Menu sieht noch gar nicht nach einem Menu aus, aber das wird schon. Wir werden das erarbeiten, zusammen, wenn du die Energie aufbringst, diesem Tutorial zu folgen. Das Menu oben auf der Seite zu platzieren, ist im Web normal und man sieht diese Struktur oft, wenn man auf einem größeren Bildschirm surft. Wenn du aber mehr als 4-5 Links hast, die auch noch einen längeren Text beinhalten, so musst du schon umdenken, denn auf 300 CSS-Pixel Breite passt ein solches längliches Menu nicht hin. Dabei gilt es auch die kleineren Geräte wie Handys und Tablets im Auge zu behalten. Denn auch diese Menschen, möchtest du mit deinem Layout und deinen Inhalten ansprechen. Auf einem großen Bildschirm sieht so ein Layout toll aus. Aber auf einem kleinen Handy - und mittlerweile surfen wohl mehr Menschen mit ihrem Handy als mit einem PC mit PC-Bildschirm - sieht es nicht gut aus, wenn die Links dann in die nächste Zeile rücken und sich vielleicht auch noch überschneiden und unlesbar und unanklickbar werden. Bei einer Bildschirmgröße von ca. 300 Pixeln Breite sieht es nämlich schon so aus, dass 3 Links für den oberen Bildschirmrand zu viel sind. Und wenn du lange Links hast, werden sie definitiv in die nächste Zeile springen. Was du auch im Auge behalten solltest: Suchmaschinen wie Google und Bing wollen ihren Nutzern auch möglichst eine gute Surferfahrung bieten. Sie haben Programme, die die Nutzbarkeit deiner Seite vorab schon unter die Lupe nehmen und danach deine Seite beurteilen. Sind die Links beispielsweise nicht anklickbar, so scheidet deine Seite schon aus dem Rennen aus. So hart das klingt, es ist so. Damit du nicht viel klicken und suchen musst, kannst du den Quellcode dieser Seite hier einsehen.

Was haben wir hier gemacht?

Allgemeine Stildefinitionen

Noch ist das CSS ziemlich übersichtlich. Dafür ist es aber noch unflexibel. Das allererste, was wir vornehmen, ist ein CSS-Reset. Dadurch bekommst du die Freiheit, jegliche Abstände selber zu bestimmen. Du hast dann natürlich auch Verantwortung, denn Opera oder Internet Explorer sowie die ganze Browserschar ist nun aus dem Dienst entlassen und du hast übernommen. Die Abstände werden nun nicht mehr durch das browserinterne Stilesheet gesteuert. Wir haben eine Klasse für Text erstellt und benutzen diese z.B. in einem P-Element wie diesem. So bekommen wir weißen Text auf grauem Hintergrund. Wie du sehen kannst, haben die Links noch keinen Seitenabstand und kleben am Rand. (Siehe ganz oben.) Dafür haben wir aber den Text 5 Pixel vom Rand abgehoben und auch die Überschriften H1 und H2 haben ihren eigenen Stil bekommen mit Padding, Farbe und Hintergrundfarbe ein markantes Erscheinungsbild.


/*css reset to default all NULL*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

.text { 
   color:white;
   background:#555555;
   padding:5px;
   padding-bottom:15px;
}

h1{
   padding:20px;
   background:#30143C;
   color:white;
}
h2 { 
   padding:10px;
   background:#75143C;
   color:white;
}

Das BODY-Element ist auch ein sehr allgemeines Element und es betrifft das gesamte Dokument, auch hier ist Vorsicht geboten, da du mit diesem Element allen Elementen einen Stil (ein Aussehen) gibst. In der Abkürzung CSS (Cascading Style Sheets) ist das Wort Kaskade drin. Dieses Wort bezeichnet einen Wasserfluß oder auch Treppen, die stufenweise von oben nach unten verlaufen. Da alle Elemente Kinder und Abkömmlinge vom BODY-Element sind, ist BODY in der Kaskade oben und die anderen Elemente unten. Nicht alle, aber viele Stildefinitionen, werden von oben nach unten weitergegeben oder vererbt. Man spricht von inheritance. Wir färben den Hintergrund der gesamten Seite gelb. Wenn wir also explizit keinen Hintergrund für Elemente definieren, wird dieser gelb sein.


body { 
background:#FFFF95;
}

Kaskade zur Veranschaulichung der CSS-Kaskade Bildrechte Kaskade zur Veranschaulichung der CSS-Kaskade Bildrechte

Ein Stil für das PRE-Element

Das PRE-Element ist ein Element, mit dem man vorsichtig sein sollte. Elemente wie P oder DIV drücken überflüssige Leerzeichen und Zeilenumbrüche einfach weg. Sie haben aufgehört zu existieren. Ein einziges darf übrig bleiben und hat Bestand. Nich so bei PRE. PRE lässt alles, was du in deinem Editor schreibst, so wie es ist, mit Leerzeichen und Zeilenumbrüchen, weshalb sich das Element für Code gut eignet. Da der Text so dargestellt wird, wie er ist, solltest du "overflow:scroll;" einbauen, denn wenn Text zu lang ist, wird er länger als 375 Pixel sein, was die Breite eines gängigen Geräts ist. Dann wird der Text sich Platz schaffen und die Seitenbreite vergrößern, was nicht erwünscht ist. Du musst also immer damit rechnen, dass kleine Geräte auf deine Seite surfen. Der Befehl "overflow:scroll;" bewirkt, dass der Text am Bildschirmrand abgeschnitten wird und man ihn aber dennoch durch Scrollen erreichen kann (und lesen, wenn man möchte).


pre{ 
    overflow:scroll;
    background-color:#0E4361;
    border: solid 1px #2C4E5A;
    padding-left:10px;
    color:#67F1BF;
    font-size:1.6em;
}

Achtung bei der Farbgebung

Ich denke, was die Ästhetik der Farben anbelangt, möge es ausreichen zu sagen, dass jeder seine eigenen Farbvorlieben und -Ideen hat und diese auch umsetzen sollte und sich nicht an irgendwelchen "Richtlinien" orientieren sollte, wie denn eine "gute" Seite auszusehen habe. (Das ist Freiheit der Expression.) Andererseits gibt es aber auch ein wichtiges Kriterium, dass man immer im Kopf behalten sollte, besonders bei der Farbgebung, zumal es allgemeingültig ist: Benutze nie unlesbare Kombinationen, wie z.B. grüne Farbe auf rotem Hintergrund oder umgekehrt. Davon abgesehen, dass Menschen mit Rot-Grün-Sehschwäche nichts zu lesen bekommen, ist es nicht zweckdienlich, da auch andere Menschen das nicht einfach lesen können. Eine andere allgemeingültige Regel besagt, dass man Dinge einfach gestalten muss. Diese Regel ist eine aus der Notwendigkeit - also der Natur der Dinge - resultierende und sich ganz natürlich ergebende Regel. Es sei denn, man ist psychologisch zu einer verkorksten Komplexität erzogen. Wenn ich etwas einfach gestalte, so behalte ich selbst den Überblick und andere verstehen schnell!

Die Links

Das Menu selbst haben wir mit einem DIV-Element eingerahmt, welches mit einer ID (eine Markierung) versehen ist.

<div id="menu">
<a href="https://de.wikipedia.org/wiki/Datei:Nymphenburg-Suedlicher_Kabinettsgarten_Kleine_Kaskade-1.jpg" target="_blank">Bild</a>
<a href="http://www.HTML.primitivecode.com/CSS" target="_blank">lernen</a>
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Farben#Farbschlüsselwörter" target="_blank">Schlüsselwörter</a>
</div>

Die id musst du mit einer Raute definieren, dann werden die hier definierten Eigenschaften auf das Element <div id="menu"> angewendet.


#menu {
  background: #444444;
}
   

Links und Farbe

Warum brauchen Links farbe? Schau mal was passiert, wenn du mit der Maus (dem Mauszeiger) drüberfährst. Sie färben sich Gold, nicht wahr. Dadurch siehst du deutlich, dass es sich bei dem Text oben auf der Seite um Links handelt. Wenn du einen der Links anklickst, so kannst du das auch sehen. Alle Seiten, die du besucht hast, färben sich DeepPink. Links, die nicht angewählt wurden, sind lime, ein penetrantes Grün. Und wenn ein Link den Fokus hat, ist er gelb. Folgender Code bewirkt dieses magische Verhalten:


   #menu a:link {color:lime}
   #menu a:visited {color:DeepPink}
   #menu a:focus {color:yellow}
   #menu a:hover {color:Gold}   
   #menu a:active {color:white}
   

Beachte, dass du diese Reihenfolge beibehalten musst, denn sonst funktioniert das ganze nicht. Viel haben wir schon in dieser Lektion über das DOM gelernt. Vor allem hast du gelesen, dass Elemente Nachfahren haben. Das A-Element ist so ein Element. Es ist ein Kindelement des DIV-Elementes mit der ID "menu" (<div id="menu">). Wenn du genau schaust, siehst du, dass zwischen #menu (alle Elemente mit der ID "menu") und a (alle Links) kein Komma ist. Das bedeutet, dass z.B. "#menu a" eine Einheit bilden. Wenn du Eigenschaften an die Elemente zuweist, muss der Browser verstehen, welche Elemente du genau meinst. Mit dieser Kombination bekommen alle A-Elemente den Stil, die gleichzeitig Nachfahren (z.B. alle Kindelemente) des Elementes mit der ID menu sind. Jetzt kannst du noch sogenannte "Pseudoklassen" definieren. Zwischen Element und Pseudoklasse steht ein Doppelpunkt. Unsere Pseudoklassen sind link, visited, focus, hover und active. Die Reihenfolge der Pseudoklassen ist wichtig für deren Funktionieren. Link bedeutet der nackte und unberührte Link, dessen Farbe lime definiert wird. Visited ist der schon besuchte Link, dessen Farbe DeepPink definiert wird. Focus ist, wenn der Link den Fokus hat, der Link also das Element ist, mit dem zuletzt eine Interaktion stattgefunden hat, dessen Farbe yellow definiert wird. Alle schon besuchten Links sind also entweder Yellow oder DeepPink. Hover ist der Link, über den du mit der Maus fährst, dessen Farbe Gold definiert wird. Und active bezeichnet das Element, dass du gerade betätigst, dessen Farbe schließlich white definiert wird.