CSS Links

Mit CSS können Links auf verschiedene Weise gestaltet werden.

Text Link Text Link -Schaltfläche Link - Taste

Styling Verbindungen

Die Links können mit einem beliebigen CSS - Eigenschaft (zB gestylt werden color , font-family , background , etc.).

Beispiel

a {
color: hotpink;
}

Versuch es selber "

Darüber hinaus können Verbindungen anders sein Stil je nach welchem Zustand sie sich befinden.

Die vier Links Zustände sind:

a:link - eine normale, nicht besuchter Link
a:visited - ein Link hat der Benutzer besucht
a:hover - ein Link , wenn der Benutzer den Mauszeiger über sie
a:active - ein Link in dem Moment ist es angeklickt

Beispiel

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Versuch es selber "

Wenn Sie den Stil für mehrere Verbindungszustände einstellen, gibt es einige Regeln, um:

a:hover MUSS kommen nach a:link und a:visited
a:active muss nach kommen a:hover

Textdekoration

Die text-decoration Eigenschaft ist vor allem zu entfernen Unterstreichungen von Links verwendet:

Beispiel

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Versuch es selber "

Hintergrundfarbe

Die background-color Eigenschaft kann verwendet werden , um eine Hintergrundfarbe für Links zu spezifizieren:

Beispiel

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Versuch es selber "

Erweitert - Link-Buttons

Dieses Beispiel zeigt eine fortgeschrittenere Beispiel, in dem wir mehrere CSS-Eigenschaften anzuzeigen Links als Boxen / Tasten kombinieren:

Beispiel

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Versuch es selber "