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

<a href="https://wm-school.ru/">Перейти на сайт wm-school</a>

В данном примере ссылка вида <a href=»https://wm-school.ru»>Перейти на сайт wm-school</a> является абсолютной и ведет на главную страницу сайта wm-school.ru. Если при указании в качестве ссылки доменного имени не указано имя файла, тогда по умолчанию отображается индексный файл (как правило index.html).

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

Относительные ссылки могут быть использованы только для того, чтобы создать ссылку на страницу с этого же сайта, в то время как абсолютные ссылки, как правило, применяются для создания ссылки на другие сайты. Относительные URL-aдpeca представляют собой сокращенную версию абсолютных, при создании ссылок на другие страницы внутри одного и того же сайта нет необходимости указывать в URL­aдpece доменное имя. Относительная ссылка описывает путь к указанному документу относительно местоположения веб-страницы, на которой находится ссылка. Возможны следующие варианты:

HTML код ссылки

Как написать код ссылки HTML.

Текстовая ссылка HTML

Текстовая ссылка

Код создаст эту ссылку:

Текстовая ссылка

HTML-ссылка на ту же страницу

Код якорной ссылки:

Генератор кода ссылки

Код создаст эту ссылку:

Генератор кодов ссылок

При нажатии на ссылку браузер перейдет к заголовку ниже с этим кодом:

Генератор кода ссылки

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

Код создаст эту ссылку:

HTML ссылка на электронную почту

Код создаст эту ссылку:

Отправить почту

См .: HTML-ссылка mailto.

HTML-ссылка на файл для загрузки

HTML ссылка открыть в новом окне

Эта ссылка откроется в новом окне или вкладке:

target = «_ blank» > Открыть страницу в новом окне

Код создаст эту ссылку:

Открыть страницу в новом окне

Ссылка на кнопку HTML

Без javascript:

С javascript:

onclick = «window.location.href = ‘ссылка / html-button-link.htm’ «>

Цвет звена

Изменение цвета ссылки выполняется с помощью стиля css:

Ссылка на цветную страницу

Код сгенерирует эту ссылку:

Ссылка, цветная страница

Изменение цвета фона ссылки выполняется с помощью стиля css:

Ссылка на цветную страницу

Код сгенерирует эту ссылку:

Ссылка, цветная страница

Relative vs.ссылки абсолютного пути

Это ссылка с относительным путем URL:

Код сгенерирует эту ссылку:

Текстовая ссылка

Это ссылка с абсолютным путем URL:

Текстовая ссылка

Код сгенерирует эту ссылку:

Текстовая ссылка

Генератор HTML-кодов

См. Также

Изменение цвета ссылки

Как вы могли заметить при просмотре веб-сайтов, цвет ссылок по умолчанию для браузеров синий, цвет посещенных ссылок по умолчанию — фиолетовый, а цвет активной ссылки по умолчанию — красный.Что вы будете делать, если эти цвета по умолчанию не работают для вас из-за обычного цвета другого текста на вашей веб-странице и / или из-за фона вашей веб-страницы? Ну, вы можете изменить цвета ссылок по умолчанию. Чтобы изменить эти цвета ссылок по умолчанию, вы можете использовать три атрибута в теге body или определить цвета ссылок в таблице стилей.

Изменение цвета ссылки с помощью атрибутов ссылки тега

Три атрибута цвета ссылки на веб-странице:

1. ссылка — это изменяет нормальный цвет ссылки .Другими словами, этот атрибут изменяет цвет ссылок синий по умолчанию на другой цвет по вашему выбору.
2. vlink — этот атрибут изменяет цвет посещенных ссылок . С помощью этого атрибута вы можете изменить цвет ссылки фиолетовый по умолчанию на любой другой цвет по вашему выбору.
3. alink — Этот атрибут изменяет цвет активной ссылки . Цвет активной ссылки просто означает цвет, отображаемый при нажатии кнопки мыши над ссылкой.

Эти атрибуты необходимо добавить в тег с выбором цвета для каждого атрибута:

Выход:

Изменение цвета ссылок с помощью объявления таблицы стилей

Поскольку три упомянутых выше атрибута (ссылка, vlink и alink) устарели в пользу таблиц стилей, вы должны изменить цвет ссылки с помощью таблиц стилей. Это, однако, не означает, что ваш HTML-документ будет недействительным, если вы используете эти атрибуты в теге body для изменения цвета ссылок; скорее, рассмотрите возможность использования объявления таблицы стилей для изменения цвета ссылок на случай, если в будущем браузеры перестанут поддерживать эти устаревшие атрибуты.

Ниже показан пример объявления таблицы стилей для изменения цвета ссылок:

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

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

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

WeetHet - HTML - Как изменить цвет или шрифт ссылки?

На этой странице ...

Как это делается?

Чтобы показать вам разницу:

Нормальный линк мы хотим быть зелёным

Blabla?

приведет к следующему: Blabla ?

Все, хотя мы определенно указали, что ссылка должна быть ЗЕЛЕНОЙ (009900 = красный 00, зеленый 99 и синий 00)!

См. Ту же ссылку, теперь используя тег внутри :

Blabla?

приведет к: Blabla ?

Это не только работает с цветами, но и также используя шрифт и стиль.

Стили ссылок - Изучение веб-разработки

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

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

Состояния ссылок

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

• Ссылка : Ссылка, у которой есть пункт назначения (то есть не только именованный якорь), стилизованная с использованием псевдокласса : ссылка .
• Посещено : Ссылка, когда она уже была посещена (существует в истории браузера), оформленная с использованием псевдокласса : посещено .
• Hover : ссылка при наведении на нее указателя мыши, стилизованная с использованием псевдокласса : hover .
• Focus : ссылка, когда она была сфокусирована (например, перемещена пользователем клавиатуры с помощью клавиши Tab или аналогичной, или программно сфокусирована с использованием HTMLElement.focus () ) - это оформлено с использованием : focus псевдокласс.
• Активный : ссылка, когда она активна (например,г. нажал), оформленный с использованием псевдокласса : active .

Стили по умолчанию

В следующем примере показано, как ссылка будет вести себя по умолчанию (CSS просто увеличивает и центрирует текст, чтобы он больше выделялся).

  
  Простая ссылка  
  

  п {
  font-size: 2rem;
  выравнивание текста: центр;
}  

Примечание : Все ссылки в примерах на этой странице являются поддельными - вместо реального URL-адреса ставится # (решетка или знак решетки).Это связано с тем, что если бы были включены настоящие ссылки, нажатие на них нарушило бы примеры (вы бы получили ошибку или страницу, загруженную во встроенном примере, с которой вы не могли бы вернуться). # просто ссылки на текущую страницу.

Вы заметите несколько вещей, исследуя стили по умолчанию:

• Ссылки подчеркнуты.
• Непосещенные ссылки синие.
• Посещенные ссылки фиолетовые.
• При наведении курсора на ссылку указатель мыши превращается в маленький значок руки.
• Сфокусированные ссылки имеют контур вокруг них - вы должны иметь возможность сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac вам нужно использовать опцию + вкладку или включить Полный доступ с клавиатуры: возможность выбора всех элементов управления путем нажатия Ctrl + F7 .)
• Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы щелкаете по ней.)

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

• Используйте подчеркивание для ссылок, но не для других вещей. Если вы не хотите подчеркивать ссылки, по крайней мере, выделите их каким-либо другим способом.
• Заставить их каким-то образом реагировать при наведении / фокусировке и немного иначе при активации.

Стили по умолчанию можно отключить / изменить с помощью следующих свойств CSS:

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

Примечание : Вы не ограничены только указанными выше свойствами для оформления ваших ссылок - вы можете использовать любые свойства, которые вам нравятся. Только постарайтесь не сходить с ума!

Стили для некоторых ссылок

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

Для начала напишем наши пустые наборы правил:

  a {

}


ссылка {

}

а: посетил {

}

фокус {

}

a: hover {

}

a: active {

}  

Этот порядок важен, потому что стили ссылок основаны друг на друге, например, стили в первом правиле будут применяться ко всем последующим, и когда ссылка активируется, она обычно также зависает. Если вы разместите их в неправильном порядке и измените одни и те же свойства в каждом наборе правил, все будет работать не так, как вы ожидаете.Чтобы запомнить порядок, вы можете попробовать использовать мнемонику, например, L o V e F уши HA te.

Теперь давайте добавим дополнительную информацию, чтобы правильно оформить этот стиль:

  body {
  ширина: 300 пикселей;
  маржа: 0 авто;
  размер шрифта: 1,2 бэр;
  семейство шрифтов: без засечек;
}

п {
  высота строки: 1,4;
}

a {
  наброски: нет;
  текстовое оформление: нет;
  отступ: 2px 1px 0;
}

ссылка {
  цвет: # 265301;
}

а: посетил {
  цвет: # 437A16;
}

фокус {
  нижняя граница: сплошная 1px;
  фон: # BAE498;
}

a: hover {
  нижняя граница: сплошная 1px;
  фон: #CDFEAA;
}

a: active {
  фон: # 265301;
  цвет: #CDFEAA;
}  

Мы также предоставим образец HTML для применения CSS к:

  
 Доступно несколько браузеров, например  Mozilla
Firefox ,  Google Chrome  и
 Microsoft Edge .
  

Объединение этих двух дает следующий результат:

Итак, что мы здесь сделали? Это определенно отличается от стиля по умолчанию, но все же обеспечивает достаточно знакомый интерфейс, чтобы пользователи знали, что происходит:

• Первые два правила не особо интересны для этого обсуждения.
• Третье правило использует селектор и , чтобы избавиться от подчеркивания текста по умолчанию и контура фокуса (который в любом случае различается в разных браузерах), и добавляет небольшое количество отступов к каждой ссылке - все это станет ясно позже.
• Затем мы используем селекторы a: link и a: loaded , чтобы установить несколько цветовых вариаций для непосещенных и посещенных ссылок, чтобы они были различимы.
• Следующие два правила используют a: focus и a: hover , чтобы установить для сфокусированных и зависших ссылок разные цвета фона, а также подчеркивание, чтобы ссылка еще больше выделялась. Здесь следует отметить два момента:
  • Подчеркивание было создано с использованием border-bottom , а не text-decoration - некоторые люди предпочитают это, потому что первый имеет лучшие варианты стиля, чем второй, и нарисован немного ниже, поэтому не пересекает потомки подчеркнутого слова (e.г. хвосты на g и y).
  • Значение border-bottom установлено как 1px сплошной , без указания цвета. При этом граница приобретает тот же цвет, что и текст элемента, что полезно в подобных случаях, когда текст в каждом случае имеет другой цвет.
• Наконец, a: active используется, чтобы дать ссылкам инвертированную цветовую схему во время их активации, чтобы было ясно, что происходит что-то важное!

Активное обучение: создавайте собственные ссылки

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

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

Игровой код

  

   
 Ввод HTML 
 
   <p> Доступно несколько браузеров, например <a href="#"> Mozilla
 Firefox </a>, <a href="#"> Google Chrome </a> и
<a href="#"> Microsoft Edge </a>.</p> 

   
 Ввод CSS 
 
   a {

}

ссылка {

}

а: посетил {

}

фокус {

}

a: hover {

}

a: active {

} 

   
 Вывод 
 
  
 
  

    
    
  

  

  var htmlInput = document.querySelector (". Html-input");
var cssInput = document.querySelector (". css-input");
var reset = документ.getElementById ("сброс");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector (". output");
вар решение = документ.getElementById ("решение");

var styleElem = document.createElement ('стиль');
var headElem = document.querySelector ('голова');
headElem.appendChild (styleElem);

function drawOutput () {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener ("клик", function () {
  htmlInput.value = htmlCode;
  cssInput.значение = cssCode;
  drawOutput ();
});

solution.addEventListener ("клик", function () {
  htmlInput.value = htmlCode;
  cssInput.value = 'p {\ n font-size: 1.2rem; \ n font-family: sans-serif; \ n line-height: 1.4; \ n} \ n \ na {\ n наброски: нет; \ n text-decoration: none; \ n padding: 2px 1px 0; \ n} \ n \ na: link {\ n color: # 265301; \ n} \ n \ na: посещено {\ n color: # 437A16; \ n } \ n \ na: focus {\ n border-bottom: 1px solid; \ n background: # BAE498; \ n} \ n \ na: hover {\ n border-bottom: 1px solid; \ n background: #CDFEAA; \ n} \ n \ na: активный {\ n фон: # 265301; \ n цвет: #CDFEAA; \ n} ';
  drawOutput ();
});

htmlInput.addEventListener («вход», drawOutput);
cssInput.addEventListener («ввод», drawOutput);
window.addEventListener ("загрузка", drawOutput);
  

Распространенной практикой является включение значков в ссылки, чтобы лучше понять, на какой тип контента указывает ссылка. Давайте посмотрим на действительно простой пример, который добавляет значок к внешним ссылкам (ссылкам, ведущим на другие сайты). Такой значок обычно выглядит как маленькая стрелка, указывающая из коробки - для этого примера мы будем использовать этот отличный пример из значки8.com.

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

  
 Для получения дополнительной информации о погоде посетите нашу  страницу погоды ,
посмотрите  погоду в Википедии  или проверьте
из  погоды на сайте Extreme Science . 
  

Далее CSS:

  body {
  ширина: 300 пикселей;
  маржа: 0 авто;
  семейство шрифтов: без засечек;
}

п {
  высота строки: 1.4;
}

a {
  наброски: нет;
  текстовое оформление: нет;
  отступ: 2px 1px 0;
}

ссылка {
  цвет синий;
}

а: посетил {
  цвет: фиолетовый;
}

a: focus, a: hover {
  нижняя граница: сплошная 1px;
}

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

a [href * = "http"] {
  фон: url ('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  размер фона: 16 пикселей 16 пикселей;
  отступ справа: 19 пикселей;
}  

Так что здесь происходит? Мы пропустим большую часть CSS, поскольку это та же информация, которую вы просматривали ранее.Последнее правило, однако, интересно - здесь мы вставляем настраиваемое фоновое изображение во внешние ссылки аналогично тому, как мы обрабатывали настраиваемые маркеры в элементах списка в предыдущей статье - на этот раз, однако, мы используем сокращение фона вместо отдельных свойства. Мы устанавливаем путь к изображению, которое хотим вставить, указываем без повтора , чтобы была вставлена ​​только одна копия, а затем указываем позицию как 100% пути справа от текстового содержимого и 0 пикселей от вершина.

Мы также используем background-size , чтобы указать размер, который мы хотим, чтобы отображалось фоновое изображение - полезно иметь значок большего размера, а затем изменять его размер, как это необходимо для адаптивного веб-дизайна. Однако это работает только с IE 9 и более поздними версиями, поэтому, если вам нужно поддерживать эти старые браузеры, вам просто нужно изменить размер изображения и вставить его как есть.

Наконец, мы устанавливаем padding-right для ссылок, чтобы освободить место для отображения фонового изображения, чтобы мы не перекрывали его с текстом.

Последнее слово - как мы выбирали только внешние ссылки? Что ж, если вы правильно пишете свои HTML-ссылки, вы должны использовать только абсолютные URL-адреса для внешних ссылок - более эффективно использовать относительные ссылки для ссылки на другие части вашего собственного сайта (как с первой ссылкой). Поэтому текст «http» должен появляться только во внешних ссылках (таких как вторая и третья), и мы можем выбрать его с помощью селектора атрибутов: a [href * = "http"] выбирает элементов, но только если у них есть атрибут href со значением, содержащим «http» где-то внутри.

Вот и все - попробуйте еще раз вернуться к разделу активного обучения выше и опробовать эту новую технику!

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