Как изменить цвет ссылок вашего блога или сайта?

Привет, друзья! Устраивает ли вас цвет ссылок на вашем блоге или сайте? Если нет, и вы хотите изменить цвет ссылки, не беда. Сегодня я научу вас, как изменить цвет ссылки в HTML и CSS коде.

изменить цвет ссылок

То, что я вам расскажу, будет работать на любом движке, неважно будет это WordPress или uCoz, ведь HTML и CSS используют все движки.

Цвет ссылки в CSS

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

Значение, каким цветом выводить ссылки на сайте прописывается в CSS коде, чаще всего в файле style.css. Находится этот файл всегда в корневой папке сайта.

Чтобы изменить цвет всех ссылок на сайте в CSS вам нужно открыть файл style.css и найти в нем код отвечающий за вывод ссылок. Просто найдите упоминание link или Link Styles.

стиль ссылок

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

Цвет CSS ссылок в обычном состоянии.

a:link {   color: #0169D3; /* Цвет ссылок */   }

CSS цвет ссылок при нажатии на нее.

a:active{   color: #0169D3; /* Цвет активной ссылки */   }

Цвет посещенной ссылки.

a:visited{   color: #0169D3; /* Цвет посещенной ссылки */   }

Соответственно, чтобы цвет ссылок в спокойном состоянии, мы меняем значение color: #0169D3 на свой цвет в псевдоклассе a:link.

Чтобы изменить цвет посещенных ссылок, нужно изменить значение color: #0169D3 в псевдоклассе a:visited.

Если вы хотите, чтобы ваши ссылки стали подчеркнутыми, нужно вписать в CSS код ссылки значение text-decoration:underline; как на примере:

a:link {    text-decoration:underline;   color: #0169D3;    }

А если наоборот хотите убрать подчеркивание ссылки, нужно вписать значение text-decoration:none;

a:link { text-decoration:none;   color: #0169D3;    }

Как менять цвет ссылок в CSS думаю понятно. Теперь давайте рассмотрим как изменить цвет ссылки в HTML коде.

HTML цвет ссылки

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

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

<a href="http//:sait.ru">анкор ссылки</a>

Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:

<a href="http//:sait.ru"><span style="color: #f61212;">анкор ссылки</span></a>

Таким образом я выделил ссылку красным цветом в HTML коде.

Как видите все довольно просто. В статье я рассказал лишь основы о стиле выделения ссылок в коде. Но благодаря CSS можно создать свой уникальный стиль выделения ссылок, например сделать всплывающие подсказки, вставить тень, сделать ссылку мигающей. Но об этом я постараюсь рассказать уже в другой статье.

Подписывайтесь на обновления блога, чтобы не пропустить!

Рейтинг автора
Автор статьи
Назыров Андрей
Основатель блога и его главный редактор.
Написано статей
105
Поделись информацией:
Помогла статья? Оцените её
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Оценок: 1
Загрузка...

Подписка на рассылку

Комментарии
  1. Андрей Косолапов

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

    • Андрей Назыров

      Ну , это то же самое, просто ты делаешь это в визуальном редакторе. А у каждой CMS он отличается и мало ли. А HTML код он один 🙂

  2. Алексей

    Стили-css, сколько мороки было с ними поначалу, зато теперь построить любой графический элемент кодом, как два пальца.

    • Андрей Назыров

      Это да )) Я знаю лишь основы CSS но уже эти знания открывают такую массу возможностей.

  3. Ольга

    Статья понравилась, спасибо Андрей. Будем менять цвет ссылок =)

    • Андрей Назыров

      😉

  4. Долматов

    Я прямо в HTML редакторе эти коррективы вношу, но видимо есть другие способы об которых я узнал из вашей статьи! Спасибо!!!)

    • Андрей Назыров

      Пожалуйста!

  5. Надежда

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

  6. Наталья

    Действительно, простая и понятная статья, с четким руководством к действию. Тем, кто ни разу не слышал про HTML и CSS вполне под силу будет все это выполнить. Только, если можно, добавьте для чайников информацию о том, что такое #0169D3 и как выбрать понравившийся цвет и получить его код.

  7. Николай

    Я в роде как умею делать такие изменения, но все равно прочел 🙂 и понял, что да, умею :B
    Спасибо!

  8. Александр Викторович

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

  9. Евгений

    Написано понятно и доступно. Надо будет провести несколько экспериментов и вернуть свой сжатый css файл в нормальный.

  10. Юлия

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

  11. Сергей

    Сейчас большинство шаблонов имеют настройки цвета ссылок в своих настройках.

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