На я.ру и в интернете много уроков о том как создавать ссылку и как ее оформить, но все же, по просьбе санта. я посвящу этой теме новый урок.Вот как выглядит html-код обычной ссылки:
<a href="ССЫЛКА">ТЕКСТ ССЫЛКИ</a> |
Или в виде изображения:
<a href="ССЫЛКА"><img src="АДРЕС ИЗОБРАЖЕНИЯ"/></a> |
читать дальшеСо вторым вариантом все понятно, а если нет, можно посмотреть уроки клуба: Уроки
Здесь мы рассмотрим первый вариант оформления ссылок.
Чтобы оформить наш текст нужно написать внутри тега <a> тег style=" ", вот что может быть внутри style:
<a style="text-shadow: {ЧИСЛО}px {ЧИСЛО}px {ЧИСЛО}px #ЦВЕТ; text-decoration:{Значение}; border-bottom:{ЧИСЛО}px {Значение}; border:{ЧИСЛО}px {Значение}; color: #ЦВЕТ ТЕКСТА; font-family: ИМЯ ШРИФТА; font-style: СТИЛЬ ШРИФТА;" href="ССЫЛКА" target="{Значение}">ТЕКСТ ССЫЛКИ</a>. |
ТЕНЬ ТЕКСТА:
[text-shadow: {ЧИСЛО1}px {ЧИСЛО2}px {ЧИСЛО3}px #{ЦВЕТ};]-тень текста (ссылки). {ЧИСЛО1}px- сдвиг по x. {ЧИСЛО2}px- сдвиг по y. {ЧИСЛО3}px- радиус размытия. #{ЦВЕТ}- цвет тени. | ТЕКСТ Код: <a style="text-shadow: 5px 5px 3px #000000;">ТЕКСТ</a> |
ПОДЧЕРКИВАНИЕ И Т.П.:
[text-decoration:{Значение};]- добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом или отменяет и оформление. none; Отменяет и подчеркивание ссылки. line-through; Перечеркивание текста. overline; Линия проходит над текстом. underline; Устанавливает подчеркнутый текст. | Клуб by Instant Код:<a style="text-decoration:none;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a> Клуб by Instant Код:<a style="text-decoration:line-through;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a> Клуб by Instant Код:<a style="text-decoration:overline;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a> Клуб by Instant Код:<a style="text-decoration:underline;" href="http://clubs.ya.ru/4611686018427467549/">Клуб by Instant</a> |
ГРАНИЦА ВНИЗУ ТЕКСТА:
[border-bottom:{ЧИСЛО}px {Значение};]- толщина и стиль границы внизу. {ЧИСЛО}px- толщина границы. Значения: dotted; dashed; solid; double; groove; ridge; inset; outset; | ТЕКСТ Код:<a style="border-bottom:1px dotted;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:1px dashed;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:1px solid;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px double;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px groove;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px ridge;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px inset;">ТЕКСТ</a> ТЕКСТ Код:<a style="border-bottom:3px outset;">ТЕКСТ</a> |
РАМКА ВОКРУГ ТЕКСТА:
[border:{ЧИСЛО}px {Значение};]- толщину и стиль вокруг ссылки. {ЧИСЛО}px- толщина границы. Значения: dotted; dashed; solid; double; groove; ridge; inset; outset; | ТЕКСТ Код:<a style="border:1px dotted;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:1px dashed;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:1px solid;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px double;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px groove;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px ridge;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px inset;">ТЕКСТ</a> ТЕКСТ Код:<a style="border:3px outset;">ТЕКСТ</a> |
ЦВЕТ ТЕКСТА:
[color: #{ЦВЕТ ТЕКСТА};]- цвет текста. | ТЕКСТ Код:<a style="color: #ff2d2d;">ТЕКСТ</a> |
ШРИФТЫ:
[font-family: {ИМЯ ШРИФТА};] Шрифты: Monotype Corsiva Impact Georgia Lucida Console MS Mincho Haettenschweile Batang Segoe Print Comic Sans MS Mistral Verdana | Текст Код:<a style="font-family: Monotype Corsiva;">Текст</a> Текст Код:<a style="font-family: Impact;">Текст</a> Текст Код:<a style="font-family: Georgia;">Текст</a> Текст Код:<a style="font-family: Lucida Console;">Текст</a> Текст Код:<a style="font-family:MS Mincho;">Текст</a> Текст Код:<a style="font-family: Haettenschweile;">Текст</a> Текст Код:<a style="font-family: Batang;">Текст</a> Текст Код:<a style="font-family: Segoe Print;">Текст</a> Текст Код:<a style="font-family: Comic Sans MS;">Текст</a> Текст Код:<a style="font-family: Mistral;">Текст</a> Текст Код:<a style="font-family: Verdana;">Текст</a> |
СТИЛЬ ШРИФТА:
[font-style: {СТИЛИ ШРИФТА};] Значения: normal- обычное начертание текста. italic- курсив. oblique- наклонное начертание. |
ОТКРЫТИЕ ССЫЛКИ В НОВОМ ОКНЕ:
[target="{Значение}"] Значения: _blank - загружает страницу в новое окно браузера; _self -загружает страницу в текущее окно; | Клуб by Instant Код:<a href="http://clubs.ya.ru/4611686018427467549/" target="_blank">Клуб by Instant</a> Клуб by Instant Код:<a href="http://clubs.ya.ru/4611686018427467549/" target="_self">Клуб by Instant</a> |
Если у вас остались вопросы, задавайте их в комментариях этого урока)
Навигация по урокам сообщества: Перейти.