Форматирование гиперссылок
Попробуем придать гиперссылкам, расположенным на нашей странице, "опрятный" вид.
Для начала, создадим эти самые гиперссылки в левой колонке.
Пускай их будет три:
Раннее творчество
Портреты
Особенности стиля
Сами по себе гиперссылки вести никуда не будут пока, т.к. у нас нет еще никаких страниц, кроме главной.
Вот как будет теперь выглядеть наша 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 - форматирует ссылку на которую наведен в данный момент указатель мыши.
Для более ясного понимания, где какая ссылка, я выделил их все разными цветами. Естественно, в реальной жизни так никто не делает.
По самому форматированию, думаю, вы уже сами без труда разберетесь, но, на всякий случай, прокомментирую:
- размер шрифта;
- начертание - жирное;
- цвет шрифта;
- при наведении мышью ссылка подчеркивается;
- наименование шрифта.
