ru   en   Туристический блог  
Подать заявку в свободной форме
Добро пожаловать, Гость   |   Войти  
 
 

Seodon.ru | Примеры HTML и CSS - Ссылки в CSS

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

видео seodon.ru | Примеры HTML и CSS - Ссылки в CSS

Рейтинг страницы 5 звезд. Урок по созданию: HTML, CSS, jQuery, Google snippet (microdata)

Опубликовано: 12.05.2011 Последняя правка: 16.12.2015



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


Курс по HTML5/CSS3. iframe. Часть 7

Прежде чем вы начнете изучение примеров, хочу сделать небольшое пояснение. Во всех примерах, для большей наглядности, будет использован псевдокласс CSS :hover , который применяется для изменения стилей ссылок при наведении на них курсора мыши. Надо сказать, что подобная практика является обычным явлением и в той или иной степени применяется практически на всех сайтах интернета.

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

В этом примере мы уберем подчеркивание у ссылок, а потом будем добавлять или убирать при наведении курсора мыши.

Пример HTML и CSS: как убрать и добавить подчеркивание у ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - Подчеркивание у ссылок</title> <style type="text/css"> a { color: green } /* цвет ссылок */ .one, .two { text-decoration: none } /* убираем подчеркивание у первых двух ссылок */ .two:hover { text-decoration: underline } /* добавляем его ко второй при наведении */ .three:hover { text-decoration: none } /* убираем подчеркивание у третьей ссылки при наведении */ </style> </head> <body> <div> <a class="one" href="#">Ссылка 1</a> <a class="two" href="#">Ссылка 2</a> <a class="three" href="#">Ссылка 3</a> </div> </body> </html>

Результат примера

Rambler's Top100
Карта
rss