http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

Главная Новости

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

Опубликовано: 01.09.2018

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

Ссылки могут находиться в 4 состояниях:

Свойства

В каком состоянии будет ссылка

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

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

Цвет ссылки в css.

С помощью CSS вы можете добавить к каждому свойству цвет ссылки. Смотрите оформление на примере:

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style> a:link {color:#006400;} /* не посещенная ссылка */ a:visited {color:#FFFF00;} /* посещенная ссылка */ a:hover {color:#FF0000;} /* ссылка при наведении на нее мышкой */ a:active {color:#сссссс;} /* нажатая ссылка */ </style> </head> <body> <p><a href="#">ссылка</a></p> </body> </html>

Разъяснение :

a:link – это свойство ссылки;

color:#006400; - это оформление ссылки, которое ставится между скобками {}.

Результат :

○ не посещенная ссылка a:link будет зеленого цвета;

○ посещенная ссылка a:visited  будет желтого цвета;

○ ссылка, при наведении на нее мышкой, a:hover  будет красного цвета;

○ нажатая ссылка a:active будет серого цвета.

Цвет фона ссылки в css.

Этот метод часто используется для создания меню или кнопок на веб-сайтах. Для этого воспользуемся правилом background-color.

Для примера пропишем правило background-color для свойства a:link и a:hover .

Пример :

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style> a:link { color:#ffffff; background-color:#000000; } /* не посещенная ссылка */ a:visited {color:#FFFF00;} /* посещенная ссылка */ a:hover {color:#000000; background-color:#FF704D; } /* ссылка при наведении на нее мышкой */ a:active {color:#сссссс;} /* нажатая ссылка */ </style> </head> <body> <p><a href="#">ссылка</a></p> </body> </html>

Результат :

Если навести курсор мышки на ссылку, то цвет фона ссылки изменится.

Как изменить размер ссылки?

Здесь тоже ничего сложного нет. Для того, чтобы изменялся размер ссылки при наведении на нее мышкой, воспользуемся правилом font-size для свойства a:hover .

Пример :

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style> a:link {color:#006400;} /* не посещенная ссылка */ a:visited {color:#FFFF00;} /* посещенная ссылка */ a:hover {color:#FF0000; font-size: 25px; } /* ссылка при наведении на нее мышкой */ a:active {color:#сссссс;} /* нажатая ссылка */ </style> </head> <body> <p><a href="#">ссылка</a></p> </body> </html>

Результат :

Если навести курсор мышки на ссылку, тогда ее размер увеличится на 25 пикселей (размер можете выставлять на ваше усмотрение).

Ссылка без подчеркивания.

Также CSS дает возможность сделать ссылку без подчеркивания. Для этого воспользуемся правилом text-decoration для свойства a:link .

Пример :

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style> a:link { color:#006400; text-decoration:none; /* убираем подчеркивание */ } /* не посещенная ссылка */ a:visited {color:#FFFF00;} /* посещенная ссылка */ a:hover {color:#FF0000;} /* ссылка при наведении на нее мышкой */ a:active {color:#сссссс;} /* нажатая ссылка */ </style> </head> <body> <p><a href="#">ссылка</a></p> </body> </html>

Результат :

Ссылка отображается в виде простого слова, без какого-либо подчеркивания.

Если вы хотите сделать, чтобы при наведении курсора появлялось подчеркивание, тогда добавьте правило  text-decoration для свойства  a:hover .

Пример :

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style> a:link { color:#006400; text-decoration:none; /* уберем подчеркивание */ } /* не посещенная ссылка */ a:visited {color:#FFFF00;} /* посещенная ссылка */ a:hover { color:#FF0000; text-decoration: underline; /* ссылка будет подчеркнутой */ } /* ссылка при наведении на нее мышкой */ a:active {color:#сссссс;} /* нажатая ссылка */ </style> </head> <body> <p><a href="#">ссылка</a></p> </body> </html>

Изменение цвета подчеркивания.

Не знаю, пригодится ли вам этот метод  для сайта, но для общего развития вам нужно это знать.

Пример :

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style> A:link { color: #0000FF; text-decoration: none; } A:hover { color: #cc0000; text-decoration: underline; } .link { color: #0000FF; } </style> </head> <body> <p><a href="#"><span class="link">Ссылка</span></a></p> </body> </html>

Результат :

Цвет ссылки при наведении на нее мышкой, не изменится, но зато появится подчеркивание другим цветом.

Ссылки разных цветов и размеров.

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

Пример :

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style type="text/css"> A { font-size: 18px; color: #cc0000; } A.link1 { font-size: 15px; color:#228B22; } A.link2 { font-size: 12px; color: #0000FF; } </style> </head> <body> <p>| <a href="#">Ссылка 1</a> | <a href="#" class="link1">Ссылка 2</a> | <a href="#" class="link2">Ссылка 3</a> |</p> </body> </html>

Результат :

Как сделать изображение ссылкой?

Заменить текстовую ссылку можно изображением (рисунком). Изображение должно быть прописано в коде между тегами <a>  и  </a> , смотрите в примере.

Пример :

<html> <head> <title>Свойства и оформление ссылок в CSS</title> <style type="text/css"> A IMG { border: 0; } /* убрать рамку для всех изображений */ </style> </head> <body> <p><a href="#"><img src="images/kartinka.gif" width="40" height="40" alt="изображение в качестве ссылки"></a></p> </body> </html>

Результат :

Результат, я думаю, и так всем ясен. Картинка становится активной ссылкой.

Этот метод можно использовать для графического меню или кнопок на веб-сайте.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css , для начинающих , основы

Карта
rss