
- Коды HTML для создания ссылок
- Отменить подчеркивание гиперссылки:
- Изменить шрифт, цвет и размер текста ссылки
- Гиперссылка в рамке
- Подчеркнутая ссылка
- Гиперссылка на фоне
- Гиперссылка на фоне-картинке (изображении)
- Как задать стили ссылки через a href style
- Что можно прописать в style:
- Как задать стили ссылки во внешнем CSS
Коды HTML для создания ссылок
- Код ссылки HTML без стилизации
<a href="АДРЕС СТРАНИЦЫ"> Ваш текст </a>
Пример: Шпаргалка по HTML для блоггера;
- Атрибут target="_blank" отвечает за открытие ссылки в новом окне:
Пример: Шпаргалка по HTML (откроется в новом окне);<a href="АДРЕС СТРАНИЦЫ" target="_blank">текст</a>
- Поясняющий всплывающий текст.
При наведении на ссылку всплывет текст, поясняющий данную гиперссылку
где title="Шпаргалка по HTML для блогера" - всплывающая подсказка.<a href="АДРЕС СТРАНИЦЫ" target="_blank" title="Пояснительный текст">текст ссылки</a>
Пример: Мой блог - Сделать фото ссылкой. При нажатии на изображение, откроется нужная страница.
<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, а именно:
- color - отвечает за цвет текста. style="color:green;"
- font-family - изменяет шрифт. style="font-family:Arial;"
- 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; /* Цвет ссылки при нажатии */ }
ничего не понимаю.хочу вставить в свой блог часики,но не пойму как вставлять код. ну, допустим копирую код, а как этот код может превратиться в часики?
Обязательно нужно вставлять код в режиме HTML, проверьте весь ли код Вы скопировали (нельзя пропустить ни один символ), для этого выделить код лучше при помощи клавиш клавиатуры Ctrl+A (выделить все). Некоторые блогохостинги не поддерживают флеш-формат часиков, поэтому вставить в блоги, находящиеся, например, на платформе mail.ru, привет.ru, невозможно. На Li.ru код часиков примет другой вид. На какой платформе находится Ваш блог?
Спасибо!
Очень помогло ))))
Заморочно, но нужно и полезно. СПАСИБО. ЛиРу дает возможность комментировать
только анонимно?((
Тогда подписываюсь так: Lo_spero
Cпасибо ! все легко и просто даже начинающим..
Добрый день!
Объясните пожалуйста (подробнее, если можно), как сделать - "Ссылку к заданному месту текста". Спасибо
Про то, как сделать ссылку к заданному месту текста я писала в записи Ссылки внутри страницы. Если будет непонятно - пишите в комментариях.
Спасибо.Разобрался. Все работает
как вставить картинку в блог без поддержки ХТМЛ
Нужно взять ссылку на изображение (об это я писала в теме про прямые ссылки на изображение и вставить в поле url (после нажатия кнопки вставки картинки в запись в режиме оформления).
Спасибо! Все нашел. Читаю Вас с удовольствием.
Как сделать --чтобы за мышкой тянулся шлейф на всю страницу --как у вас?
Я уже отвечала на этот вопрос здесь
Подскажите,как оформить ссылку на флешку,когда пишется открыть флеш в новом окне
Россиянка, если я правильно поняла, то вам нужен этот код:
<a href="ссылка на flash" target=_blank title="смотреть флеш">Посмотреть флеш</a>
Добрый день
подскажите где можно найти код вашего архива блога справа.. раскрывающийся список
Это стандартный гаджет для блога Blogger.com. Кодом на другие площадки не встраивается.