Как поменять цвет ссылок в css

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

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

В старых версиях HTML существовали специальные атрибуты тега , позволяющие изменять цвет ссылок на HTML-странице, это link , alink и vlink , но в современном HTML их нет. Поэтому мы опять будем использовать стили (CSS), а значит что? Вот и неправильно, не атрибут style , а так называемые внутренние стили. Для этого нам надо будет в «шапку» страницы ( ) вставить тег , а внутри него указать один или несколько следующих стилей:

C тегом вы пока еще не знакомы, но тут и учить нечего. Он используется для внутренних стилей, которые будут действовать в пределах всей страницы. А его атрибут type как раз и говорит браузеру о том, что внутри находятся стили (CSS), а не обычный текст.

Пример изменения цвета ссылок в HTML-странице

     a:link a:visited a:hover a:active 
Как создать сайт





 
Справочники по HTML и CSS
  

Результат в браузере

Если вы недавно были на страницах указанных в ссылках, то естественно ссылки будут сразу окрашены в «посещенный» цвет.

Изменяем цвет отдельных ссылок

Иногда вам может понадобиться, чтобы цвет определенной ссылки отличался от остальных. Тогда укажите внутри тега атрибут style= «color:цвет» и задайте нужный цвет.

Пример использования тегов

     a:link a:visited a:hover a:active 
Сайт Seodon.ru
 
Здесь вы можете найти справочник по тегам HTML 





  

Результат в браузере

1. Создайте три блока DIV и пусть их фон будет цвета #EEEEEE.
2. Разместите в каждом DIV’е по одной ссылке. Пусть они ведут на любые сайты в интернете.
3. В каждой ссылке сделайте так, чтобы при наведении на нее курсора мыши появлялась соответствующая подсказка.
4. Пусть цвет непосещенной ссылки будет #FF0099, посещенной — #009933, при наведении курсора мыши — #0099FF, активной — #00FF66.

Разделы сайта

• Как сделать сайт
  Самому и бесплатно
• Учебник HTML
  Для начинающих
• Учебник CSS
  Для новичков
• Справочники
  По HTML и CSS
• Примеры
  HTML и CSS
• Ссылки
  Полезные сайты для вебмастеров
• Инструментарий
  Программы для создания сайтов

Учебник HTML

• Введение
• Что такое HTML?
• Теги и синтаксис HTML
• Атрибуты HTML-тегов
• Общие и текст
• Структура HTML-документа
• Параграфы и заголовки
• Как изменить шрифт?
• Меняем цвет текста и фона
• Выравнивание содержимого
• Цитаты и обрыв строки
• Что такое спецсимволы HTML?
• Горизонтальные линии
• Группирование элементов
• Комментарии в HTML
• Ссылки
• Cсылки и их разновидности
• Меняем цвета ссылок
• Ссылки на электронную почту
• Якоря — создаем закладки
• Изображения
• Изображения
• Изображения для фонов
• Изображения — ссылки
• Таблицы
• Таблицы
• Границы, рамки и отступы HTML-таблиц
• Объединение ячеек таблицы
• Вложенные таблицы
• Списки
• Нумерованные и маркированные списки
• Метатеги
• Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

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

Как поменять цвет ссылок в css

Это обсуждение закрыто.
Здравствуйте! Не подскажете, как можно изменить цвет ссылки?
(отредактировал(а): Рикошет)
ПОСМОТРЕТЬ ПРЕДЫДУЩИЕ ОТВЕТЫ
Это класс нужно также прописать в MediaWiki:Wikia.css?
(отредактировал(а): Рикошет)
(отредактировал(а): Kuzura)

Классы «hoverlink» и «link» уже есть, а просто вставить в шаблон, чтобы все ссылки меняли цвет, просто не получается

(отредактировал(а): Рикошет)

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

(отредактировал(а): Harbinger007)

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

(отредактировал(а): Kos730)

Извиняюсь за некропостинг, но возможно ли как то изменить в персональном CSS цвет ВСЕХ ссылок вики на тот, который тебе хочется?

(отредактировал(а): Сталкер Косой)
(отредактировал(а): Fngplg)
Написать в старой теме сразу после просьбы не писать в старой теме это умный поступок.
(отредактировал(а): Kos730)
можно закрыть же
(отредактировал(а): Fngplg)
А можно не писать в старых темах.
(отредактировал(а): Kos730)

Наши ресурсы

В социальных сетях

Обзор

• Что такое Фэндом?
• О нас
• Вакансии
• В прессе
• Обратная связь
• Условия использования
• Конфиден­циальность
• Общая карта сайта
• Локальная карта сайта

Сообщество

• Вики Сообщества
• Поддержка
• Справка
• Запретить продажу данных

Как поменять цвет ссылок в css

x

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

Артём Поликарпов

Волнующий вопрос! К сожалению, сейчас нет хорошего способа сделать это.

Подчёркивание через позволяет управлять цветом и стилем линии, но не её позицией.

A < color: blue; text-decoration: none; border-bottom: 1px solid red; >A.dotted < border-bottom-style: dotted; >A.dashed

solid	dotted	dashed
qwerty	qwerty	qwerty

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

solid	dotted	dashed
qwerty	qwerty	qwerty

Метод с уменьшенным годится только для ссылкок из одного слова, длинные разрывают поток и ломают подчёркивание:

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

Если разные стили линии не нужны, можно перекрасить стандартную с помощью вложенного элемента:

A < color: red; >A > SPAN

qwerty

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

qwerty

Сергей Чикуёнок изобрёл подчёркивания ЦСС -градиентами:

A < color: blue; text-decoration: none; background: linear-gradient(left, red, red 100%); background-position: 0 95%; background-size: 10px 1px; background-repeat: repeat-x; >A.dashed < background: linear-gradient(left, red, red 60%, transparent 60%); background-size: 10px 1px; background-position: 0 95%; background-repeat: repeat-x; >A.dotted

solid	dotted	dashed
qwerty	qwerty	qwerty

Его способ не работает в старых браузерах и достаточно неудобен на практике.

В будущем, когда все браузеры узнают свойства , и из черновика ЦСС3 , ваша задача решится элементарно:

Пример, демонстрирующий новые свойства, работает в Файрфоксе:

solid	double	dotted	dashed	wavy
overline	qwerty	qwerty	qwerty	qwerty	qwerty
qwerty	qwerty	qwerty	qwerty	qwerty
underline	qwerty	qwerty	qwerty	qwerty	qwerty

• Знаете ли вы, что
• В бюро такие ссылки называют «дыдыдышками».

• См. советы
• О системе обозначений ссылок в бюро;
• о ссылке на учебный центр.

Это был совет о разработке . Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.