[clubbyinstant]

На я.ру и в интернете много уроков о том как создавать ссылку и как ее оформить, но все же, по просьбе санта. я посвящу этой теме новый урок.Вот как выглядит html-код обычной ссылки:

<a href="ССЫЛКА">ТЕКСТ ССЫЛКИ</a>

Клуб by Instant

Или в виде изображения:

<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- наклонное начертание.

Текст Код:<a style="font-style:normal;">Текст</a> Текст Код:<a style="font-style:italic;">Текст</a> Текст Код:<a style="font-style:oblique;">Текст</a>

ОТКРЫТИЕ ССЫЛКИ В НОВОМ ОКНЕ:

[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>

Если у вас остались вопросы, задавайте их в комментариях этого урока)
Навигация по урокам сообщества: Перейти.

@темы: Lessons