Benötige Hilfe beim HTML Code im Footer

[at]

Hallo Neuling,

der Anspruch von SelfHTML ist, dir Wissen zu vermitteln, keine Code-Schnipsel. Statt dich aber einfach an das SelfHTML-Wiki zu verweisen, bereite ich dir einen eigenen Einstieg. Im Anschluss daran empfehle ich dir aber das Einsteiger-Tutorial.

Und weil du geschrieben hast, du hättest „keine Ahnung“ davon, fangen wir jetzt ziemlich weit vorne an:

HTML besteht aus Elementen, die meist Text oder andere Elemente enthalten. Deshalb bestehen sie häufig aus einem vorderen und einem hinteren Teil, dazwischen steht der Text. Umgekehrt kann man auch sagen: Der Text wird durch die Elemente strukturiert. Das wiederum kann man auch als Auszeichnung bezeichen und sieht schematisch folgendermaßen aus: <elementname>Elementinhalt</elementname>. Wichtig ist die Anordnung der spitzen Klammern und des Schrägstriches.

Diese Elemente erfüllen innerhalb ihres Dokumentes eine Funktion, im Falle des <a>-Elementes die eines Verweises auf etwas anderes. Das Verweisziel gibt man in einem sogenannten Attribut an, in diesem Fall dem Attribut href, damit beim Betätigen des Verweises tatsächlich eine Verbindung zum im Attributwert angegebenen Ziel aufgebaut wird. Der Attributwert wird meist in Anführungszeichen gesetzt und mittels eines Gleichheitszeichens von der Attributbezeichnung abgetrennt, etwa so: attribut="wert". Notiert wird ein Attribut im öffnenden Teil des Elementes, also nach diesem Schema: <elementname attributbezeichnung="attributwert">Elementinhalt</elementname>. Oder im Falle des <a>-Elementes so: <a href="https://example.org/kontakt">Kontakt</a>. Man darf einem Element auch durch Leerzeichen voneinander getrennt mehrere Attribute zuweisen, nur nicht mehrfach das gleiche.

Mit CSS können die HTML-Elemente gestaltet werden, zum Beispiel der Text zwischen einem <a href="…"> und dem dazu gehörigen schließenden </a> eingefärbt werden. Dafür benötigt man eine CSS-Regel.

Eine CSS-Regel besteht aus einer oder mehreren Eigenschaften, der jeweils ein einfacher oder mehrteilger Wert zugewiesen werden kann, zum Beispiel die Kombination color: #ffffff;, wobei color die Eigenschaft ist und #ffffff ein Farbwert, hier der für weiß. Diese Eigenschaft-Wert-Paare werden mit einem Semikolon abgeschlossen und hinter- oder untereinander geschrieben. Alle Eigenschaft-Wert-Paare, die man einem oder mehreren HTML-Elementen zuweisen möchte, fasst man dann in geschweiften Klammern zusammen, etwa so: { eigenschaft-1: wert-1; Eigenschaft-2: wert-2; … }. Wenn man nur die Textfarbe als weiß definieren möchte, sieht der CSS-Code folgendermaßen aus: { color: #ffffff; }

Nun muss man noch definieren, welchen Elementen man die Eigenschaften mit ihren Werten zuordnen möchte. Deshalb stehen vor der öffnenden geschweiften ein oder mehrere sogenannte Selektoren, der Laie würde sie als Suchmuster bezeichnen. Anhand dieser Suchmuster durchsucht der Browser das HTML-Dokument und weist den gefundenen Elementen die Eigenschaft-Wert-Paare zu.

Um alle <a>-Elemente eines HTML-Dokumentes zu selektieren, notiert man als Selektor einfach ein a, also die Elementbezeichnung aus dem HTML-Code ohne die spitzen Klammern. Der Fachmann spricht von einem Element-Selektor. Die CSS-Regel sähe damit so aus: a { color: #ffffff; }

Weißer Text auf weißem Grund ist aber nicht lesbar. Deshalb sollen die Verweise nur dann weiß eingefärbt werden, wenn sie auf einem hinreichend dunklen Hintergrund stehen. Wenn das HTML-Dokument beispielsweise einen Seitenfuß hat, dann wäre das sinnvollerweise ein <footer>-Element. Diesen könnte man dunkelblau einfärben, und zwar so: footer { background-color: #333366 }

Wenn nun Verweise nur dann eine weiße Textfarbe erhalten sollen, wenn sie sich im Footer befinden, muss der Selektor entsprechend angepasst werden: footer a { color: #ffffff; }. Die Reihenfolge von footer und a sowie das Leerzeichen dazwischen sind dabei entscheidend für das Gelingen. Wäre die Reihenfolge umgekehrt, würden alle <footer>-Elemente selektiert, die sich innerhalb von <a>-Elementen befinden.

Der neue Selektor hat eine höhere Spezifität, das heißt, er lässt den Browser präziser suchen. Eben nicht nur <a>-Elemente, sondern solche, die in einem <footer>-Element stecken. Und diese Spezifität kann weiter erhöht werden. Denn <footer>-Elemente können mehrfach in einem HTML-Dokument vorkommen. Wenn man aber nur in bestimmten <footer>-Elemente die Verweise weiß einfärben möchte, muss man einen Selektor wählen, der noch präziser, also noch spezifischer ist. Die Grundregel dabei ist: Der spezifischere Selektor setzt sich gegenüber dem weniger spezifischen durch.

Wenn man nun eine neue CSS-Regel schreibt, muss man den Selektor also so wählen, dass er zumindest so spezifisch ist, dass er sich gegenüber allen konkurrierenden Regeln durchsetzt. Und nun wären wir wieder an der Stelle, auf die ich dich bereits verwiesen habe, nämlich der Übersicht über die Spezifität. Und ja, das ist kompliziert, aber so ist das eben, wenn man mal eben in WordPress etwas ändern will.

MfG, at