English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 基础教程

CSS 盒子模型

CSS3Grund教程

CSS 参考手册

CSS @规则(RULES)

CSSLinks(Links)

链接或超链接是从一个Web资源页面连接到另一个Web资源页面。

CSS样式链接

链接有四种不同的状态- link, visited, active und hover。这四个状态可以使用锚元素的伪类通过CSS属性设置不同的样式,具体取决于它们所处的状态。

这是与HTML <a>标记关联的CSS伪类,可用于为超链接的不同状态定义不同的样式。

  • a:link —为没有鼠标指针的普通或未访问链接设置样式。

  • a:visited-Stellen Sie den Stil des Links ein, wenn der Benutzer den Link besucht hat, aber keinen Mauszeiger darauf hat.

  • a:hover —Stellen Sie den Stil des Links ein, wenn der Benutzer den Mauszeiger auf den Link bewegt.

  • a:active-Stil für den Link beim Klicken festlegen.

Sie können angeben, welche CSS-Eigenschaften Sie festlegen möchten, z.B.:color,font-family,backgroundund so weiter, mit diesenWählenDefinieren Sie den Stil der Links neu, so wie Sie es mit regulärem Text tun.

a:link {    /* Nicht besuchte Links   */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* Besuchte Links */
    color: #00FF00;
}
a:hover {    /* Maus über dem Link */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* Der aktuelle Klick-Link  */
    color: #0000FF;
}
Testen Sie es heraus‹/›

Die Reihenfolge, in der Stile für mehrere Link-Zustände festgelegt werden, ist wichtig, da die letztlich definierten Stile höheren Priorität haben als frühere CSS-Codes.

Hinweis:Die Reihenfolge der Pseudoklassen sollte normalerweise :link, :visited, :hover, :active, :focus sein

Standard-Link-Stil

In allen gängigen Webbrowsern werden Links auf Webseiten standardmäßig unterstrichen und mit der Standardlinkfarbe des Browsers dargestellt, wenn keine speziellen Stile festgelegt wurden.

Beispielsweise ist die Standardlinkfarbe von Webbrowsern basierend auf Gecko (wie Firefox)- BlauStellt einen nicht besuchten Link darViolettStellt einen besuchten Link darRotStellt den Link dar, der gerade geklickt wird.

Linkfarbe einstellen

Nachfolgender Beispiel zeigt, wie man die Farbe von Links einstellen kann.

a:link {    /* Nicht besuchte Links  */
    color: #FF0000;
}
a:visited {    /*Besuchte Links */
    color: #00FF00;
}
a:hover {    /* Maus über dem Link */
    color: #FF00FF;
}
a:active {    /* Der aktuelle Klick-Link */
    color: #0000FF;
}
Testen Sie es heraus‹/›

Standardunterstreiche von Links entfernen

text-decoration CSS-Eigenschaften werden normalerweise verwendet, um die Standardunterstreiche von Links zu entfernen. Nachfolgender Beispiel zeigt, wie man die text-Eigenschaften der verschiedenen Zustände von Pseudoklassen. CSS-Eigenschaften werden normalerweise verwendet, um die Standardunterstreiche von Links zu entfernen.

a:link {    /* Nicht besuchte Links */
    color: #FF0000;
    text-decoration: none;
}
a:visited {    /* Besuchte Links */
    color: #00FF00;
    text-decoration: none;
}
a:hover {    /* Maus über dem Link */
    color: #FF00FF;
    text-decoration: underline;
}
a:active {    /* Der aktuelle Klick-Link */
    color: #0000FF;
    text-decoration: underline;
}
Testen Sie es heraus‹/›