Wie Sie einen Link mit CSS formatieren

Web-Seite Hyperlinks besitzen viele Eigenschaften, die Sie formatieren können. Sie können Farbe, Unterstreichung, Hintergrund und viele weitere Aspekte der Darstellung mit CSS ändern. Hier sind ein paar Tipps, die Ihnen den Einstieg.

Anweisungen

Link-Stile für Ihre links

1 Der CSS-Selektor für Hyperlinks ist die A-Auswahl. Die korrekte Bezeichnung ist Anker, nicht anbinden, aber A-Elemente werden häufig als Links bezeichnet. A-Elemente können mit CSS Selektoren der Pseudo-Klasse, basierend auf dem Status der Verbindung ausgerichtet werden. Die am häufigsten verwendeten Pseudo-Klassen verwenden diese CSS-Selektoren:

a: Linkein: besuchtena: Hovera: aktive

2 CSS-Regeln für verschiedene Staaten in Verbindung bestimmen Schriftart, Text-Dekoration (ob der Link unterstrichen wird), Farbe, Hintergrundfarbe oder Hintergrundbild, zeigen Sie Eigenschaften wie Inline oder Block, Rahmen, Polster, Marge und anderen CSS-Eigenschaften

3 Dieser einfache Satz von Regeln macht zuerst ein Element, die in Fettschrift angezeigt. Es geht dann durch die Verknüpfung der einzelnen Staaten Festlegen verschiedener Farben und Text-Dekoration-Werte für die einzelnen Zustände.

ein {}

font-weight: bold; }

a: link {}

color: #660066; text-decoration: none;

}ein: {besucht

color: #663366; text-decoration: none;

}a: hover {}

color: #660066; text-decoration: underline;

}a: active {}

color: #660066; text-decoration: none;

}

4 Wie in den Beispielen in Schritt 3 gilt für alle Links auf einer ganzen Seite. Eigenschaften wie Hintergrundfarbe, Rahmen und andere können alle Regeln wie im Beispiel in Schritt 3 hinzugefügt werden.

Link-Stile für bestimmte Bereiche einer Webseite

5 Die meisten Webseiten werden angeordnet, in Abteilungen oder Bereichen, die mit einer Id oder Klasse identifiziert werden können. Wenn Sie Verknüpfungen in ein Div oder andere Webseite-Abschnitt identifiziert mit einer Id oder Klasse gelegt haben, können Sie untergeordnete Selektoren um Stil die Beziehungen Regeln, die gelten nur in diesem Abschnitt erstellen.

6 Das Bild bei der Eröffnung dieses Artikels zeigte ein Beispiel für eine Seite mit Links mit verschiedenen Stilen basierend auf untergeordneten Selektoren. Davon ausgehen Sie, dass die beiden Bereiche der Webseite mit Divs mit zugewiesenen Ids erstellt wurden. Inhalte Div verwendet die Id "Inhalt" und das Navbar Div Id "Navbar."

7 Verwendung der Id (oder Klassen), die verschiedenen Abteilungen einer Webseite erstellen von Selektoren, die arbeiten nur in diesem Teil der Seite zu identifizieren. Mit den Annahmen, die in Schritt 2 würde Regeln für diese Selektoren verschiedene Stile in zwei Bereichen einer Seite erstellen:

Inhalt ein: Linkcontent ein: Visitedcontent ein: Hovercontent ein: Activenavbar ein: Linknavbar ein: Visitednavbar ein: Hovernavbar ein: aktive 8 Angenommen Sie, Ihre Seite eine Klasse namens "Blogpost" für jeden Eintrag verwendet. Sie können die Links einzeln für genau diese Bereiche der Seite zu formatieren. Untergeordnete Selektoren für die Links in nur diesem Bereich der Seite könnte wie folgt aussehen:

.blogpost ein: Link.blogpost ein: besuchten.blogpost a: Hover.blogpost ein: aktiv

Tipps & Warnungen

• Eine weniger gebräuchliche Pseudo-Klassenselektoren ist ein: Fokus.
• Um herauszufinden, wie man einen Link wie ein Navbar anzuzeigen, finden Sie im Artikel wie Sie eine Liste mit CSS formatieren
• Für optimale Ergebnisse zu erzielen, halten Sie die Regeln in Ihrem Stylesheet in dieser Reihenfolge: L-V-H-A, oder Link, besucht, bewegen, aktiv.