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