Гиперссылки в html цвет: Как изменить цвет ссылки и фона под ней?

Leave a Comment / Html / By /

Содержание

Как изменить цвет ссылки в CSS?

В этой статье мы расскажем, как стилизовать ссылки с помощью свойств CSS (например. изменить цвет ссылки в CSS) Оформление ссылок зависит от состояния, в которых они находятся:

  • Не посещенная ссылка: состояние ссылки по умолчанию. Оно определяется с помощью псевдокласса :link.
  • Посещенная ссылка: стилизуется с помощью псевдокласса :visited.
  • Активная: ссылка, которая активируется нажатием. Задается с помощью псевдокласса: active.
  • Ссылка, на которую пользователь навел курсор: стилизуется псевдоклассом :hover.
  • Выделенная фокусом ввода: стилизуется с использованием псевдокласса :focus.

Пример оформления простой ссылки

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS links</title> 
<style> 
p { 
   font-size: 30px; 
   text-align: center; 
   }          
</style> 
</head> 
<body> 
<p><a href="https://www.herbalife.com">Example for a simple link</a></p> 
</body>     
</html>

По умолчанию не посещенные ссылки оформляются синим цветом, посещенные – фиолетовым, выделенные фокусом ввода – контуром, а активные – красным цветом.

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

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
 
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Here is a link</a></b></p>
</body>
</html>

Пример, в котором для оформления ссылки используется свойство background-color

<!DOCTYPE html>
<html>
<head>
<style>
p { 
   font-size: 30px; 
   text-align: center; 
   }          
a:link {
  background-color: coral;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: DarkMagenta;
}
a:active {
  background-color: DarkSalmon ;
} 
</style>
</head>
<body>
<p><b><a href="default.
  asp" target="_blank">This is a link</a></b></p>
</body>
</html>

Для оформления ссылки как кнопки потребуются следующие свойства: color, text-decoration, text-align, background color display, padding и другие.

Вот пример:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
    background-color: DarkSalmon ;
    border: none;
    color: #FFFFFF;
    padding: 25px 52px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
    font-size: 20px;
    text-align: center; 
    cursor: pointer;
    display: inline-block;
}
a:hover, a:active {
    background-color: DarkRed ;
}
</style>
</head>
<body>
<body>
    <a href="http://www.tennis.com" target="_blank">BUTTON</a>
</body>
</body>
</html>

Свойства, указанные в псевдоклассе :hover, могут применяться и к другим элемента, а не только к ссылкам.

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

<!DOCTYPE html>
<html>
<head>
<style>
body,html {
  margin: 0;
  font-family: sans-serif, arial, helvetica;
}
ul {
  padding: 0;
  width: 100%;
}
li {
  display: inline;
}
a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: white;
}
li:last-child a {
  margin-right: 0;
}
a:link, a:visited, a:focus {
  background: DarkSalmon ;
}
a:hover {     
  background: DarkRed ;
}
a:active {
  background: red;
  color: white;
}
</style>
</head>
<body>
<ul>
  <li><a href="#">Tournaments</a></li><li><a href="#">Scores</a></li><li><a href="#">
News</a>
</li>
<li><a href="#">Videos</a></li><li><a href="#">PLAYERS & RANKINGS</a></li>
</ul>
</body>
</html>

Давайте рассмотрим, что именно происходит в примере, приведенном выше. Для элемента <ul> мы устанавливаем нулевой отступ, устанавливая и ширину 100% внешнего контейнера, (в нашем случае

<body>).

Элементы <li> будут располагаться отдельной строке. Таким образом, мы создадим горизонтальный список ссылок.

Самым сложным является правило номер четыре, которое стилизует элемент <a>. Мы начали с отключения стиля текста, используемого по умолчанию. Затем мы установили display: inline для элементов списка. Для ссылок мы задаем display: inline-block, чтобы иметь возможность их масштабировать.

Элементы <a> являются строчными по умолчанию. Но нам нужно изменить их размер. Свойство inline-block позволяет сделать это.

Для определения размеров заполним всю ширину элемента <ul>, оставляя небольшое пространство между каждой кнопкой. После этого устанавливаем ширину и расстояние между каждой кнопкой. Затем задаем line-height: 3, чтобы придать кнопкам определенную высоту.

В конце мы устанавливаем белый цвет для текста.

Заключение

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

Данная публикация является переводом статьи «Styling CSS Links» , подготовленная редакцией проекта.

Какой цвет ссылки по умолчанию для HTML / CSS?

Начиная с HTML5, цвета переднего плана гиперссылок, помимо прочего, находятся на пути к стандартизации в форме руководств по ожидаемому поведению рендеринга по умолчанию . В частности, взятые из раздела Фразировка контента , рекомендуемые цвета по умолчанию для не посещенных и посещенных гиперссылок:

:link { color: #0000EE; }
:visited { color: #551A8B; }

Однако обратите внимание, что для активных гиперссылок ( :link:active, :visited:active) рекомендуемое значение по умолчанию отсутствует .

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

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

В частности, цвета не посещаемых и посещаемых ссылок по умолчанию в последних версиях Firefox и Chrome соответствуют приведенным выше рекомендациям, но последние версии IE сообщают о других значениях: не посещенные ссылки — rgb(0, 102, 204)или #0066CC, а посещенные ссылки — rgb(128, 0, 128)или #800080. Более старые версии Firefox (и, возможно, Safari / Chrome) также имели разные значения по умолчанию. Это старые версии, однако; сегодня я знаю, что основным выбросом является IE.

Пока нет слов о том, изменится ли это в Project Spartan — в настоящее время он по-прежнему отражает те же значения, что и последняя версия IE.

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

Если вы сомневаетесь, вы всегда можете использовать about:blankтехнику, которую я описал ранее, чтобы понюхать цвета по умолчанию, как и сегодня. Вы можете использовать это, например, для определения цвета активной ссылки во всех браузерах; в последней версии Firefox (29 на это обновление), это

rgb(238, 0, 0)или #EE0000.

Как в html сделать цвет ссылки


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

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

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

Как сделать гиперссылку в HTML? Гиперссылка задаётся при помощи парного тега (от английского слова Anchor — якорь). Параметр href тега содержит адрес документа.

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

текст ссылки

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

Сработает он в том случае, если конечный документ располагается в той же директории, что и текущий. Также, вы можете указать путь к файлу относительно корневой директории веб-сайта с помощью символа «/».

Например:

имя страницы

Абсолютный адрес представляет собой ссылку в полном виде на документ, расположенный в сети интернет.

Например:

имя страницы

Создание гиперссылок в HTML — процесс несложный. По умолчанию они подчёркиваются и выделяются синим цветом, а посещённые — фиолетовым.

Изменить цвет гиперссылки в HTML можно в параметрах тега :

  • link – цвет ссылок веб-страницы;
  • vlink – цвет посещённых гиперссылок веб-страницы;
  • alink – цвет активных ссылок веб-страницы.

Например:

Указанные атрибуты определяют цвета ссылок всего HTML-документа. Если вставить такой код в тег , каждый раз задавать цвет шрифту не придётся.

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

Основные атрибуты гиперссылок

В рамках HTML гиперссылки могут иметь следующие параметры:

1. title – позволяет создать текст подсказки, которая всплывает при наведении курсора мыши на гиперссылку.

Например:

Имя ссылки

2. target – указывает браузеру в каком окне следует открыть ссылку.

Он может принимать следующие значения:

  • _blank – ссылку необходимо открыть в новой вкладке;
  • _self – гиперссылка в HTML должна быть открыта в текущей вкладке. Значение по умолчанию;
  • _parent – браузер должен загрузить ссылку в родительском окне;
  • _top – гиперссылка загружается по всему пространству окна браузера (разбиение на фреймы в данном случае исчезает).

Например:

Имя ссылки

Таким образом, ответ на часто задаваемый начинающими веб-мастерами вопрос «как вставить гиперссылку в HTML» получен.

Желаем успехов в изучении веб-программирования!

Цвет ссылки | Вопросы и ответы. Все о дизайне и создании сайтов

Вопросом о том, как изменить или задать цвет ссылки в HTML, задаются многие.

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

Три основных атрибута для цвета ссылок

Существует три основных атрибута — link, alink и vlink. Link определяет цветовую гамму ссылок на странице, по умолчанию задан синий цвет (#0000FF). Alink раскрывает цвет активности ссылки. Проще говоря, при нажатии на ней кнопкой мыши, она меняет свой цвет. По умолчанию синий цвет ссылки css изменяется на красный (#FF0000). Vlink – определяет цвет посещенных ранее ссылок. По умолчанию установлен фиолетовый цвет (#800080).

Хочется отметить, что в коде HTML цвета обычно задаются в шестнадцатеричном коде, в форме #rrggbb (где буквы r, b и g, обозначают соответственно красную, синюю и зеленую составляющие). Кроме того, для каждого отдельного цвета задается шестнадцатеричное значение в промежутке от 00 до FF, что в десятеричном исчислении соответствует диапазону от 0 до 255. После чего все эти значения объединяются в одно число, перед которым обязательно ставится символ #.

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

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

Вам понадобится

  • — html-теги;
  • — таблица с кодами цветов.

Инструкция

Запомните общую схему ссылок, которая используется на большинстве сайтов. «a» () — это якорь гиперссылки, ограничивающий ее с двух сторон; «href» — сокращение от hypertext reference (гипертекстовая ссылка), то есть интернет-адрес, на который надо совершить переход. Ссылка всегда заключается в кавычки. Таким образом, общая схема ссылок выглядит так: текст.

Измените цвет ссылки, добавив код до текста ссылки и после, чтобы получилось так: текст.

На сервисах блогов, например, на Liveinternet, используйте код [url=ссылка]текст[/url]. «url» — uniform resource locator, определитель местонахождения ресурса. В этом случае для того чтобы изменить цвет, добавьте до и после текста тег цвета: [url=ссылка][color=цвет]текст[/color][/url].

Если вы сами делали свой сайт и у вас есть файл с его стилями, то редактируйте ссылки прямо там, в каскадных таблицах стилей CSS. Общий синтаксис записи выглядит так: a{параметры стиля}. С помощью этих параметров можно сделать ссылку жирной, курсивной или какой угодно.

Чтобы задать ссылке цвет, нужно использовать такой код: a{color: #00000;}. 00000 — код чёрного цвета по умолчанию. Чтобы заменить его на любой другой, воспользуйтесь либо графическим пакетом (например, Adobe Photoshop), кликнув на квадратик с цветом в Инструментах, либо с помощью web-палитр. Обычно в обоих случаях код находится рядом с #. Скопируйте его, кликнув на него и нажав Ctrl+C. Затем вставьте в фигурные скобки после #.

Чтобы сделать ссылки разноцветными в текстовом редакторе, например, в Open Office, откройте в верхнем меню «Вставка» → «Гиперссылка», вставьте ссылку, задайте ее текст. Нажмите «Применить», затем «Закрыть». Выделите ссылку и задайте ей цвет как обычному тексту. Можете также задавать цвет каждой букве в отдельности.

Обратите внимание

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

Помните, что не на всех сайтах можно сделать ссылки разноцветными. Типичный пример — социальная сеть «ВКонтакте».

Полезный совет

Цвет указывается английским словом, например — red, green, blue.

Источники:

  • Таблица цветов интернета в 2018

Как изменить в html цвет ссылки?

Начинающие веб-разработчики часто задаются вопросом об изменении оформления гиперссылок. Это вполне естественно, ведь тема о правильном оформлении ссылок постоянно поднимается дизайнерами и верстальщиками. Создать сайт самостоятельно с Wix.com

Инструкция
  • По умолчанию, ссылки оформляются синим (#0000FF) цветом, имеют нижнее подчеркивание и меняют цвет при переходе на фиолетовый (#800080), причем активные ссылки выделяются красным цветом (#FF0000). Установка цветов для всех ссылок на странице в разных их состояниях осуществляется стандартными средствами HTML — тремя атрибутами тега . Изменение параметров оформления отдельных ссылок может быть осуществлено посредством изменения значений атрибутов соответствующего тега .
  • Существует три способа задания значений для стилевых атрибутов. Во всех случаях необходимо указывать цвет шрифта и подчеркивания, который может иметь вид шестнадцатеричного кода в полном (#FFFFFF) или сокращенном (#fff) вариантах. Цвет можно указать также в формате RGB (101, 010, 111) или стандартным html-значением стилевого атрибута, то есть ключевым словом (grey, red и т.д.). Эти значения устанавливаются для атрибутов link, alink и vlink.
  • Необязательный атрибут link тега определяет цвет всех гиперссылок, которые есть на странице. Если атрибут не указан, принимается значение по умолчанию.
  • Необязательный атрибут alink тега определяет цвет всех активных гиперссылок, то есть меняет цвет ссылки на указанный при нажатии на нее. Активными гиперссылками также считаются элементы меню, которые указывают на страницу, открытую в браузере в данный момент. Если атрибут не указан, принимается значение по умолчанию.
  • Необязательный атрибут vlink тега определяет цвет всех посещенных гиперссылок, то есть меняет цвет ссылки после перехода по ней. Если атрибут не указан, принимается значение по умолчанию.
  • Для изменения цвета всех гиперссылок можно использовать в документе HTML свойства CSS. Они прописываются между парными тегами и , указанными между обязательными тегами и . Свойства задаются через селектор A: посредством псевдокласса visited, определяющего цвет посещенных ссылок, active, указывающего цвет активных ссылок, или hover, задающего цвет ссылок при наведении на них курсора мыши.
  • Если возникает необходимость изменить цвет отдельной ссылки, а не всех сразу, следует использовать атрибут style для тега , подключив таким образом стили к определенному тегу. Значением атрибута в данном случае является свойство color, синтаксис написания таков: , то есть можно использовать любой из четырех методов указания цвета.
    • Оцените статью!

    Как изменить цвет или убрать подчеркивание гиперссылок в Word?

    Как изменить цвет или убрать подчеркивание гиперссылок в Word?

    Когда вы вставляете гиперссылки в Word, цвет гиперссылки по умолчанию синий. А если вы хотите изменить цвет гиперссылки или удалить подчеркивание гиперссылок, вы можете сделать следующие шаги:

    Изменить цвет гиперссылок в Word

    Убрать подчеркивание гиперссылок в Word

    Изменить цвет гиперссылок в Word

    1. в Главнаяменю.

    2. Щелкните маленький значок под Изменить стили , чтобы открыть Стили окно.

    3. Нажмите Раскрывающееся меню гиперссылки > Изменить …

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

    4. в Изменить окно, щелкните синий цвет (цвет по умолчанию) и выберите нужный цвет из раскрывающегося меню.

    5. Нажмите OK для внесения изменений.

    Убрать подчеркивание гиперссылок в Word

    1. Нажмите Главная вкладка и перейдите к Стили кнопку запуска для отображения Стили панель. Смотрите скриншот:

    2. в Стили панели, щелкните значок раскрывающегося списка или щелкните правой кнопкой мыши Гиперссылка, А затем нажмите Изменить из Гиперссылка выпадающее меню. Смотрите скриншот:

    3. в Изменить стиль диалога, нажмите подчеркивание затем нажмите OK чтобы закрыть диалог. Смотрите скриншот:

    4. Затем закройте Стили панель, если она вам больше не нужна. Вы можете увидеть результат, как показано ниже:

    Относительные статьи: