HTML, Excel, Word, SEO   HTML профессионально Форматирование гиперссылок

Форматирование гиперссылок

Попробуем придать гиперссылкам, расположенным на нашей странице, "опрятный" вид.

Для начала, создадим эти самые гиперссылки в левой колонке.

Пускай их будет три:
Раннее творчество
Портреты
Особенности стиля

Сами по себе гиперссылки вести никуда не будут пока, т.к. у нас нет еще никаких страниц, кроме главной.

Вот как будет теперь выглядеть наша html-страница.

Согласитесь, что такое расположение гиперссылок выглядит, мягко говоря, не очень эстетично. Расположим их вверху ячейки. Используем для решения этой задачи наш лист стилей. Создадим новый класс и назовем его, скажем, table1.

.table1{
	vertical-align: top;
	padding: 10px;
}

Обратите внимание, что перед названием класса ставится точка.

Если ранее мы форматировали конкретные теги html-страницы, то, создав класс, мы теперь можем его использовать для форматирования различных тегов.

В данном случае, мы форматируем левую колонку (а точнее, ячейку) средней таблицы. Вот как выглядит html-код:

<td width="25%" class="table1">
<a href="#">Раннее творчество</a><br>
<a href="#">Портреты</a><br>
<a href="#">Особенности стиля</a>
</td>

Вот как будет теперь выглядеть наша html-страница.

Теперь перейдем непосредственно к форматированию гиперссылок.

A:link{
	font-size:10pt;
	font-weight: bold;
	color: Blue;
	text-decoration: none;
	font-family: arial, Helvetica, sans-serif;
}
A:visited{
	font-size:10pt;
	font-weight: bold;
	color: Purple;
	text-decoration: none;
	font-family: arial, Helvetica, sans-serif;
}
A:active{
	font-size:10pt;
	font-weight: bold;
	color: Red;
	text-decoration: none;
	font-family: arial, Helvetica, sans-serif;
}
A:hover{
	font-size:10pt;
	font-weight: bold;
	color: Green;
	text-decoration: underline;
	font-family: arial, Helvetica, sans-serif;
}

Вот как будет теперь выглядеть наша html-страница.

• A:link - форматирует ссылку в "спокойном" состоянии, которая еще не посещалась;
• A:visited - форматирует ссылку в "спокойном" состоянии, которая уже посещалась;
• A:active - форматирует активную в данный момент ссылку;
• A:hover - форматирует ссылку на которую наведен в данный момент указатель мыши.

Для более ясного понимания, где какая ссылка, я выделил их все разными цветами. Естественно, в реальной жизни так никто не делает.

По самому форматированию, думаю, вы уже сами без труда разберетесь, но, на всякий случай, прокомментирую:
- размер шрифта;
- начертание - жирное;
- цвет шрифта;
- при наведении мышью ссылка подчеркивается;
- наименование шрифта.

top

Спасибо, что заглянули на сайт. Надеюсь, Вам понравилось. Заходите еще. Здесь всегда рады вам :)
При копировании материалов, размещенных на сайте, ссылка на первоисточник обязательна.

Если понравился этот сайт..

© 2005-2008
Юрий Кордык All Rights Reserved

E-mail:
admin@on-line-teaching.com