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

Категория: HTML Опубликовано: 02.07.2017

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

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

В HTML параметры цвета задаются стандартно цифрами в шестнадцатеричном коде, в виде #rrggbb, где каждая по отдельности буква отвечает за красную (r или red), зеленую (g или green) и синюю (b или blue) составляющую. Для каждого цвета применяется шестнадцатеричное значение от 00 до FF, что отвечает диапазону от 0 до 255 в десятичном исчислении. Далее эти значения соединяются в одно шестизначное число, в котором некоторые цифры могут быть заменены латинскими буквами. Использование символа решетка (#) является обязательным и он должен располагаться вначале заданного параметра цвета.

Помимо использования палитры всевозможных цветов, не исключено применение ключевых слов, таких как: yellow, gray, green и т.п.

Как поменять цвет ссылки в HTML

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

<a href="/URL-адрес страницы" title="Ссылка HTML">Изменяем цвет ссылки</a>

Для того чтобы задать ссылке определенные параметры, используется свойство style. Для того чтобы свойство сработало его необходимо добавить внутрь тега. Вот как это будет выглядеть на примере:

<a href="/URL-адрес страницы" title="Ссылка HTML" style="color: #FF0000; text-decoration: none">Изменяем цвет ссылки</a>

Так как все ссылки по умолчанию имеют подчеркивание в нашем примере мы его запретили, использовав свойство text-decoration: none

В независимости от цветового оформления сайта, цвет ссылок также установлен по умолчанию. Изначально все ссылки (за исключением некоторых) синего окраса. Для изменения этого параметра используется свойство color, после которого через двоеточие устанавливается цветовой код HTML.

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

В отличии от HTML, средствами CSS выполнить эту задачу куда практичнее. Для того чтобы поменять цвет ссылок на всех страницах веб-проекта, используются следующие псевдоклассы, которые следует добавить к селектору a.

- a:active – активная ссылка;

- a:visited – ссылка, по которой осуществлялся визит;

- a:hover – ссылка при наведении мыши.

Для реализации задуманного создадим два файла.

Первым делом index.php:

<html>

<head>

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

</head>

<body>

<a href="/URL-адрес страницы" title="Ссылка">Изменяем цвет ссылки</a>

</body>

</html>

Второй файл назовем style.css. Заполним его следующим содержимым:

a {

color:#FF0000;

text-decoration:none

}

a:active {

color:#FF0000;

text-decoration:none

}

a:visited {

color:#666666;

text-decoration:none

}

a:hover {

color:#339900;

text-decoration: underline

}

Подобным способом мы присвоили всем ссылкам единый стиль, естественно кроме тех у которых задан свой.

Для того чтобы изменить цвет ссылки в CSS на готовом движке, в большинстве своем необходимо отредактировать файл style.css, который находится в корневой папке сайта. Воспользовавшись текстовым редактором Notepad++ откройте файл style.css выберите вкладку Поиск/Найти, впишите в поле поиска link либо Link Styles и нажмите кнопку «Искать далее». Таким способом вы существенно облегчите поиск вожделенной части кода.

Внесите правки к соответственному псевдоклассу, изменяя один из вышеприведенных стилей, добавленных к селектору a.

Надеюсь, у вас все получилось, и теперь вы знаете, как изменить цвет ссылки средствами CSS и HTML.

Спасибо за внимание и до скорого на страницах Stimylrosta.

сообщить об ошибке

Обнаружили граматическую ошибку? Пожалуйста, сообщите об этом администратору, т.е. мне, выделив текст и нажав сочетание горячих клавиш Ctrl+Enter

Не ленитесь, поделитесь!

Оставить комментарий

Просмотров: 1490

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


Защитный код
Обновить

X

Добро пожаловать!

Видимо вы используете браузерное расширение AdBlock, отвечающее за блокировку рекламы. Этот веб-проект существует и развивается за счет рекламных объявлений. Пожалуйста, внесите его в белый список. Заранее премного благодарен. Как отключить AdBlock

Читайте также

LSI-слова - особенности поиска и подбора

LSI-слова - особенности поиска и подбора

Подробнее
LSI-копирайтинг - тренд 2017 года

LSI-копирайтинг - тренд 2017 года

Подробнее
Как писать статьи? Секреты быстрой работы копирайтера

Как писать статьи? Секреты быстрой работы копирайтера

Подробнее
Как подобрать ключевые слова

Как подобрать ключевые слова

Подробнее