CSS Spinki do mankietów

❮ Poprzedni Następny rozdział ❯

Z CSS, połączenia mogą być stylizowany na różne sposoby.

Text Link Text Link Link przyciskowy Link przyciskowy

Stylizacja Linki

Linki mogą być urządzone z jakiejkolwiek własności CSS (np color , font-family , background , itp).

Przykład

a {
color: hotpink;
}

Spróbuj sam "

Ponadto, połączenia mogą być różnie w zależności od stylu w jakim stanie są one.

Cztery stany są linki:

a:link - normalny, nieodwiedzonych Link
a:visited - link użytkownik odwiedził
a:hover - link, gdy użytkownik najedzie myszą nim
a:active - link moment zostanie kliknięty

Przykład

/* 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;
}

Spróbuj sam "

Ustawiając styl dla kilku państw linków, istnieją pewne zasady zamówienie:

a:hover muszą pochodzić po a:link oraz a:visited
a:active musi pochodzić po a:hover

Dekoracja tekstu

text-decoration nieruchomość jest głównie stosowany do usuwania podkreślenia z linkami:

Przykład

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Spróbuj sam "

Kolor tła

background-color nieruchomość może być używana do określenia kolor tła dla linków:

Przykład

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Spróbuj sam "

Zaawansowane - Link Przyciski

Ten przykład pokazuje, bardziej zaawansowany przykład, w którym możemy połączyć kilka właściwości CSS do wyświetlenia linków jak pudełka / przycisków:

Przykład

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;
}

Spróbuj sam "