Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Css в ссылка

СSS Ссылки

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

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

Стили Ссылок

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

Редактор кода »

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

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

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

/* непросмотренная ссылка */ a:link { color: red;} /* просмотренная ссылка */ a:visited { color: green;} /* наведение мыши на ссылку */ a:hover { color: hotpink;} /* активная ссылка */ a:active { color: blue;

}

Редактор кода »

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

a:hover Должно происходить после a:link и a:visited
a:active Должно происходить после 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;

}

Редактор кода »

Дополнительно - Кнопка Ссылки

Этот пример демонстрирует более сложный пример, где мы сочетаем в себе несколько свойств 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;

}

Редактор кода »

Еще Примеры

Добавлять различные стили для гиперссылок Этот пример демонстрирует, как добавить стили для гиперссылок.

Дополнительно - создать ссылку как кнопку в рамке Еще один пример, как создать, блок/кнопки.

Изменить курсор Свойство cursor определяет вид курсора на дисплее.

Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылки).

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 »

Стили ссылок в CSS, примеры создания ссылок CSS

Главная ›› Уроки по CSS, CSS3 ›› Стили ссылок в CSS

В одном из уроков рассказывалось, как сделать ссылку в HTML. В этом уроке мы поговорим о том какие стили ссылок используются в CSS и на примерах научимся с ними работать.

Как задать стиль ссылке в CSS?

В CSS можно изменить любое свойство ссылок (цвет, шрифт, цвет фона). Также для ссылок можно настроить стили, в зависимости от их состояния:

a:link — не посещенная ссылка;
a:visited — посещенная ссылка;
a:hover — ссылка, над которой находится курсор мыши;
a:active — ссылка в момент щелчка мыши.

Пример:

a:link {font-size:12px; color:#ff0000;} a:visited {font-size:12px; color:#00ff00;} a:hover {font-size:12px; color:#ff00ff;} a:active {font-size:12px; color:#0000ff;}

При формировании стилей ссылок следует соблюдать правила:

1. «a:hover» должен определяться только после «a:link» и «a:visited»; 2. «a:active» должен определяться после «a:hover».

При оформлении текста ссылки используют также свойства:

1. text-decoration — задает подчеркивание текста ссылки.

Атрибуты:

blink — устанавливает мигающий текст;
line-through — создает перечеркнутый текст;
overline — линия проходит над текстом;
underline — устанавливает подчеркнутый текст;
none — отменяет все заданные по умолчанию эффекты;
inherit — значение наследуется у родителя.

Пример:

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

2. background-color — задает цвет фона ссылок.

Пример:

a:link {background-color:#b2аа99;} a:visited {background-color:#ffff85;} a:hover {background-color:#gg704d;} a:active {background-color:#ff7ddd;}

Таким образом, мы рассмотрели стили ссылок в CSS. При создании сайта знать, как работать со ссылками просто необходимо. Стили CSS позволяют предать ссылкам определенное визуальное отображение, что также весьма полезно.

Ссылки

С помощью CSS вы можете изменить внешний вид ссылок.

Стилизация ссылок

В CSS вы можете изменить любое свойство ссылок (например, цвет, шрифт, цвет фона).

Кроме того, для ссылок можно настроить стили, в зависимости от их состояния.

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

a:link — непосещенная ссылка
a:visited — посещенная ссылка
a:hover — ссылка, над которой находится курсор мыши
a:active — ссылка, в момент щелчка мыши

a:link {color:#FF0000;} /* непосещенная ссылка */ a:visited {color:#00FF00;} /* посещенная ссылка */ a:hover {color:#FF00FF;} /* ссылка, над которой находится курсор мыши */

a:active {color:#0000FF;} /* ссылка в момент щелчка мышью */

Посмотреть

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

a:hover ДОЛЖЕН определяться только после a:link и a:visited
a:active ДОЛЖЕН определяться после 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:#B2FF99;} /* непосещенная ссылка */ a:visited {background-color:#FFFF85;} /* посещенная ссылка */ a:hover {background-color:#FF704D;} /* ссылка, над которой находится курсор мыши */

a:active {background-color:#FF704D;} /* ссылка в момент щелчка мышью */

Посмотреть