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

Оформление ссылок 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; /* Цвет ссылки при нажатии */
}

Оцените статью
Добавить комментарий

  1. Анонимный

    ничего не понимаю.хочу вставить в свой блог часики,но не пойму как вставлять код. ну, допустим копирую код, а как этот код может превратиться в часики?

    Ответить
  2. Аноним

    Обязательно нужно вставлять код в режиме HTML, проверьте весь ли код Вы скопировали (нельзя пропустить ни один символ), для этого выделить код лучше при помощи клавиш клавиатуры Ctrl+A (выделить все). Некоторые блогохостинги не поддерживают флеш-формат часиков, поэтому вставить в блоги, находящиеся, например, на платформе mail.ru, привет.ru, невозможно. На Li.ru код часиков примет другой вид. На какой платформе находится Ваш блог?

    Ответить
  3. Анонимный

    Спасибо!
    Очень помогло ))))

    Ответить
  4. Анонимный

    Заморочно, но нужно и полезно. СПАСИБО. ЛиРу дает возможность комментировать
    только анонимно?((

    Тогда подписываюсь так: Lo_spero

    Ответить
  5. Анонимный

    Cпасибо ! все легко и просто даже начинающим..

    Ответить
  6. Анонимный

    Добрый день!
    Объясните пожалуйста (подробнее, если можно), как сделать - "Ссылку к заданному месту текста". Спасибо

    Ответить
  7. Аноним

    Про то, как сделать ссылку к заданному месту текста я писала в записи Ссылки внутри страницы. Если будет непонятно - пишите в комментариях.

    Ответить
  8. Анонимный

    Спасибо.Разобрался. Все работает

    Ответить
  9. Анонимный

    как вставить картинку в блог без поддержки ХТМЛ

    Ответить
  10. Аноним

    Нужно взять ссылку на изображение (об это я писала в теме про прямые ссылки на изображение и вставить в поле url (после нажатия кнопки вставки картинки в запись в режиме оформления).

    Ответить
  11. Юрий Чуйков

    Спасибо! Все нашел. Читаю Вас с удовольствием.

    Ответить
  12. Анонимный

    Как сделать --чтобы за мышкой тянулся шлейф на всю страницу --как у вас?

    Ответить
    1. Mycrib

      Я уже отвечала на этот вопрос здесь

      Ответить
  13. Россиянка

    Подскажите,как оформить ссылку на флешку,когда пишется открыть флеш в новом окне

    Ответить
  14. Иванова Наталья

    Россиянка, если я правильно поняла, то вам нужен этот код:
    <a href="ссылка на flash" target=_blank title="смотреть флеш">Посмотреть флеш</a>

    Ответить
  15. Vas414 Vas414

    Добрый день
    подскажите где можно найти код вашего архива блога справа.. раскрывающийся список

    Ответить
  16. Иванова Наталья

    Это стандартный гаджет для блога Blogger.com. Кодом на другие площадки не встраивается.

    Ответить