Как изменить цвет ссылок вашего блога или сайта?
Привет, друзья! Устраивает ли вас цвет ссылок на вашем блоге или сайте? Если нет, и вы хотите изменить цвет ссылки, не беда. Сегодня я научу вас, как изменить цвет ссылки в 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 коде выглядит следующим образом:
анкор ссылки
Для того, чтобы задать ей цвет, нужно добавить значение font color для текста ссылки, чтобы получилось вот так:
анкор ссылки
Таким образом я выделил ссылку красным цветом в HTML коде.
Как видите все довольно просто. В статье я рассказал лишь основы о стиле выделения ссылок в коде. Но благодаря CSS можно создать свой уникальный стиль выделения ссылок, например сделать всплывающие подсказки, вставить тень, сделать ссылку мигающей. Но об этом я постараюсь рассказать уже в другой статье.
Подписывайтесь на обновления блога, чтобы не пропустить!
Загрузка...
А я вообще делаю еще проще. Если надо поменять цвет ссылки, то просто выделяю ее и нажимаю нужный цвет прямо в редакторе.
Ну , это то же самое, просто ты делаешь это в визуальном редакторе. А у каждой CMS он отличается и мало ли. А HTML код он один 🙂
Стили-css, сколько мороки было с ними поначалу, зато теперь построить любой графический элемент кодом, как два пальца.
Это да )) Я знаю лишь основы CSS но уже эти знания открывают такую массу возможностей.
Статья понравилась, спасибо Андрей. Будем менять цвет ссылок =)
😉
Я прямо в HTML редакторе эти коррективы вношу, но видимо есть другие способы об которых я узнал из вашей статьи! Спасибо!!!)
Пожалуйста!
Так доступно написано про изменение цвета ссылки в CSS, респект автору. Мне очень нравится когда все конкретно и по делу, сама так стараюсь писать. Добавила ваш сайт в закладки.
Действительно, простая и понятная статья, с четким руководством к действию. Тем, кто ни разу не слышал про HTML и CSS вполне под силу будет все это выполнить. Только, если можно, добавьте для чайников информацию о том, что такое #0169D3 и как выбрать понравившийся цвет и получить его код.
Я в роде как умею делать такие изменения, но все равно прочел 🙂 и понял, что да, умею :B
Спасибо!
С подобной рекомендацией знаком и даже смотрел у себя на блоге эти CSS, но вот как определить код нужного цвета так и не понял, то есть не знаю где его найти. Может быть копировать из генератора цветов, но это слишком не удобно. А цвет ссылок на своем блоге хотел бы изменить.
Можно воспользоваться программой Pixie, я о ней писал здесь — /kak-opredelit-kod-cveta.html
Написано понятно и доступно. Надо будет провести несколько экспериментов и вернуть свой сжатый css файл в нормальный.
а можно спросить как добавить иконку соцсети в блог?
у меня купленный шаблон, и мне не хватает еще двух иконок, подскажите пожалуйста.
картинки для них готовы, куда их вставлять — не знаю.)))
Здравствуйте, Юлия. У меня есть статья об этом /delaem-knopki-soc-setej-dlya-sajta-na-wordpress-s-plaginami-i-bez.html
Сейчас большинство шаблонов имеют настройки цвета ссылок в своих настройках.