| | | | | |

Цвет ссылки css Изменить при наведении, подчеркивание

2018/04/05 Марат 2031 0 CSS | URL | ЦВЕТ |

Разберем тему цвета ссылки, а именно, цвет ссылки имеет 3 значения – это сам цвет ссылки, цвет ссылки при наведении, и цвет ссылки, посещенной плюс ко всему еще и подчеркивание - убрать или наоборот включить! И с этим всеми мы сегодня и будем разбираться.
И конечно же у нас есть тег, который посвящен ссылкам
1.

Видео на тему: Цвет ссылки css

Цвет ссылки css

Прежде чем начинать – мы уже касались тем, как создать файл css и как прикрепить его к странице.

По умолчанию цвет ссылки синий – и это выглядит не красиво! Сейчас я вам здесь не смогу его показать, потому, что к ссылке, уже прикреплены стили с другим цветом.

И цвет ссылки задается аналогично, как и обыкновенному тексту. Мы пока не дошли до текста. Поэтому будем делать здесь.

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

Вот ссылка.

Ну и стиль для нашей ссылки для нашего сайта.

a {

color: #259b24;

}

Но мы теперь не хотим, чтобы наша ссылка была зеленой – мы хотим, чтобы она была фиолетовая. Чтобы изменить цвет ссылки, именно в этом месте и чтобы цвет не изменился по всему сайту мы присвоим новый класс "simple" для данной ссылки

Код css :

a.simple {

color: #7109df;

}

код ссылки:

<a href="https://dwweb.ru/" class="simple">Вот ссылка с измененным цветом. </a>

Результат:

Вот ссылка с измененным цветом.

И конечно же обратите внимание. Что эффект при наведении исчез, а почему!? Потому. Что в данном случае мы просто создали новый класс для фиолетовой ссылки.

Как подобрать цвет ссылки, изменить цвет ссылки пример:

Я пользуюсь подбором старым способом, который узнал ещё при царе горохе!

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

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

1. Нажимаем по ссылке ПКМ и выйдет новое окно - где ищем показать код и для Яндекс браузера и Google Chrome - быстро показать код - кнопка "F12"
2. Ищем в коде нашу ссылку - она справа показана - видим, что напротив нашей ссылки цвет - нажимаем по нему и выбираем в новом окне тот цвет, который нужен.
Цвет ссылки css

Цвет ссылки при наведении

Не будем очень подробно касаться темы изменения ссылки при наведении, мы уже это делали на странице hover.

Лишь давайте сделаем быстрый пример, для того стиля. Что мы описали сверху и присвоим ему эффект при наведении на ссылку.

Берем тот же код, что шел выше добавляем ему ":hover" и в строке "color" - поставим, ну например красный...

Код css :

a.simple:hover {

color: #f8005a;

}

Код ссылки не изменен

Вот ссылка с измененным цветом при наведении.

Цвет ссылки посещенной

Ну и собственно тоже самое, что и с верхнем кодом, изменяем вместо hover поставим "visited"

a:visited {

color: #155bb5;

}

Вот цвет ссылки посещенной

4.

Подчеркивание ссылки.

Если нужно сделать простое подчеркивание при наведении, то ставим в стилях ,

text-decoration: underline;

в данном случае у нас цвет ссылки зеленый, вот поставим

color: #259b24;

Получим:

a.simple_3:hover {color: #259b24; text-decoration: underline; } Результат: ссылка

5.

Убрать подчеркивание ссылки.

Уберем hover зеленого цвета, цвет при наведении - hover останется по умолчанию... как основной цвет на всем сайте!

a.simple_4:hover { text-decoration: none ; } Результат: ссылка
Не забудь !

сказать спасибо!

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

Сообщений пока нет - Вы можете стать первым

BBcode