Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

URL der Hyperlinks sichtbar machen

Hypertext gibt es nicht auf Papier, sondern nur in elektronischen Medien. Sobald Sie eine Webseite ausdrucken, verliert der Hypertext das »Hyper« und wird ganz normaler Text. Die Links auf einer ausgedruckten Webseite sind dann zwar nach wie vor unterstrichen, aber Sie können draufdrücken, so viel Sie wollen, Sie springen nirgendwo hin.

Die folgenden CSS-Regeln gestalten die Hyperlinks und machen in einigen Browsern die URL des Hyperlinks auf dem Ausdruck sichtbar.

ToDo: URLs der Hyperlinks sichtbar machen
  1. Geben Sie am Ende des Stylesheets die folgenden CSS-Regeln ein:

    a {
      color: black ;
      text-decoration: none;
    }
    a[href]:after {
      content:" [Adresse: "attr(href)"] "; /* [URL] nach dem Linktext */
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten in der Druckvorschau eines Browsers.

Die erste Regel ist einfach, die zweite hingegen wirkt auf den ersten Blick eher unübersichtlich. In Browsern, die :after verstehen, gibt sie direkt hinter dem Text in eckigen Klammern die URL des Links aus:

Abbildung 10.6: Die URL steht in eckigen Klammern auf Papier
Abbildung 10.6: Die URL steht in eckigen Klammern auf Papier

Der Selektor a[href]:after enthält gleich zwei neue Dinge:

  • a[href] ist ein sogenannter Attribut-Selektor und selektiert alle a-Elemente , die das Attribut href enthalten.
  • :after ist ein Pseudoelement, mit dem Sie nach einem Element beliebigen Inhalt einfügen können, der mit der Eigenschaft content definiert wird.

Die Deklaration content:" [Adresse: "attr(href)"] "; ist nicht ganz so kompliziert, wie sie auf den ersten Blick aussieht. Sie bewirkt Folgendes:

  • content sagt dem Browser, dass er auf der Webseite Inhalt einfügen soll.
  • Der einzufügende Inhalt steht nach dem Doppelpunkt, und zwar in Anführungsstrichen:
    " [Adresse: "attr(href)"] ".
    Der Browser soll also eine Leerstelle, eine eckige öffnende Klammer und das Wort Adresse ausgeben, gefolgt von Doppelpunkt und Leerstelle. Nach dem Wert attr(href) kommt dann – wieder in Anführungsstrichen – eine schließende eckige Klammer und noch eine Leerstelle.
  • attr(href) heißt auf Deutsch so viel wie »Schreibe an dieser Stelle den Wert des Attributs href hin«, also die URL des Hyperlinks.