Как изменить ссылки в HTML: цвет, размер, шрифт текста

Коды HTML для создания ссылок

1. Код ссылки HTML без стилизации
   

   <a href="АДРЕС СТРАНИЦЫ"> Ваш текст </a>

   Пример: Шпаргалка по HTML для блоггера;

2. Атрибут target="_blank" отвечает за открытие ссылки в новом окне:
   

   <a href="АДРЕС СТРАНИЦЫ" target="_blank">текст</a>

   Пример: Шпаргалка по HTML (откроется в новом окне);
   
3. Поясняющий всплывающий текст.

   При наведении на ссылку всплывет текст, поясняющий данную гиперссылку

   <a href="АДРЕС СТРАНИЦЫ" target="_blank" title="Пояснительный текст">текст ссылки</a>
   

   где title="Шпаргалка по HTML для блогера" - всплывающая подсказка.
   Пример: Мой блог
4. Сделать фото ссылкой. При нажатии на изображение, откроется нужная страница.
   <a href="АДРЕС СТРАНИЦЫ" target="_blank" title="Пояснительный текст"><img src="URL картинки"></a>

Узнайте, как изменить стили ссылки css и узнать ссылку фото

Отменить подчеркивание гиперссылки:

<a href="АДРЕС СТРАНИЦЫ" style="text-decoration: none;">Ваш текст</a>

Пример: Азбука блогера

Изменить шрифт, цвет и размер текста ссылки

<a href="АДРЕС СТРАНИЦЫ" style="font-family:Monotype Corsiva;color:green;font-size:25px">Ваш текст</a>

Пример: ваша ссылка

Чтобы изменить цвет, шрифт, размер текста и другие стили в ссылке, необходимо изменить значения в атрибуте style, а именно:

1. color - отвечает за цвет текста. style="color:green;"
2. font-family - изменяет шрифт. style="font-family:Arial;"
3. font-size - уменьшаем или увеличиваем размер текста. style="font-size:20px;"

Гиперссылка в рамке

1. точками:

Ссылка

<a style="text-decoration: none; border-top;border-width:thin;border-style:dotted;color:blue;padding:4px 2px;" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>

2. пунктиром:

Здесь

<a style="text-decoration: none; border-bottom;border-width:medium;border-style:dashed;color:blue;padding:2px 4px;" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>

3. трехмерная вдавленная:

Вам сюда

<a style="text-decoration: none; border-top;border-width:thick;border-style:groove;border-color:green;padding:2px 4px;" href="АДРЕС СТРАНИЦЫ">Ваш текст</a>

4. Таким же образом можно задать и остальные рамки: сплошной чертой (solid), двойной (double), трехмерная выпуклая (ridge), трехмерная ступенька вверх (inset), трехмерная ступенька вниз (outset), изменяя параметр border-style

Подчеркнутая ссылка

1. Ссылка зеленого цвета, подчеркнутая красной чертой

Ваш текст

<a href="АДРЕС СТРАНИЦЫ" target="_blank" style="color:red; text-decoration:underline green;">Ваш текст</a>

1. Задается аналогично ссылке в рамке, только при этом задают параметр нижней границы рамочки: border-bottom

Например: Ваш текст

<a href="АДРЕС СТРАНИЦЫ" style="border-bottom: 2px dotted DarkGreen; text-decoration: none;">Ваш текст</a>

Гиперссылка на фоне

Таким образом возможно создание кнопки, которая по стилю оформления будет напоминать кнопку.

Ссылка

<a style="background-color: slateblue; color: lightcyan; padding: 3px 6px;border-radius:2px;"  href="АДРЕС СТРАНИЦЫ">Ссылка</a>

Изменение цвета фона ссылки после наведения на нее курсора

ТЕКСТ ССЫЛКИ

<a href="АДРЕС СТРАНИЦЫ"><font onmouseover="style.backgroundColor='#98FB98'; style.cursor='hand'" onMouseOut="style.backgroundColor='#FFDAB9';">ТЕКСТ ССЫЛКИ</font></a>

Гиперссылка на фоне-картинке (изображении)

Ссылка

<a style="background-image: url('Ссылка на изображение'); padding: 10px;" href="http://mycrib.ru/">Ссылка</a>

Как задать стили ссылки через a href style

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

<a href="URL" style="здесь можно прописать селекторы с блоком объявлений встроенного CSS;">Текст ссылки</a>

Что можно прописать в style:

В атрибуте style вы указываете CSS-свойства и их значения, разделённые точкой с запятой (;). Например:

• color: red; — цвет текста.
• text-decoration: none; — убрать подчёркивание.
• font-size: 16px; — размер шрифта.
• background-color: yellow; — цвет фона.
• padding: 5px 10px; — внутренние отступы.

Не смотря на то, что встроенные стили (через атрибут style) корректно работают, их использование не рекомендуется для больших проектов, так как это усложняет поддержку кода. Лучше выносить стили в отдельный CSS-файл или блок <style>

Как задать стили ссылки во внешнем CSS

По современным требованиям необходимо прописывать стили в отдельном CSS-файле с расширением css (например, style.css) или или в тег <style> внутри <head> вашего HTML-документа. Примеры задания оформления ссылки через внешние стили:

a:link {
    color: red; /* Цвет непосещённой ссылки */
    text-decoration: none; /* Убираем подчёркивание */
    font-size: 16px; /* Размер шрифта */
    font-family: Arial, sans-serif; /* Шрифт */
}

a:visited {
    color: purple; /* Цвет посещённой ссылки */
}

a:hover {
    color: blue; /* Цвет ссылки при наведении */
    text-decoration: underline; /* Подчёркивание при наведении */
    background-color: yellow; /* Фон при наведении */
}

a:active {
    color: green; /* Цвет ссылки при нажатии */
}