Html цвет ссылки: Как с помощью html и css изменить цвет ссылки и убрать подчеркивание

Leave a Comment / Html / By /

Содержание

Как изменить цвет ссылки HTML — Web-Lesson

 

Ссылка в HTML выглядит следующим образом:

 

<a href=»/» title=»Ссылка HTML»>Изменяем цвет ссылки</a>

 

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

 

<a href=»/» title=»Ссылка HTML» style=»color:#FF0000; text-decoration:none»>Изменяем цвет ссылки</a>

 

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

 

a {
color:#FF0000;
text-decoration:none
}

a:active {
color:#FF0000;
text-decoration:none
}

a:visited {
color:#666666;
text-decoration:none
}

a:hover {
color:#339900;
text-decoration: underline
}

 

 

 

Создайте два файла

Первый index.html с таким содержимым:

 

<html>

<head>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
</head>

<body>

 

<a href=»/» title=»Ссылка HTML»>Изменяем цвет ссылки</a>

</body>

</html>

А второй назовите style.css. В нем запишите следующее:

a {
color:#FF0000;
text-decoration:none
}

a:active {
color:#FF0000;
text-decoration:none
}

a:visited {
color:#666666;
text-decoration:none
}

a:hover {
color:#339900;
text-decoration: underline
}

Изменяя значения свойств можно менять внешний вид ссылок.

Цвет ссылок > О том, как правильно делать сайты! > LILIA-WEB.NAROD.RU

Цвет ссылок

С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.

Задание цвета всех ссылок на странице

Цвета ссылок задаются в качестве параметров тега <BODY>. Параметры являются необязательными и если они не указаны используются значения по умолчанию.

LINK — определяет цвет ссылок на веб-странице (цвет по умолчанию синий, #0000FF).
ALINK — цвет активной ссылки. Цвет ссылки меняется при нажатии на ней кнопки мыши. Цвет по умолчанию красный, #FF0000.
VLINK — цвет уже посещенных ссылок. Цвет по умолчанию фиолетовый, #800080.

В HTML цвета задаются обычно цифрами в шестнадцатеричном коде, в виде #RRBBGG, где R, G и B обозначают соответственно красную, зеленую и синюю составляющую. Для каждого цвета задается шестнадцатеричное значение от 00 до FF, что соответствует диапазону от 0 до 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ # (пример 1).

Пример 1. Задание цветов ссылок

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<body link=»red» vlink=»#cecece» alink=»#ff0000″ bgcolor=»black»>

<a href=»content.html»>Содержание сайта</a>

</body>
</html>

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

Замечание

Значения параметров нечувствительны к регистру, поэтому корректно писать как #FFFFFF, так и #ffffff.

Для изменения цвета ссылок удобнее использовать CSS. Чтобы установить цвет для всех ссылок на веб-странице применяются следующие псевдоклассы, которые добавляются к селектору A.

visited — Стиль для посещенной ссылки.
active — Стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
hover — Стиль для ссылки при наведении на нее мышью.

В примере 2 показано, как изменить цвет ссылок на веб-странице с помощью стилей. Для этого воспользуемся стилевым параметром color, он задает цвет определенного текста, в данном случае, ссылок.

Пример 2. Цвет ссылок, заданных через стили

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<style type=»text/css»>
BODY {
background: black
}

A {
color: red
}
A:visited {
color: #cecece
}
A:active {
color: #ffff00
}
</style>
</head>
<body>

<a href=»content.html»>Содержание сайта</a>

</body>
</html>

Задание цвета отдельных ссылок на странице

Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.

Для изменения цвета ссылки следует использовать параметр в теге <А>, где #rrggbb — цвет в шестнадцатеричном представлении. Можно, также, использовать названия цветов или указывать цвет в формате: rgb (132, 33, 65). В скобках указаны десятичные значения красного, зеленого и синего цвета (пример 3).

Пример 3. Изменение цвета ссылки с помощью стилей

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<body link=»#ffcc00″ vlink=»#cecece» alink=»#ff0000″ bgcolor=»black»>

<a href=»content.html» >Содержание сайта</a><br>
<a href=»im.html»>Интернет-маркетинг</a><br>
<a href=»use.html» >Юзабилити</a>

</body>
</html>

В данном примере приведены три разных способа задания цвета с помощью стилей.


Как в html изменить цвет ссылки 🚩 Компьютеры и ПО 🚩 Другое

Откройте файл HTML при помощи любого текстового редактора. Для этого нажмите правой клавишей мыши на файле и выберите «Открыть с помощью», а затем укажите используемую программу.

Перейдите к тегу <body> страницы и задайте дополнительные атрибуты link, vlink и alink. Параметр link определяет цвет обычной ссылки <a> на странице и по умолчанию имеет значение «синий». Добавление атрибута alink позволит изменить цвет при нажатии левой клавишей мыши (по умолчанию красный). Vlink указывает на цвет ссылок, которые были уже посещены ранее. Задать параметры можно следующим образом:

<body link = “black” vlink = “green” alink = “brown”>

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

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

<body link = “#000FFF”>

Для задания цвета на странице могут использоваться атрибуты CSS. Например:

<a href = “путь_ссылки” style = “color: #eeefff”>Ссылка</a>
<a href = “путь_ссылки_2” style = “color: maroon”>Ссылка 2</a>

Цвет текста задается путем указания в атрибуте стиля style параметра CSS color, который можно указать как в шестнадцатеричном, так и в словестном формате.

Для задания цвета всем ссылкам на странице при помощи CSS перейдите в секцию <head>. Укажите тег <style> для объявления использования таблицы стилей в документе, а затем задайте параметры visited, active и hover для тега <a>. Например, участок кода может выглядеть следующим образом:

<head><title>Название страницы</title>
<style type = “text/css”>
a { color: green; }
a:visited { color: grey; }
a:active { color: yellow; }
a: hover { color: orange; }
</style>&lt/head>

Простой атрибут a указывает на цвет обычной ссылки, размещенной на странице. A:visited определяет стиль для уже посещенной ранее ссылки, a:active будет подсвечена после нажатия мышью. Hover задает параметры цвета при наведении указателем на текст.

Сохраните произведенные в файле изменения и проверьте результат работы заданного вами кода в окне браузера. Если все параметры были указаны верно, вы увидите изменения в отображении гиперссылок. Чтобы открыть HTML-документ в браузере, дважды кликните на нем левой клавишей мыши или нажмите правой клавишей мыши и выберите соответствующий пункт из выпадающего меню «Открыть с помощью».

Цвет ссылок по умолчанию | www.itroad.ru

Добавлял себе в footer.php адрес своей почты, а так как стили вида footer.php определены в css, все ссылки в нем НЕ отличаются от текста (хотя и продолжают быть кликабельными). Я решил привести ссылку на почту к стандартному виду (то есть синяя ссылка), при этом я 10 минут не мог найти в интернете код цвета ссылок по умолчанию.

Пишу сюда дабы не забыть, стандартный синий цвет имеет код #0066cc

Смотрите так же:

  • Обновился плагин Related PostsОбновился плагин Related Posts Обновился плагин Related Posts и вместо еще одно версии скучного плагина который показывает список постов схожих […]
  • Еще одна оптимизация сайтаЕще одна оптимизация сайта На днях меня уже не первый раз ткнули носом в то, что комментарии на сайте не работают, об проблеме этой я знал, и […]
  • После обновления WordPress плагина XML-Sitemaps Яндекс перестал видеть sitemapsПосле обновления WordPress плагина XML-Sitemaps Яндекс перестал видеть sitemaps Недавно, начал активно обновятся плагин WordPress XML-Sitemaps, за месяц было 2-3 обновления, полностью изменена […]
  • Каталоги доступные для просмотра. Как так…?Каталоги доступные для просмотра. Как так…? Решил просканировать этот сайт, так как с WordPress до этого дела не имел. Оказалось в нем есть куча папок, которые […]
  • Еще одно обновление сайтаЕще одно обновление сайта В порыве активности я зашел очень далеко и установил более новую, современную тему для сайта. Она весит меньше, […]
  • Обновление и оптимизация сайтаОбновление и оптимизация сайта Наконец то я собрался с силами и обновил WordPress, все плагины, а так же провел оптимизацию виртуальной машины на […]

CSS Styling Links

С помощью CSS ссылки можно стилизовать различными способами.

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

Styling Links

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

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

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

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

Пример

/ * непосещенная ссылка * /
a: ссылка {
цвет: красный;
}

/ * посетил ссылка * /
a: посетил {
цвет: зеленый;
}

/ * наведите курсор мыши на ссылку * /
a: hover {
color: hotpink;
}

/ * выбранная ссылка * /
a: активна {
цвет синий;
}

Попробуй сам »

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

  • a: hover ДОЛЖЕН быть после: link и a: посещения
  • : активный ДОЛЖЕН быть после: hover

Оформление текста

Свойство text-украшение в основном используется для удаления подчеркиваний из ссылок:

Пример

a: ссылка {
текстовое оформление: нет;
}

a: посетил {
текстовое оформление: нет;
}

a: зависание {
текстовое оформление: подчеркивание;
}

a: активный {
оформление текста: подчеркивание;
}

Попробуй сам "

Цвет фона

Свойство background-color можно использовать для указания цвета фона для ссылок:

Пример

a: ссылка {
цвет фона: желтый;
}

a: посетил {
цвет фона: голубой;
}

a: зависание {
цвет фона: светло-зеленый;
}

a: активный {
цвет фона: hotpink;
}

Попробуй сам "

Кнопки связи

Этот пример демонстрирует более сложный пример, где мы объединяем несколько CSS свойства для отображения ссылок в виде блоков / кнопок:

Пример

a: ссылка, a: посещенный {
цвет фона: # f44336;
цвет белый;
отступ: 14px 25px;
выравнивание текста: по центру;
текстовое оформление: нет; Дисплей
: встроенный блок;
}

a: hover, a: active {
цвет фона: красный;
}

Попробуй сам "

Дополнительные примеры

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

Advanced - Создать ссылку на кнопку с границами
Еще один пример того, как создавать поля ссылок / кнопки.

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

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


,

ссылок: цвета в текстовых ссылках

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

Эта страница научит вас:

  • Определите цвета для всех ссылок на странице.
  • Определите цвета для отдельных ссылок на странице.

Определите цвета для всех ссылок на странице

Общий цвет текстовых ссылок указывается в теге, как в примере ниже:



    Ссылка
  • - стандартная ссылка - на страницу, на которую посетитель еще не заходил.(стандартный цвет синий - # 0000FF).
  • vlink - посещаемая ссылка - на страницу, на которую посетитель заходил ранее. (стандартный цвет фиолетовый - # 800080).
  • alink - активная ссылка - цвет ссылки, когда на ней находится мышь. (стандартный цвет красный - # FF0000).


Примечание
Вы можете нажать здесь, чтобы узнать больше о шестнадцатеричной системе цветов, используемой в HTML.

Определите цвета для отдельных ссылок на странице

Описанный выше метод предназначен для установки общих цветов ссылок для страницы.

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

Есть два способа сделать это:


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

Примечание:
Важно, чтобы теги и находились между тегами и .

Второй метод будет выглядеть следующим образом:

Нажмите здесь , чтобы перейти в Yahoo.

Примечание:
Числа RGB указывают количество красного, зеленого и синего, используя значения от 0 до 255.Подробнее о преобразовании цветов RGB в шестнадцатеричные можно прочитать здесь.

Теперь, поскольку ни один из этих двух методов не охватывает все браузеры, нам нужно использовать оба метода одновременно.

Этот пример будет работать во всех браузерах:

Нажмите здесь , чтобы перейти в Yahoo.

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

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

Если вам нужны более сложные эффекты, вам следует перейти к разделу о таблицах стилей.

Как изменить цвет ссылок на веб-странице

Обновлено: 07.06.2009 от Computer Hope

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

Наконечник

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

Понимание различных типов гиперссылок

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

  1. Посещенная ссылка - Цвет посещенной ссылки. Если гиперссылка имеет этот цвет, пользователь может ожидать, что нажатие на ссылку приведет к переходу на страницу, которую он уже видел.
  2. Hover link - цвет, когда мышь наводит курсор на ссылку. Если гиперссылка имеет этот цвет, пользователь может ожидать, что нажатие левой кнопки мыши (нажатие), а затем отпускание кнопки приведет к посещению ссылки. Цвет наведения одинаков как для активных, так и для посещенных ссылок.
  3. Active Link - Цвет ссылки при нажатии. Когда пользователь видит этот цвет, он может ожидать, что отпускание кнопки мыши приведет к тому, что браузер перейдет по ссылке.
Наконечник

См. Определение гиперссылки для получения дополнительной информации и связанных вопросов к гиперссылкам.

Пример цвета ссылки CSS

В приведенном ниже примере CSS мы устанавливаем цвета гиперссылок, чтобы они напоминали то, что показано на этой странице. Во-первых, для всех якорей установлено значение # 2c87f0 (оттенок синего), # 636 - оттенок фиолетового, а цвет всех активных и активных ссылок: # c33 (красный). Приведенный ниже код можно добавить в элемент стиля CSS или в свой файл .css.

 {
  цвет: # 2c87f0;
}
a: посетил {
  цвет: # 636;
}
a: hover, a: active, a: focus {
  цвет: # c33;
}

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

Пример HTML-тега body

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

Ниже приведены описания каждого из атрибутов HTML в теге body.

TEXT = Цвет текста.
LINK = Цвет ссылок.
VLINK = Цвет посещенной ссылки.
ALINK = Цвет активной ссылки или цвет, на который ссылка меняется при нажатии.
BGCOLOR = Цвет фона страницы.

,

HTML Ссылки Гиперссылки

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

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

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

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

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

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

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

Тег HTML определяет гиперссылку.Он имеет следующий синтаксис:

текст ссылки

Самый важный атрибут элемента - это атрибут href , который указывает пункт назначения ссылки.

Текст ссылки - это часть, которая будет видна читателю.

Нажав на текст ссылки, отправим читателю на указанный URL-адрес.

Пример

В этом примере показано, как создать ссылку на W3Schools.com:

Посетите W3Schools.com!

Попробуй сам "

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

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

Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы получить другой взгляд!

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

По умолчанию связанная страница будет отображаться в текущем окне браузера.Чтобы изменить это, вы должны указать другую цель для ссылки.

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

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

  • _self - по умолчанию. Открывает документ в то же самое окно / вкладка, на котором была нажата
  • _blank - открывает документ в новом окне или вкладке
  • _parent - Открывает документ в родительском фрейме
  • _top - Открывает документ в полном теле окна

Пример

Используйте target = "_ blank", чтобы открыть связанный документ в новом окне или вкладке браузера:

Посетите W3Schools!

Попробуй сам "

Абсолютные URL и относительные URL

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

Локальная ссылка (ссылка на страницу на том же веб-сайте) указывается с относительный URL (без часть "https: // www"):

Пример

Абсолютные URL
W3C
Google

Относительный URL-адреса

HTML-изображения

CSS Учебное пособие

Попробуй сам "

HTML-ссылки - Использование изображения в качестве ссылки

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

Пример


Учебник HTML

Попробуй сам "

Ссылка на адрес электронной почты

Использовать mailto: внутри атрибут href для создания ссылки, которая открывает почтовую программу пользователя (для пусть отправят новое письмо):

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

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

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

Пример

кнопка < > Учебник HTML

Попробуй сам "

Заголовки ссылок

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

Пример

Посетите наш учебник по HTML

Попробуй сам "

Подробнее об абсолютных и относительных URL

Пример

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

учебник по HTML

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

Пример

Ссылка на страницу, расположенную в папке html на текущем веб-сайте:

Учебник по HTML

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

Пример

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

Учебник по HTML

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

Краткое содержание главы

HTML Упражнения

HTML Ссылка Теги

Tag Описание
Определяет гиперссылку

,

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *