CSS связи

❮ Предыдущая Следующая глава ❯

С помощью CSS, ссылки могут быть оформлены по-разному.

Текстовая ссылка Текстовая ссылка Ссылка Кнопка Кнопка ссылки

Стайлинг Ссылки

Ссылки могут быть стилизованы с любого свойства CSS (например , color , font-family , background и т.д.).

пример

a {
color: hotpink;
}

Попробуй сам "

Кроме того, ссылки могут быть оформлены по- разному в зависимости от того, в каком состоянии они находятся.

Четыре ссылки состояния:

a:link - нормальная, непосещенная ссылка
a:visited - ссылку пользователь посетил
a:hover - это связующее звено , когда пользователь Мышки над ним
a:active - это связующее звено момент она нажата

пример

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

Попробуй сам "

При установке стиля для нескольких состояний ссылок, есть некоторые правила порядка:

a:hover ДОЛЖЕН прийти после того, как a:link и a:visited
a:active ДОЛЖЕН прийти после того, как a:hover с a:hover

Текст украшения

text-decoration свойство в основном используется для удаления подчеркивания из ссылок:

пример

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Попробуй сам "

Фоновый цвет

background-color свойство может быть использовано , чтобы указать цвет фона для ссылок:

пример

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Попробуй сам "

Дополнительно - Кнопки Link

Этот пример демонстрирует более продвинутый пример, когда мы совмещаем несколько свойств CSS для отображения ссылок, как коробками / кнопок:

пример

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

Попробуй сам "