Оформление ссылок в CSS. Цвет ссылки. Ссылка картинка в CSS

CSS

У ссылок в CSS существуют псевдоклассы, они определяют условие для элемента, к которому применяется стиль.

а: link {стиль ; } — оформление обычной ссылки
аactive {стиль ; } — оформление ссылки в момент нажатия
а: hover {стиль ; } — оформление ссылки при наведении курсором
а: visited {стиль ; } — оформление посещённой ссылки

— Цвет ссылки в CSS —

Оформление ссылок в CSS. Цвет ссылки. Ссылка картинка в CSS

Пример:

a: link
{color: blue; }
a: active
{color: red;
text-transform: uppercase;}
a: hover
{text-decoration: underline; }
a: visited
{color: gray; }

Все ссылки будут синего цвета
В МОМЕНТ НАЖАТИЯ ССЫЛКА СТАНЕТ КРАСНОЙ И БОЛЬШИМИ БУКВАМИ
При наведении мышкой она будет синего цвета и  подчёркнута
Посещенная ссылка будет серого цвета

Вот что я хотел показать и рассказать про оформление стиля и цвета ссылки в CSS.

— Картинка, как ссылка —

Также можно сделать картинку ссылкой. При наведении курсора, она будет меняться на другую картинку. Это метод можно использовать  для меню и кнопок на сайте. Пример:

>> В CSS пишем.

a.stepa {
background:url(/wp-content/uploads/banner-3.gif);
background-repeat:no-repeat;
width:200px;
height:38px;}

a.stepa:hover {
background:url(/wp-content/uploads/bannertitle-4.gif);
background-repeat:no-repeat;
width:200px;
height:38px;
}

>> В HTML пишем.

<p class=»stepa»><a href=»stop.html»></a></p>

Читайте также:  CSS - курсор (cursor). Cобственные курсоры - картинки (пользовательские курсоры). Формат cursor ANI, CUR и SVG.
Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий