Как изменить цвет ссылки в Html

Жирный шрифт и курсив в html
Дата: 2012-03-01
Автор: admin

Как добавить сайт в поисковики
Дата: 2010-11-26
Автор: Олег Каминский

Кроссбраузерная верстка. Полезные советы
Дата: 2011-08-31
Автор: Олег Каминский

Как вставить видео с youtube на сайт
Дата: 2011-02-16
Автор: Олег Каминский

Как раскрутить интернет-магазин бесплатно
Дата: 2012-01-16
Автор: Олег Каминский

Как изменить цвет ссылки в Html



По умолчанию для ссылок в языке Html предусмотрен не совсем красивый синий цвет. Некоторых это не смущает, некоторых бесит, не важно. Сами ссылки внутри контента можно оставить и синими, это, возможно, даже и хорошо, ведь посетители больше привычные к ссылкам стандартного вида. Довольно часто приходится менять цвет ссылок при разработке разного рода меню.

Если ближе к делу, то давайте разберем, как изменить цвет ссылки при наведении, цвет активной ссылки, посещенной и обычной не посещенной ссылки.
Менять цвета ссылок лучше не прямо в самом html-документе (поисковые системы не приветствуют слишком нахлабученный код), лучше сделать отдельный файл, где вы будете прописывать стили для каждого элемента либо тега, в том числе и для ссылок.

Для этого необходимо создать и закачать в корень сайта с названием style.css (можно и другое название, лишь бы расширение было .css).

Для того чтобы подключить файл стилей необходимо между тегами <head> и </head> в теле html-документа прописать следующий код:

<link rel="stylesheet" type="text/css" href="style.css">

Если вы используете какой-нибудь движок, то такой файл со стилями 100% у вас уже есть, просто необходимо найти, где конкретно он располагается. Ну и цвета ссылкам там уже, наверняка, заданы, вам останется их просто подкорректировать.

В файле стилей пишем следующий код (если файл стилей уже есть, то тогда ищем подобные строчки, которые отвечают за стили ссылок):

a:link {text-decoration:none; color:#e22b2b;}
a:active {text-decoration:none; color:#e22b2b;}
a:visited {text-decoration:none; color:#e22b2b;}
a:hover {text-decoration:none; color:#FFFFFF;}

Напротив color: естественно необходимо установить свой цвет.

Как изменить цвет ссылки в Html

Рисунок1. Таблица цветов Html

Теперь немного по пунктам, что означает весь этот код:

a:link – здесь задаются стили непосредственно для самой ссылки;

a:active – задаются стили для активной ссылки;

a:visited – задаются стили для посещенной ссылки;

a:hover – задаются стили для ссылки при наведении на нее курсора мыши.

text-decoration:none убирает нижнее подчеркивание у ссылок, если хотите чтобы оно осталось, то ничего не пишите, потому что по умолчанию нижнее подчеркивание и так установлено.

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

Для этого в файле стилей необходимо создать новый класс. Я создам класс с названием new22 и напишу следующее:

a.new22:link {color:#e22b2b;}
a.new22:active {color:#e22b2b;}
a.new22:visited {color:#e22b2b;}
a.new22:hover {text-decoration:none; color:#FFFFFF;}

Ну а непосредственно в самом теле html-документа ссылку необходимо вывести следующим образом:

<a class="new22" href="http://sites-builder.ru">Вот такая ссылочка</a>

Вот, что из этого получилось: Вот такая ссылочка

Таким образом стили будут применяться только к классу new22. Именно этот класс мы и указали для нашей конкретной ссылки.



Поделитесь статьёй с друзьями:


Автор: Олег Каминский| Дата: 2012-03-22| Просмотров:(29332)| Комментов:(4)



Комментарии:

Автор: Влад
Дата: (2014-11-29)

Цвета можно подбирать тут http://www.artlebedev.ru/tools/colors/

Автор: Пасеан
Дата: (2014-11-19)

Спасибо, получилось! Правда в файле style.css не было этих строк, видимо поэтому все было по стандартному. Добавил все что надо, теперь могу менять цвет как хочу. Спасибо!

Автор: Елена
Дата: (2014-07-18)

Спасибо, отличная инструкция, все получилось.

Автор: Руслан
Дата: (2014-04-07)

Спасибо, очень интересно для новичка. Только у меня не получилось почему то. Во первых опытным путем выяснил, что цвет ссылки меняется классом .entry Добавил новый класс в файл темы style.css (код -a.new1:link{color... и т.д.) Добавляю ссылку на странице кодом <a class="new22" href...и т.д. Ссылка появляется, но со стандартным цветом ((( Редактирую с WordPress, тема Gallery - что не правильно? Заранее спасибо за полный ответ.

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

Введите сумму чисел с картинки: