Home / Блоговедение / Как изменить цвет ссылок вашего блога или сайта?
Хостинг от Макхост

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

Привет, друзья! Устраивает ли вас цвет ссылок на вашем блоге или сайте? Если нет, и вы хотите изменить цвет ссылки, не беда. Сегодня я научу вас, как изменить цвет ссылки в 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 можно создать свой уникальный стиль выделения ссылок, например сделать всплывающие подсказки, вставить тень, сделать ссылку мигающей. Но об этом я постараюсь рассказать уже в другой статье.

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

Об авторе: Андрей Назыров

Приветствую Вас на своем блоге! Здесь Вы найдете всю необходимую информацию по созданию своего блога (сайта), его SEO оптимизации и последующего заработка.

17 комментариев

  1. Андрей Косолапов:

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

    Ответить
    • Андрей Назыров:

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

      Ответить
  2. Алексей:

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

    Ответить
    • Андрей Назыров:

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

      Ответить
  3. Ольга:

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

    Ответить
    • Андрей Назыров:

      😉

      Ответить
  4. Долматов:

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

    Ответить
    • Андрей Назыров:

      Пожалуйста!

      Ответить
  5. Надежда:

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

    Ответить
  6. Наталья:

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

    Ответить
  7. Николай:

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

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

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

    Ответить
  9. Евгений:

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

    Ответить
  10. Юлия:

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

    Ответить
  11. Сергей:

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

    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *