Как в 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></head>
Простой атрибут a указывает на цвет обычной ссылки, размещенной на странице. A:visited определяет стиль для уже посещенной ранее ссылки, a:active будет подсвечена после нажатия мышью. Hover задает параметры цвета при наведении указателем на текст.
Сохраните произведенные в файле изменения и проверьте результат работы заданного вами кода в окне браузера. Если все параметры были указаны верно, вы увидите изменения в отображении гиперссылок. Чтобы открыть HTML-документ в браузере, дважды кликните на нем левой клавишей мыши или нажмите правой клавишей мыши и выберите соответствующий пункт из выпадающего меню «Открыть с помощью».
www.kakprosto.ru
Какой цвет ссылок HTML/CSS по умолчанию? — html
Как и в случае с HTML5, цвета гиперссылок переднего плана, среди прочего, находятся на пути стандартизации в виде рекомендаций для ожидаемого поведения рендеринга по умолчанию. В частности, взятые из раздела Фразинг контента, рекомендуемые цвета по умолчанию для невидимых и посещенных гиперссылок следующие:
:link { color: #0000EE; }
:visited { color: #551A8B; }
Обратите внимание, что рекомендуемого значения по умолчанию для активных гиперссылок (:link:active, :visited:active) не существует.
Вы можете использовать эти цвета по умолчанию и разумно ожидать, что они будут работать. Но имейте в виду, что браузер может игнорировать любые или все эти рекомендации, так как никогда не требуется следовать им. Тем не менее, рекомендуется для последовательного взаимодействия пользователей в браузерах (как это определено в этом контексте), поэтому есть вероятность, что эти цвета будут соответствовать значениям по умолчанию для большинства браузеров. В худшем случае они по-прежнему служат разумными приближениями фактических значений.
В частности, невыбранные и посещенные цвета ссылок в последних версиях Firefox и Chrome соответствуют приведенным выше рекомендациям, но последние версии IE сообщают о разных значениях: unvisited links rgb(0, 102, 204) или #0066CC, и посещенные ссылки: rgb(128, 0, 128) или #800080. Предыдущие версии Firefox (и, возможно, Safari/Chrome) также отличались по умолчанию. Тем не менее, это более старые версии; главный изюминка сегодня, о которой я знаю, это IE. Еще нет слов о том, изменится ли это в Project Spartan — в настоящее время он по-прежнему отражает те же значения, что и последняя версия IE.
Если вы ищете стандартизованную цветовую схему, используемую всеми браузерами, а не предлагаемую HTML5, то ее нет. Также нет способа вернуть значение по умолчанию для браузера для определенного свойства для определенного элемента, используя чистый CSS. Вам придется либо использовать цвета, предлагаемые HTML5, либо разработать собственную цветовую схему и использовать ее вместо этого. Любой из этих параметров будет иметь приоритет над настройками браузера, независимо от браузера.
Если вы сомневаетесь, вы всегда можете использовать технику about:blank, описанную выше, чтобы вынюхать цвета по умолчанию, поскольку она остается применимой и сегодня. Вы можете использовать это, чтобы обнюхать цвет активной ссылки во всех браузерах, например; в последней версии Firefox (29 из этого обновления), #EE0000.
qaru.site
Изменить цвет ссылки на текущую страницу с помощью CSS — javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <style type="text/css"><!-- .class1 A:link {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;} .class1 A:visited {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;} .class1 A:hover {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;} .class1 A:active {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;} #nav_menu .current {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000;} a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:none;} a:active {text-decoration:none;} --></style> </head> <body100%" align="center"> <table width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr> <td "border:0px" align="center" valign="middle"> <span> <a href="http://Yourhomepage-url.com/" ***class="current"*** target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Home </b></font></a> <a href="http://Yourhomepage-url.com/yourfaqspage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> FAQs page </b></font></a> <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> About </b></font></a> <a href="http://Yourhomepage-url.com/yourcontactpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Contact </b></font></a> </span> </td></tr></table></body></html>
Примечание: стиль находится между тегом заголовка (<head> .... </head>) и class= «class1», а id = «nav_menu» идет в ie: (- <span> -).
Затем последний атрибут класса (class= «current» ) находится в гиперссылке ссылки на странице, на которую вы хотите, чтобы текущая текущая ссылка соответствовала.
Пример: вы хотите, чтобы вкладка ссылок оставалась активной или подсвеченной, когда соответствующая страница соответствует текущей странице, перейдите на эту страницу и поместите ссылку
Для домашней страницы перейдите на домашнюю страницу и поместите в нее класс. Пример: <a href="http://Yourhomepage-url.com/" target="_parent">
На странице About перейдите на страницу about и поместите в нее класс. Пример: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent">
На странице контактов перейдите на страницу контактов и поместите в нее класс. Пример: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent">
и т.д.
Обратите внимание на приведенную выше таблицу: — Предположим, что это была домашняя страница, поэтому на этой странице только раздел ссылок на главный URL имеет class= «current»
Извините за любую бессмысленную ошибку, я не проф. но это сработало для меня и прекрасно отобразилось почти во всех проверенных браузерах, включая ipad и смартфоны. Надеюсь, это поможет кому-то здесь, потому что очень разочаровывает желание и неспособность. Я попытался, поэтому мне пришлось это сделать, и пока это хорошо для меня.
qaru.site
Цвет ссылок > О том, как правильно делать сайты! > LILIA-WEB.NAROD.RU
Цвет ссылок
С помощью HTML можно задавать цвета всех ссылок на странице, а также изменять цвета для отдельных ссылок.
Задание цвета всех ссылок на странице
Цвета ссылок задаются в качестве параметров тега <BODY>. Параметры являются необязательными и если они не указаны используются значения по умолчанию.
LINK — определяет цвет ссылок на веб-странице
(цвет по умолчанию синий, #0000FF).
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> |
Цвет не обязательно задавать в шестнадцатеричном формате, можно использовать и ключевые слова. В данном примере цвет фона веб-страницы установлен черным, а цвет ссылок — красным.
| Замечание |
Значения параметров нечувствительны к регистру, поэтому корректно писать как #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 { <a href=»content.html»>Содержание сайта</a> </body> |
Задание цвета отдельных ссылок на странице
Вышеописанный способ задания цветов работает для всех ссылок веб-страницы. Однако, иногда возникает необходимость одновременно использовать разные цвета. Светлые, например, для темных областей веб-страницы, а темные цвета — соответственно для светлых. Для этого также можно воспользоваться стилями.
Для изменения цвета ссылки следует использовать параметр в теге <А>, где #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> </body> |
В данном примере приведены три разных способа задания цвета с помощью стилей.
lilia-web.narod.ru
Как на странице сделать ссылки разных цветов?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Определить свой цвет ссылок для разных областей веб-страницы.
Решение
Ссылки разных цветов обычно нужны для размещения на странице, имеющей несколько различающихся по фоновому цвету областей. На тёмном фоне логичнее располагать ссылки светлых тонов, а на светлом, наоборот, ссылки темного цвета.
Для раздельного управления стилем разных ссылок рассмотрим два способа. Первый основан на контекстных селекторах. Смысл следующий. Ссылки меню располагаются внутри блока, например, <div>…</div>, а ссылки в тексте внутри блока <div>…</div>. Тогда стиль для разных ссылок получится таким.
<style>
.menu a { color: red; }
.content a { color: green; }
</style>Запись .menu A означает, что стиль будет определен только для селектора A, который располагается внутри элемента с классом menu (пример 1).
Пример 1. Использование контекстных селекторов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование контекстных селекторов</title>
<style>
.menu {
padding: 5px; /* Поля вокруг текста */
background: #066; /* Цвет фона */
}
.menu a {
color: #ffc; /* Цвет ссылки */
}
.content {
background: #ccc; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
}
.content a {
color:#6f4a25; /* Цвет ссылок */
}
</style>
</head>
<body>
<div>
<a href="link1.html">Ссылка 1</a> |
<a href="link2.html">Ссылка 2</a> |
<a href="link3.html">Ссылка 3</a>
</div>
<div>
<a href="link1.html">Ссылка 1</a> |
<a href="link2.html">Ссылка 2</a> |
<a href="link3.html">Ссылка 3</a>
</div>
</body>
</html>Результат данного примера показан ни рис. 1.
Рис. 1. Ссылки, различающиеся по цвету
Второй способ состоит в использовании классов. Для ссылки, цвет которой надо определить, создаётся новый класс и добавляется к тегу <a> (пример 2).
Пример 2. Использование классов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Использование классов</title>
<style>
a {
color: orange; /* Цвет ссылки */
}
a.content {
color: #6f4a25; /* Цвет ссылок */
text-decoration: none; /* Убираем подчеркивание */
}
a.content:visited {
color: purple; /* Цвет посещенных ссылок */
}
a.content:hover {
color: red; /* Цвет ссылок при наведении на них курсора мыши */
}
</style>
</head>
<body>
<p>
<a href="link1.html">Ссылка 1</a> |
<a href="link2.html">Ссылка 2</a> |
<a href="link3.html">Ссылка 3</a>
</p>
<p>
<a href="link1.html">Ссылка 1</a> |
<a href="link2.html">Ссылка 2</a> |
<a href="link3.html">Ссылка 3</a>
</p>
</body>
</html>htmlbook.ru
Свойства ссылок | htmlbook.ru
Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.
| Свойство | Описание |
|---|---|
| A:link | Определяет стиль для обычной непосещенной ссылки. |
| A:visited | Определяет стиль для посещенной ссылки. |
| A:active | Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. |
| A:hover | Определяет стиль для ссылки при наведении на нее мышью. |
Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A. Поэтому этот псевдокласс можно опустить.
Ссылки без подчеркивания
Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).
Пример 1. Подчеркивание у ссылки и изменение ее цвета
<!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>Ссылки</title>
<style type="text/css">
A:link {
text-decoration: none; /* Убирает подчеркивание для ссылок */
}
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
text-decoration: underline; /* Делает ссылку подчеркнутой при наведении на нее курсора */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
</html>Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.
Подчеркнутые и надчеркнутые ссылки
Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover.
Пример 2. Использование подчеркивания в ссылках
<!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>Ссылки</title>
<style type="text/css">
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
text-decoration: underline overline; /* Ссылка подчеркнутая и надчеркнутая */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
</html>Изменение размера ссылки
Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки
<!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>Ссылки</title>
<style type="text/css">
A:link { text-decoration: none; }
A:visited { text-decoration: none; }
A:active { text-decoration: none; }
A:hover {
font-size: 24px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: red; /* Цвет ссылки */
}
</style>
</head>
<body>
<p><a href="1.html">Пример ссылки</a></p>
</body>
</html>Изменение цвета подчеркивания
Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).
Пример 4. Создание подчеркивание другого цвета
<!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>Ссылки</title>
<style type="text/css">
A:link { color: blue; text-decoration: none; }
A:hover { color: red; text-decoration: underline; }
.link { color: blue; }
</style>
</head>
<body>
<p><a href="1.html"><span>Ссылка</span></a></p>
</body>
</html>Ссылки разных цветов
Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.
Пример 5. Ссылки разных цветов
<!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>Ссылки</title>
<style type="text/css">
A { font-size: 14px; color: red; }
A.link1 { font-size: 12px; color: green; }
A.link2 { font-size: 14px; color: blue; }
</style>
</head>
<body>
<p>| <a href="1.html">Ссылка 1</a> |
<a href="2.html">Ссылка 2</a> |
<a href="3.html">Ссылка 3</a> |</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Разные ссылки на одной странице
htmlbook.ru
Википедия:Цвета ссылок — Википедия
Материал из Википедии — свободной энциклопедии
В Википедии цвет ссылки указывает на состояние целевой страницы. Стандартные ссылки имеют следующие цвета:
| Тип | Код | Описание |
|---|---|---|
| Синяя ссылка | #0645AD / rgb(6,69,173) | Страница, в данный момент существующая в Википедии |
| Тёмно-синяя ссылка | #0B0080 / rgb(11,0,128) | То же, и уже была посещена |
| Красная ссылка | #CC2200 / rgb(204,34,0) | Страница не существует |
| Светло-красная ссылка | #A55858 / rgb(165,88,88) | То же, и уже была посещена |
| Голубая ссылка | #3366BB / rgb(51,102,187) | Страница другого вики-проекта |
| Фиолетовая ссылка | #663366 / rgb(102,51,102) | То же, и уже была посещена |
Изменение в личных настройках[править код]
Вы также можете изменить цвета ссылок, редактируя ваш CSS-файл.
Стандартные селекторы ссылок:
- a: link — стиль не посещённых ссылок
- a: visited — стиль уже посещённых ссылок
- a: active — стиль ссылки, на которую наведён курсор
- a: hover — стиль ссылки, над которой находится курсор
Цвета изменяются в соответствии со стандартами: Цвета HTML.
/* standard link colors */
.mw-body a:link { color: #0000FF; } /* normal unvisited links */
.mw-body a:link:visited { color: #00CD00; } /* visited links */
.mw-body a:link:active { color: #FF0000; } /* active links */
.mw-body a:link.new { color: #FF0000; } /* new links */
.mw-body a:link.interwiki { color: #3366BB; } /* interwiki links */
.mw-body a:link.external { color: #3366BB; } /* external links */
.mw-body a:link.stub { color: #772233; } /* hovered links */
.mw-body a:link {color: #FF0000}
.mw-body a:visited {color: #00008B}
.mw-body a:hover {color: #FF00FF}
.mw-body a:active {color: #0000FF}
Примечания:
- строка a: hover должна идти после a: link и a: visited
- строка a: active должна идти перед a: hover
- вы должны приписать «.mw-body» перед стандартным описанием ссылки, потому что в противном случае стандартные цвета всё-равно будут доминировать над теми, которые вы установили.
- Ссылки-перенаправления
Показывать ссылки-перенаправления зелёными:
.mw-body a.mw-redirect {color: #308050}
.mw-body a.mw-redirect:visited {color: #3070A0}
- Внешние ссылки
.mw-body a.external {color: #008000}
Другие изменения[править код]
Вы также можете форматировать текст другими способами.
- text-decoration
Тег позволяет создавать такие декорации, как подчёркивание, перечёркивание, линия над текстом. Пример (подчёркивание):
.mw-body a:link {color: #000000; text-decoration: underline; }
Возможные значения:
- none — ничего (по умолчанию)
- underline — подчёркивание
- overline — линия над текстом
- line-through — перечёркивание
- font-family
Меняет шрифт текста:
.mw-body a:link {font-family: monospace}
ru.wikipedia.org