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 ENGINE="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>
Результат:
Результат, я думаю, и так всем ясен. Картинка становится активной ссылкой.
Этот метод можно использовать для графического меню или кнопок на веб-сайте.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222436 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187486 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559
Добавить комментарий
Метки: css, для начинающих, основы
Спасибо, Александр за комментарий. Планирую еще пару постов для WooCommerce…
⇒ Открыть статью ⇐