Ссылку не подчеркивать html: Ссылки без подчеркивания | htmlbook.ru

Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

Всем привет!
В сегодняшнем уроке я расскажу о том, как оформить ссылки в CSS. Статья очень важная!
Не буду городить лишнего, а сразу приступлю к делу.

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

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

Свойство «COLOR»
Чтобы заменить цвет ссылки воспользуйтесь свойством «color» для селектора «a».

a {color:#006400;/* цвет ссылки */}

Псевдоклассы для ссылок

Хочу познакомить вас с псевдоклассами для ссылок.
Псевдоклассы – это классы, которые определяют динамическое состояние элементов и изменяются с помощью действий пользователя.

Синтаксис:

a:имя_псевдокласса { /* стиль */}

Свойства (имена псевдоклассов):

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

Теперь пример.
Предлагаю для примера показать стандартные ссылки, которые были добавлены через HTML без оформления CSS.

[посмотреть пример]

Теперь изменим оформление ссылок через CSS.

Добавьте вот эту ссылку в HTML код:

<a href="http://stepkinblog.ru/">STEPKINBLOG.RU</a>

Теперь вот этот код в CSS:

a {color:#006400;/* цвет ссылки */}
a:hover {color:#FF0000;/* ссылка при наведении на нее мышкой */}
a:active {color:#cccccc; /* нажатая ссылка */}

Результат:

[посмотреть пример]

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

Свойство «TEXT—DECORATION»
Чтобы убрать подчеркивание у ссылки, воспользуйтесь свойством «text-decoration» со значением «none».

Свойства:

• line-through — перечеркнутый текст;
• overline — подчеркивание над текстом;
• underline  — подчеркнутый текст;
• none – без подчеркивания.

Сейчас я сделаю так, что при наведении на ссылку, подчеркивание исчезнет.

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки при наведении */
}

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

a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: overline; /* Подчеркивание над ссылкой при наведении */
}

 

Размер ссылки

Свойство «FONT—SIZE»
Чтобы увеличить ссылку, достаточно воспользоваться уже известным вам  свойством «font-size»:

 
a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
}

Можно еще добавить к ссылке плавное увеличение (анимация):

transition:all 1s ease; /* плавное увеличение размера в 1 сек. */

Пример:

a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
color: #cc0000; /* цвет ссылки при наведении */
font-size: 28px; /* размер ссылки при наведении */
transition:all 1s ease; /* плавное увеличение размера в 1 сек. */
}

Результат:

[ посмотреть пример ]

Пунктирное подчеркивание у ссылки

Свойство «BORDER—BOTTOM»
Чтобы сделать у ссылки пунктирное подчеркивание при наведении, то вначале нужно убрать подчеркивание, а вместо подчеркивания прописать правило «border-bottom»:

a
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
}
a:hover
{
text-decoration: none; /* Убираем подчеркивание у ссылки */
border-bottom:dashed;/* пунктирное подчеркивание у ссылки */
}

Результат:

[ посмотреть пример ]

Вот и все!
Жду вас на следующих уроках!

Предыдущая запись

Списки в CSS. Основы CSS для начинающих. Урок №10 Следующая запись
Рамка в CSS. Основы CSS для начинающих. Урок №12

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

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>Ссылка</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="#">Ссылка 2</a> |
<a href="#">Ссылка 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"
height="40" alt="изображение в качестве ссылки"></a></p>
</body>
</html>

Результат:

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

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

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

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

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

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

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

Как сделать ссылку подчеркнутой | Все о компьютерной технике

Селекторы псевдо-классов

Псевдо-классы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя, а также может зависеть от расположения элемента в дереве документа. Селекторы псевдо-классов начинаются с двоеточия — » : » и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:

Ссылки

Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:

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

Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.

Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами .

Подчеркивание ссылок

По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.

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

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

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

Ссылки встречаются практически на всех веб-страницах. Ссылки позволяют пользователям щелкать их путь от страницы к странице.

HTML ссылки-гиперссылки

Ссылки HTML являются гиперссылками.

Вы можете щелкнуть по ссылке и перейти к другому документу.

При наведении указателя мыши на ссылку, стрелка мыши превратится в маленькую руку.

Примечание: Ссылка не обязательно должна быть текстом. Это может быть изображение или любой другой HTML-элемент.

HTML ссылки-синтаксис

В HTML ссылки определяются тегом :

Пример

href атрибут указывает адрес назначения ( https://html5css.ru/HTML/ ) ссылки.

текст ссылки является видимой частью (см. наш учебник по HTML).

Щелчок по тексту ссылки отправит вас по указанному адресу.

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

Локальные ссылки

В приведенном выше примере используется абсолютный URL (полный веб-адрес).

Локальная ссылка (ссылка на тот же веб-узел) указывается с относительным URL-адресом (без http://www. ).

Пример

Цвета ссылок HTML

По умолчанию ссылка будет выглядеть так (во всех браузерах):

• Непосещаемая ссылка подчеркнута и синяя
• Посещаемая ссылка подчеркнута и пурпурная
• Активная ссылка подчеркнута и красная

Можно изменить цвета по умолчанию с помощью CSS:

Пример

HTML ссылки-целевой атрибут

Атрибут target указывает, где открыть связанный документ.

Атрибут target может иметь одно из следующих значений:

• _blank — Открытие связанного документа в новом окне или вкладке
• _self — Открывает связанный документ в том же окне/вкладке, в котором он был нажат (по умолчанию)
• _parent — Oручка связанного документа в родительском фрейме
• _top — Открытие связанного документа в полном тексте окна
• framename — Открытие связанного документа в именованном фрейме

В этом примере откроется связанный документ в новом окне обозревателя/вкладка:

Примере

Совет: Если веб-страница заблокирована в рамке, можно использовать target=»_top» для выхода из кадра:

Пример

HTML ссылки-изображение как ссылка

Он является общим для использования изображений в качестве ссылки:

Пример

Примечание: border:0; добавляется для предотвращения IE9 (и более ранних) от отображения границы вокруг изображения (когда изображение является ссылкой).

Названия ссылок

Атрибут title указывает дополнительные сведения об элементе. Информация чаще всего отображается как текст подсказки, когда указатель мыши перемещается над элементом.

Пример

HTML ссылки-создать закладку

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

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

Чтобы сделать закладку, необходимо сначала создать закладку, а затем добавить ссылку на нее.

При щелчке ссылки страница будет прокручиваться в папку с закладкой.

Пример

Сначала создайте закладку с атрибутом id :

Chapter 4

Then, add a link to the bookmark («Jump to Chapter 4»), from within the same page:

Or, add a link to the bookmark («Jump to Chapter 4»), from another page:

Example

Внешние контуры

На внешние страницы можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для ссылки на веб-страницу:

Пример

В этом примере ссылки на страницу, расположенную в папке HTML на текущем веб-узле:

Пример

В этом примере ссылка на страницу, расположенную в той же папке, что и текущая страница:

Пример

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

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

По сути, любая гипертекстовая ссылка является указателем адреса в глобальной сети, по которому можно моментально перейти в окне браузера. Успешный переход по ссылке возможен в двух случаях: если документ, на который ссылается документ, существует, и если синтаксис гиперссылки верен с точки зрения HTML.

Атрибут href в качестве своего значения содержит адрес (относительный или абсолютный), на который будет вести ссылка. При щелчке на ссылку браузер получает и отображает документ, адрес которого указан в атрибуте href :

Результат данного примера в окне браузера:

Как убрать подчёркивание ссылки

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

Первый способ: к ссылке, у которой надо отключить подчёркивание, добавляется атрибут style со значением text-decoration: none; :

Второй способ подойдёт в том случае, когда надо убрать подчёркивание сразу у всех ссылок в HTML документе. В CSS стилях прописываем для всех элементов свойство text-decoration со значением none :

В предыдущем уроке вы узнали о четырех состояниях, которые может принимать ссылка, а также о том, как стилизовать ссылки в этих состояниях, используя псевдоклассы. Сегодня мы поговорим о свойствах CSS, пригодных для использования со ссылками.

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

Со ссылками работают самые разнообразные свойства: color , background , border , border-radius , text-decoration , padding и т. д. Мы покажем наиболее распространенные варианты оформления ссылок, после чего вы можете подумать, каким образом их дополнить либо изменить.

Подчеркивание ссылок

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

Стандартный стиль ссылки в браузере

Чтобы отменить дефолтный подчеркнутый стиль у ссылок, потребуется задать значение none для уже знакомого нам свойства text-decoration :

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

Подчеркивание ссылок при наведении

Один из распространенных стилей для ссылки — подчеркивание при наведении курсора. В этом варианте ссылку в исходном состоянии необходимо визуально выделить, а для состояния :hover добавить соответствующее свойство. Пример:

Ссылка подчеркнута, когда наведен курсор

Подчеркивание с помощью border

Стандартное свойство text-decoration не поддается особой стилизации, поэтому веб-разработчики часто используют в качестве альтернативы свойство border . Управлять внешним видом границы гораздо легче: ей можно задать цвет, толщину, стиль полосы. Пример:

Создание подчеркивания с помощью свойства border-bottom

Согласитесь, такой вариант выглядит веселее с точки зрения возможностей. Не забывайте, что с помощью псевдокласса :hover можно изменить вид границы (и не только) при наведении курсора. А если при этом еще и задействовать CSS-анимацию, то из обычной ссылки может получиться настоящее произведение искусства! Убедитесь в этом сами, взглянув на несколько оригинальных способов выделения ссылок в CSS.

Ссылка с фоном

Ссылки позволяют добавлять к ним фон через уже изученное нами свойство background . И если обычный фоновый цвет для ссылки вряд ли удивит кого-либо, то с помощью фоновых рисунков можно добиться более интересных результатов. К примеру, можно сымитировать рукописное подчеркивание, а также разместить другую графику, задуманную в дизайне ссылки.

Как обозначить ссылки, которые открываются в новом окне/вкладке? Для этого поведения даже существует привычная иконка. Но добавлять ее через тег будет не очень хорошим тоном. Желательно, чтобы иконка открытия в новом окне появлялась автоматически, если у ссылки есть соответствующий HTML-атрибут target=»_blank» . Здесь нам на помощь придет селектор атрибутов:

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

В качестве фонового изображения мы задаем иконку, определяем ее расположение, отменяем дублирование фона и добавляем небольшой отступ от текста. Как видите, всё довольно просто, а посетитель уже проинформирован о поведении ссылки, и открытие новой вкладки/окна не станет для него неожиданностью.

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

Ссылка-кнопка

Вот уж когда точно можно фантазировать, так это при создании стиля для ссылки в виде кнопки. Даже несмотря на то, что современный веб-дизайн отказался от объемных фигур с детальной прорисовкой в пользу плоских и простых форм, все равно вариантов оформления кнопок остается огромное множество.

Несколько примеров (чтобы просмотреть код CSS для каждого примера, кликните по изображению):

Код CSS для данного примера:

Код CSS для данного примера:

В этих примерах определены стили как для обычного состояния ссылки-кнопки, так и для состояний :hover (наведение) и :active (нажатие/удержание). Как видите, CSS позволяет имитировать внешний вид настоящей кнопки до мельчайших деталей.

Важно: чтобы иметь возможность подобным образом стилизовать ссылку, нужно заставить ее вести себя как блочный (block) либо строчно-блочный элемент (inline-block). Дело в том, что если вы будете добавлять отступы к строчному элементу (коим по умолчанию является ссылка), то не увидите никакого эффекта.

Коллекция из 7 анимированных ссылок на CSS

Существует сотни способов для создания красивых ссылок на чистом CSS. Сегодня хотелось бы поделиться оригинальными способами их оформления. В этой коллекции я постарался собрать такие эффекты для ссылок, которые подходят для сплошных текстов, а не отдельных кнопок-ссылок. Кроме того, были отобраны варианты для ссылок стандартного вывода: <a href="url">Текст ссылки</a>, без добавления дополнительных тегов. Это позволит вам производить изменения в существующие сайты без дополнительного вмешательства в html разметку. Для работы со ссылками в спецификации CSS существует 4 псевдокласса:

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

Underline Hover

Анимация основана на плавном увеличении подчеркивания.

Демо

Скачать

Animate Underline Wavy

Необычное волнистое подчеркивание, которое анимируется при наведении курсора. Для корректной работы, у ссылки должен присутствовать атрибут data-text. Этот вариант не очень подходит, если у вас уже существует множество ссылок.

Демо

Скачать

Follow Along Links

При наведении курсором, ссылка оформляется фоновой заливкой. При переходе от ссылки к ссылке, фон также плавно переходит.

Демо

Скачать

Anchor Hover Effects

Из этой коллекции, эта ссылка мне больше всего понравилась. Основана на использовании псевдоэлементов :after и :before

Демо

Скачать

Progress Link

Эффект основан на планом изменении цвета текста.

Демо

Скачать

Ссылки которые открываются в новом окне

Особенность этого оформления — появление подсказки. С помощью CSS у ссылки определяется наличие атрибута target, и через псевдоэлементы выводится уведомление пользователю. Очень удобно.

Демо

Скачать

Link hover effect

Простой эффект, основанный на плавном появлении верхнего и нижнего подчеркивания.

Демо

Скачать

Оформление ссылок в CSS

Оформление ссылок Хотите,чтобы ваши ссылки не выглядели уныло-подчёркнутыми? Для этого Каскадные таблицы стилей(CSS) имеют ряд дополнений при использовании ссылок: их можно раскрасить в любые цвета, можно убрать подчёркивание,можно выделить ссылку аж двумя горизонтальными линиями,можно увеличить высоту шрифта при наведении на неё курсором и многое другое.Давайте рассмотрим несколько примеров оформления ссылок …
a:link {color:#ff0000;text-decoration: none;} a:active {color:#ff0000;text-decoration: none;} a:visited {color:#ff0000;text-decoration: none;} a:hover {color:#0000ff;text-decoration: none;} ССЫЛКА	Для начала давайте сделаем так,чтобы цвет ссылки менялся при наведении на него курсора.Для этого в дискрипторе &ltstyle> запишем следующий код (см.слева).Ну а теперь давайте разберёмся. В этом примере обычная ссылка будет красного цвета («#ff0000») а ссылка при наведении курсора — синяя(«#0000ff»),значение text-decoration:none убирает подчёркивание. Напомню что : a:link — неактивированная ссылка; a:active — ссылка активированная в данный момент; a:visited — ссылка активированная ранее; a:hover — ссылка,на которой находится указатель мыши;
a:link {color:#ff0000;text-decoration:underline;} a:active {color:#ff0000;text-decoration:underline;} a:visited {color:#ff0000;text-decoration:underline;} a:hover {color:#0000ff;text-decoration:underline;} ССЫЛКА	Ну а что делать,если вас всё же устраивает подчёркнутая ссылка? Тогда сделаем изменения в свойстве a:hover(, a:link,a:active,a:visited-изменим значение none на underline и подчёркивание тут же появится. 🙂 Вообще значениями a:link,a:active,a:visited можно поиграть как угодно,ну, например,убрать подчёркивание у уже посещённой ссылки и т.д. Далее в наших примерах я больше не буду приводить полный код оформления ссылки,а только необходимые значения свойств.
a:hover {color:#ff0000;text-decoration:underline;} ССЫЛКА	Ну,а теперь сделаем так,чтобы это самое подчёркивание появлялось при наведении курсора на ссылку.Для этого свойству a:hover присвоим значение text-decoration: underline В этом примере я сохранил цвета для всех видов ссылок,хотя Вы можете поэксперементировать со значениями как Вашей душе угодно…..
hover {text-decoration:underline overline;} ССЫЛКА	Давайте ещё помучаем нашу ссылочку и сделаем подчёркивание сверху и снизу.Запишем в свойства a:hover значение {text-decoration: underline overline;}
a:hover {text-decoration:line-through;} ССЫЛКА	Продолжаем мучить ссылку..:-).Давайте сделаем её зачёркнутой при наведении на неё курсора…нет ничего проще : в свойствах a:hover просто изменяем значение текста на line-through
a:hover {color:#ff0000; border-bottom: 2px dashed;} ССЫЛКА	Теперь давайте пофантазируем…сделаем её при наведении курсора мыши подчёркнутой,но подчёркивание это будет пунктиром.И опять всё просто : допишем в свойстве a:hover значение border-bottom: 2px dashed, где 2px dashed означает,что линия будет пунктирной с тощиной 2 пикселя, а border-bottom проводит наш пунктирчик снизу
a:hover {color:#ff0000; text-decoration:none;background:#0000ff;} ССЫЛКА	Ну а сейчас сделаем так,чтобы ссылка при наведении на неё курсором выделялась другим цветом,например,синим.Допишем в свойстве a:hover следующее background:#0000ff
&lttable id=table1 onMouseOver=»table1.border=’2′» onMouseOut=»table1.border=’0′» border=’0’&gt &lttr&gt &lttd&gt &lta href=#.html&gtССЫЛКА&lt/a&gt &lt/td &gt &lt tr &gt &lt/table &gt	Ну и напоследок давайте выделим нашу ссылочку рамкой, для чего нам понадобятся обработчики событий onMouseOver (указатель мыши находится на ссылке) и onMouseOut(указатель мыши находится вне ссылки),но для этого необходимо построить простенькую табличку…..(см.слева)
Удачи!

Как изменить цвет ссылок в WordPress. Как добавить подчеркивание html, css

Как изменить цвет ссылок в WordPress. В некоторых темах WordPress менять цвет ссылок можно, не напрягаясь, в настройках темы из консоли. Когда делаешь первые шаги в изучении и строении сайта(пусть и на базе конструктора, как сейчас, или на голом html, как раньше, до эры простых в использовании конструкторов), очень увлекает процесс внешнего вида сайта и кажется значимым. Создатель сайта тщательно переберет с десяток тем, меняя до одури цвет, шрифт, виджеты, навешивая десятки плагинов для представления аватарки зарегистрированных пользователей и проч., проч, проч… Когда сайт создан и не один, то все это перестает быть важным. Ставишь тему, подгоняешь небольшие моменты, которые не устраивают, и, как говорится, наплевать. Сайт — для контента, а не для его безвкусного оформления. Не все мы прирожденные дизайнеры и эстеты, поэтому старайтесь придерживаться разумного минимализма. Птица красива полетом, а не оперением. Поверьте, что это не нужно. Ни вам, ни пользователям(если они вообще придут на ваш сайт), гораздо лучше, если гости заявятся неожиданно, а стол не накрыт, чем за обставленным столом остаться одному.

Итак, если в адаптивных настройках темы нет возможности поменять цвет ссылок, то на помощь придет всемогущий редактор. Во-первых, посмотрим, где находится файл класса ссылок — css. Для этого нужна борода Старик-Хоттабыча и заклинание(если браузер не дает такой функции в меню), а именно одновременное нажатие кнопок (горячих клавиш) ctrl+shirt+C или ctrl+shift+I или ctrl+U или F12 — я жму последовательно, удерживая по порядку. И первые два варианта мне нравятся больше, поскольку подсвечивают блоки, что визуально удобнее.

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

Но, будем менять через редактор файлов в панели управления сайтом. В Консоли — Внешний вид — Редактор — файл Таблица стилей

Обратите внимание на верхнюю подсказку WordPress. Но во встроенном редакторе не было функции замены цвета ссылок.

Далее я нахожу код нужного мне цвета в яндексе — #191970 — название понравилось —  MidnightBlue. Теперь — ручная работа, тут будьте внимательны:

меняю найденный код в строчках 144 и 145

text-decoration: none;
color: #8a6d3b;

на

text-decoration: underline;
color: #191970;

то есть, меняю цвет и добавляю подчеркивание (underline) к ссылке, потому что оно задано не было. Сохраняю изменения и обновляюсь. Ничего не происходит, странно. Я открываю другой браузер, захожу на сайт. Ссылки поменяли цвет, как мне требовалось. Значит тот браузер притормозил, что нередко происходит с людьми. Скорее всего ему нужно прочистить мозги, то есть очистить кэш.

Важно: если вы опасаетесь менять код, то можете делать так.

1. Скопируйте весь код в файл и сохраните на компьютере. Затем в редакторе меняйте код, обновляйте, проверяйте, и если что-то не устроит, вносите старый код обратно, и снова сохраняйте. чтобы вернуться.

2. Я делаю проще. Оставляю редактор открытым. На второй вкладке браузера меняю код в редакторе, сохраняю, обновляюсь, и если меня что-то напрягает, перехожу на прежнюю вкладку, где код висит в неизменном виде и снова сохраняю и обновляюсь, но этот способ чреват риском: может сорваться интернет-соединение, либо возникнет ошибка в браузере или вовсе отключат электричество, а у вас нет бесперебойника. Поэтому первый способ — безопаснее.

Создание ссылок в HTML | bookhtml.ru

Данный урок html посвятим созданию ссылок в html-документе. Ссылок бывает много различных и о том как они создаются, какие у них атрибуты мы сейчас и рассмотрим.

Самый главный тег, позволяющий создавать ссылки — это тег <a> . Все, что мы разместим между открывающим тегом <a> и закрывающим тегом </a> называется якорем ссылки (что будет видно на нашей странице).

Пример:

<a>ссылка на другую страницу</a>

Проверив в браузере нашу страницу, мы увидим эту ссылку, но она не действует. А не действует потому-что мы не указали никаких атрибутов (куда же она должна ссылаться).

Самый основной атрибут ссылки — это атрибут href. Именно он отвечает за то куда ссылка должна ссылаться. В значении этого атрибута мы должны указать ту страницу, на которую наша ссылка должна нас перебросить (прописать полный путь на эту страницу).

Пример:

<a href=»/testpage.html»> ссылка на другую страницу</a>

Следующий атрибут, применяемый у ссылок — это атрибут target, отвечающий за открытие ссылки (а именно в каком окне (вкладке) откроется страница, на которую ведет ссылка). Можно открыть в том же окне, а можно и в новом окне (вкладке).

Для открытия ссылки в новом окне используем значение «_blank» (со знаком подчеркивания).

Пример:

<a href=»/testpage.html» target=»_blank»> ссылка на другую страницу</a>

 

Еще один атрибут у ссылок — это атрибут title. Этот атрибут не обязательный, а применяем его для указания темы той страницы на которую ссылаемся. При наведении курсора на ссылку будет всплывать подсказка (то что мы пропишем в значении атрибута title).

Пример:

<a href=»/testpage.html» target=»_blank» title=»проверка ссылок»> ссылка на другую страницу</a>

Это мы сделали ссылки ведущие на страницы нашего же сайта. Теперь давайте создадим ссылку ведущую на страницу другого сайта. Для этого в значении атрибута href нам надо прописать полный адрес сайта, на который мы ссылаемся.

Пример:

<a href=»http://www.wikipedia.org » target=»_blank» >Википедия </a>

Вот таким способом создаются ссылки на другие интернет-ресурсы.

Теперь рассмотрим следующий тип ссылок — это ссылки на скачивание файлов. В якоре такой ссылки пропишем — скачать файл, а в значении атрибута href необходимо указать полный адрес расположения файла для скачивания.

Пример:

<a href=»/… file.rar» target=»_blank» title=»тема файла»>скачать файл </a>

При клике по ссылке открывается окно загрузки файла где нам предлагается скачать файл. Вот так создаются ссылки на скачивание файлов.

Теперь давайте создадим ссылку на ваш email-адрес, при клике по которой у пользователя загружается почтовая программа где он может написать вам письмо. В значении атрибута прописываем следующее: «mailto:адрес вашей электронной почты, на который будут приходить письма».

Пример:

<a href=»mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript «>написать мне письмо</a>

Далее поговорим о ссылке на определенную часть страницы, так как ссылаться можно не только с одной страницы на другую, но и с одного места страницы на другое место этой же страницы.

Для начала нам необходимо создать метку в том месте страницы, куда мы будем переходить по ссылке. Для этого в html-коде, в выбранном нами месте пишем следующую строку:

<a name=»metka»></a>

Как видим у нас появился новый атрибут — name, а в значении этого атрибута пишем имя метки (любое).

Дальше создаем саму ссылку в том месте, откуда мы будем делать переход. В значении атрибута href пишем имя метки через символ решетки — #.

Пример:

<a href=»#metka»>читать ниже</a>

Таким же образом можно ссылаться на определенную часть другой страницы, создав на этой странице метку. А при создании ссылки на эту метку, в значении атрибута после адреса страницы указать имя метки.

Пример:

<a href=»/testpage.html#metka»> ссылка на другую страницу</a>

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

Исправляется это в теге <body> нашего html-документа. У тега <body> тоже есть свои атрибуты и некоторые из них отвечают за цвет ссылок.

Атрибут link — отвечает за цвет не посещенных ссылок.

Атрибут vlink — отвечает за цвет уже посещенных ссылок.

Атрибут alink — отвечает за цвет ссылки при клике по ней.

В значениях атрибутов прописываем цвет, который нам необходим.

Пример:

<body link=»red» vlink=»black» alink=»green»>

Еще один важный момент — это подчеркивание ссылок и его влияние на поведенческие факторы — endseo.ru

Вот все о создании ссылок.

Как убрать подчеркивание для якорей (ссылок)?

Удалить подчеркивание из тега привязки при наведении курсора

Как удалить подчеркивание для тега привязки с помощью CSS ?, legend.green-color a: hover {text-decoration: none; } Голос «за» 19 голос «против». Удалите текстовое оформление для тега привязки Как удалить подчеркивание тега привязки в начальной загрузке

twitter-bootstrap: как избавиться от подчеркнутого текста кнопки, когда, Обратите внимание, что вложение кнопки внутри привязки остается искаженной кнопкой, но это тег A, который вызывает текст -украшение: подчеркивание.08.02.2019. Тег привязки используется для определения гиперссылок и по умолчанию отображает подчеркнутую часть привязки. Подчеркивание можно легко удалить с помощью свойства text-decoration. Свойство CSS text-decoration позволяет украсить текст в соответствии с требованиями. Установив для text-decoration значение none, чтобы удалить подчеркивание из тега привязки.

Как удалить подчеркивающие ссылки в html ?, Кроме того, Bootstrap подчеркивает ссылки (и меняет их цвет) при наведении на них курсора.Что касается раздела CSS, то при загрузке определение тега искало CSS для правильного оформления ссылок привязки на вашей странице. Существующий класс btn в Bootstrap, по-видимому, является правильным способом удаления подчеркиваний с якорных кнопок: используйте классы кнопок в элементе , или EDIT: Hitesh указывает, что btn даст вам тень на : активный.

Как удалить подчеркивание для тега привязки с помощью CSS ?, Установив для text-decoration значение none, чтобы удалить подчеркивание из тега привязки.Bootstrap добавляет очень удобные стили по умолчанию для якорей, но затрудняет использование & lt; a & gt; тег для чего-то другого, кроме синего текста. Скажем, я хочу, чтобы текст был черным. Один из способов сделать это —

.

Удалить подчеркивание из ссылки html

Как удалить подчеркивание из гиперссылок, использующих FrontPage 2003, Чтобы удалить подчеркивание из ссылки в HTML, используйте свойство CSS text-decoration. Используйте его с атрибутом стиля. Атрибут style указывает. Чтобы удалить подчеркивание из ссылки в HTML, используйте свойство CSS text-decoration.Используйте его с атрибутом стиля. Атрибут style определяет встроенный стиль для элемента. Используйте атрибут style со свойством CSS text-decoration, чтобы удалить подчеркивание из ссылки в HTML. Просто имейте в виду, что использование атрибута стиля переопределяет любой набор стилей глобально.

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

Посетите наш веб-сайт .

Попробуйте сами »

Существует 4 состояния ссылок, которые могут быть стилизованы в зависимости от того, в каком состоянии они находятся:

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

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

• a: hover ДОЛЖЕН стоять после: link и a: loaded,
• a: active ДОЛЖЕН идти после: hover.

Пример использования различных состояний ссылки: ¶

  

  
    
    <стиль>
      
      ссылка {
        цвет: #ccc;
      }
      
      а: посетил {
        цвет: # 095484;
      }
      
      a: hover {
        цвет: # 8ebf42;
      }
      
      a: active {
        цвет: # 800000;
      }
    
  
  
    
 Посетите наш
      веб-сайт .
    
  
  

Попробуйте сами »

Как изменить цвета подчеркивания гиперссылки и текста привязки¶

Чтобы изменить цвет подчеркивания, в первую очередь необходимо удалить его со значением« нет »текста -decoration и установите значение «none», затем добавьте свойство border-bottom с шириной (в данном случае, используемой как ширина подчеркивания гиперссылки) и свойствами стиля границы (сплошная, пунктирная или пунктирная).Для цвета текста привязки используйте свойство color.

Пример изменения цвета подчеркивания гиперссылки и цвета текста привязки: ¶

  

  
    
    <стиль>
      a {
        текстовое оформление: нет;
      }
      ссылка {
        цвет: # 000;
        нижняя граница: сплошной 1px # ff0000;
      }
      а: посетил {
        цвет: # e600e6;
        нижняя граница: сплошной 1px # b3b3b3;
      }
      a: hover {
        цвет: # 2d8653;
        нижняя граница: 1px solid # 000099;
      }
    
  
  
    
 Посетите наш
      веб-сайт .
    
  
  

Попробуйте сами »

Пример стилизации ссылок указанными методами: ¶

  

  
    
    <стиль>
      a.one:link {
        цвет: #ccc;
      }
      a.one:visited {
        цвет: # 095484;
      }
      a.one:hover {
        цвет: # 8ebf42;
      }
      а.two: link {
        цвет: #ccc;
      }
      a.two: visit {
        цвет: # 095484;
      }
      a.two: hover {
        размер шрифта: 150%;
      }
      a.three: link {
        цвет: #ccc;
      }
      a.three: visit {
        цвет: # 095484;
      }
      a.three: hover {
        фон: # 8ebf42;
      }
      a.four: link {
        цвет: #ccc;
      }
      a.four: visit {
        цвет: # 095484;
      }
      а.four: hover {
        семейство шрифтов: моноширинный;
      }
      a.five: link {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a.five: visit {
        цвет: # 095484;
        текстовое оформление: нет;
      }
      a.five: hover {
        оформление текста: подчеркивание подчеркиванием;
      }
    
  
  
    
 Наведите указатель мыши на ссылки и посмотрите, как они будут изменены: 
    

       Эта ссылка меняет цвет 
    
    

       Эта ссылка изменяет размер шрифта 
    
    

       Эта ссылка меняет цвет фона 
    
    

       Эта ссылка изменяет семейство шрифтов 
    
    

       Эта ссылка изменяет оформление текста 
    
  
  

Попробуйте сами »

Теперь мы продемонстрируем другой пример, в котором мы используем свойство цвета с его« наследуемым »значением.Это заставит элемент принять цвет своего родителя.

Пример изменения цвета ссылки с помощью значения "наследовать" свойства цвета: ¶

  

  
    
    <стиль>
      п {
        цвет: зеленый;
      }
      p a {
        цвет: наследовать;
      }
    
  
  
     
 Пример 
 
    W3docs.com 
    
 Посетите наш
      Веб-сайт  W3docs.com .
    
  
  

Попробуйте сами »

Пример стилизации ссылок с помощью свойства CSS text-decoration-color: ¶

  

  
    
    <стиль>
      a {
        цвет оформления текста: серый;
      }
      ссылка {
        цвет: # 777777;
      }
      a: hover {
        цвет: # 2d8653;
      }
    
  
  
    
 Посетите наш веб-сайт . 
  
  

Попробуйте сами »

Внешний метод¶

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

Используя внешний метод, вы свяжете свои веб-страницы с внешним файлом .css , который может быть создан любым текстовым редактором на вашем устройстве.Это более эффективный метод, особенно когда вам нужно стилизовать большой веб-сайт. Вы можете изменить свой сайт сразу, отредактировав один файл .css .

Подробнее о ссылках CSS.

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет

---

Статьи по теме

Стиль подчеркнутых надстрочных ссылок путем определения стиля с помощью CSS

Мы можем удалить подчеркивание из закрепленных текстовых ссылок, определив стиль локально, это переопределит настройку файла CSS.Мы будем использовать локальную команду стиля text-decoration: none; , чтобы удалить подчеркивание. Вот несколько примеров этого. Начнем с примера простой ссылки с подчеркиванием. Сначала мы отобразим ссылку, а затем код под ней. Таким же образом отображается ссылка без подчеркивания, а затем код под ней.

Это ссылка с подчеркиванием

   Это ссылка с подчеркиванием   

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

   Это 

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

Здесь мы использовали style = 'text-decoration: none;' , чтобы убрать подчеркивание в ссылке.

оформление текста: над чертой

Этот это ссылка с надстрочной линией

   Это
это ссылка с надписью   

оформление текста: сквозное

Этот это ссылка на сквозную

  Это
это ссылка со сквозной линией   

оформление текста: подчеркивание поверх текста

Этот ссылка с подчеркиванием над чертой

   Это
это ссылка с подчеркиванием поверх   

оформление текста: подчеркивание поверх линии синим пунктиром

Этот ссылка с подчеркиванием над чертой

  Это
это ссылка с подчеркиванием поверх   

оформление текста: подчеркивание поверх линии красным пунктиром

Этот ссылка с подчеркиванием над чертой

   Это
это ссылка с подчеркиванием поверх красного цвета   

оформление текста: подчеркивание поверх двойного красного цвета

Этот это ссылка с подчеркиванием над черным двойным красным

  Это
это ссылка с подчеркиванием поверх двойного красного цвета   

текст-украшение: подчеркивание поверх линии волнисто-зеленый

Этот ссылка с подчеркиванием наверху волнистый зеленый

   Это
это ссылка с подчеркиванием поверх волнистого зеленого цвета   

оформление текста: подчеркнутый верхний штрих пунктирный зеленый

Этот ссылка с подчеркиванием наверху волнистый зеленый

  Это
это ссылка с подчеркиванием над черным пунктирным зеленым   

кнопок как ссылки

Эта статья написана командой plus2net.com .

Рекомендации по визуализации ссылок

Вот текущие рекомендации по удобству использования для отображения текстовых ссылок:

• Чтобы максимизировать воспринимаемую доступность кликабельности, color и подчеркивают текст ссылки.Пользователям не нужно гадать или листать страницу, чтобы узнать, где они могут щелкнуть.
• Предполагая, что текст ссылки цветной, не всегда обязательно подчеркивать его.
  • Есть два основных случая, в которых вы можете безопасно удалить подчеркивание: меню навигации и другие списки ссылок. Однако это верно только тогда, когда дизайн страницы четко указывает на функцию области. (Помните: ваш дизайн может быть не таким очевидным для внешних пользователей, как для членов вашей команды.Пользователи обычно понимают левую панель навигации со списком ссылок на цветном фоне, предполагая, что она похожа на области навигации на большинстве других сайтов.
  • Исключение: подчеркивание необходимо, если вы используете такие цвета ссылок, как красный или зеленый, которые вызывают проблемы у пользователей с распространенными формами дальтонизма.
  • Исключение: подчеркнутые ссылки важны для доступности пользователей с ослабленным зрением, поэтому сохраняйте подчеркивание, если доступность является приоритетом для вашего сайта или у вас много пользователей с ослабленным зрением.
• Не подчеркивайте текст, не являющийся ссылкой, даже если ссылки не подчеркнуты. Зарезервировать подчеркивание для ссылок . Поскольку подчеркивание обеспечивает сильную предполагаемую доступность кликабельности, пользователи будут сбиты с толку и разочарованы, если подчеркнутый текст не имеет фактической возможности, соответствующей этому восприятию.
• Используйте разные цвета для посещенных и непосещенных ссылок.
  • Цвет непосещенных ссылок должен быть более ярким, ярким и насыщенным, чем цвет посещенных ссылок, которые должны выглядеть «использованными» (тусклыми и размытыми).
  • Два цвета должны быть вариантами или оттенками одного цвета, чтобы они были явно связаны. Использование совершенно разных цветов (например, оранжевого и зеленого) затрудняет пользователям понимание взаимосвязи между двумя типами ссылок и определение того, какой цвет является «использованной» версией другого.
  • Оттенки синего обеспечивают самый сильный сигнал для ссылок, но другие цвета работают почти так же.
  • Как всегда, при использовании цвета для передачи информации вы должны предоставить избыточные подсказки для дальтоников.Как правило, этой цели можно добиться, если сделать невидимые ссылки ярче и ярче, чем посещенные.
• Никогда не показывайте текст в выбранных вами цветах ссылок, если это не ссылка.
  • Как правило, следует избегать цвета текста, если это не ссылка . Однако, предполагая, что он отличается от цвета ссылки, иногда можно использовать цветной текст, не вызывая серьезных проблем с удобством использования. Например, в сводке контрольного списка вы можете показать слово «хорошо» зеленым, а слово «ошибка» - красным.(Тот факт, что значения слов явно различаются, дает необходимую избыточную информацию для дальтоников.)
  • Не используйте синий для текста без ссылки, даже если вы не используете синий цвет в качестве цвета ссылки. Синий по-прежнему остается цветом с самой сильной предполагаемой возможностью кликабельности.
• Нет необходимости использовать специальные цвета или другие визуализации при наведении курсора на ссылку. Это только делает страницу более загроможденной, когда пользователь перемещает мышь по экрану.
  • Исключение: если вы выбрали представление ссылок с меньшей предполагаемой доступностью для кликабельности, вы можете частично восстановить утраченное удобство использования, сигнализируя о кликабельности, когда пользователь наводит курсор на ссылку. Например, если ваши ссылки не подчеркнуты, вы можете сделать так, чтобы подчеркивание отображалось при наведении курсора.
  • В любом случае не используйте полужирный шрифт в качестве эффекта наведения, потому что увеличение ширины шрифта может привести к повторному выравниванию текста.
  • Один из полезных эффектов при наведении курсора - использование заголовков ссылок, которые помогают пользователям предсказать, куда приведет ссылка, прежде чем они по ней нажмут.(Если вы используете обычный браузер, вы можете увидеть этот эффект, наведя курсор на ссылки в этом столбце.)
• Не используйте крошечный текст для ссылок. Не размещайте ссылки так близко друг к другу, чтобы пользователям с ограниченными двигательными навыками было трудно их выбрать. Эти рекомендации особенно важны для обеспечения удобства использования для пожилых пользователей.
  • Исключение: можно использовать мелкий шрифт для ссылок, которые понадобятся немногим пользователям (например, информация об авторских правах), если вы размещаете эти ссылки во вторичном месте (например, в нижнем колонтитуле), чтобы пользователи не чувствовали себя обязанными их читать. .
  • Если вы ориентируетесь на пожилых людей или у вас много пожилых пользователей, убедитесь, что ваши ссылки отображаются крупным шрифтом (12 пунктов или выше) и что ссылки содержат достаточно текста, чтобы по ним было легко нажимать.

Все эти правила относятся к текстовой ссылке , внешний вид . Еще более важно, чтобы вы тщательно выбирали содержание ссылки (фактические слова), но это уже другая тема. (Для получения совета см. Шесть рекомендаций по удобству использования домашней страницы для ссылок, двенадцать рекомендаций по написанию и семь рекомендаций по навигации.Графические ссылки - это еще одна история, но обычно для большинства ссылок лучше использовать текст.

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

См. Также

Создать HTML-ссылку / гиперссылку без подчеркивания

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

Хорошая новость в том, что это совсем не сложно. Если у вас есть базовое понимание HTML, вы сможете сделать это довольно быстро.

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

щелкните меня, чтобы получить миллиард долларов

Я не буду вдаваться в подробности гиперссылки, поскольку предполагаю, что вы разбираетесь в HTML, поскольку вы хотите добавить эффект к ссылке.При этом вот HTML-ссылка с кодом, который скроет подчеркивание:

style = "украшение текста: нет;" href = ”http://www.website.com”> щелкните меня, чтобы получить миллиард долларов

Поместив style = "text-decoration: none;" в команду

Обычная ссылка : щелкните меня, чтобы получить миллиард долларов
Ссылка без подчеркивания : щелкните меня, чтобы получить миллиард долларов

Вы не ограничены html, чтобы сделать «без подчеркивания гиперссылки», вы также можете использовать CSS для достижения эффекта без подчеркивания-гиперссылки , но если вы хотите делать одноразовые здесь и там, я нахожу проще просто добавить простой HTML всякий раз, когда я хочу, чтобы он появлялся (или не появлялся).

No related posts.