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 оптимизации и последующего заработка.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Ответить

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

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