HTML, Excel, Word, SEOОсновы Html ⇒ Внешний лист стилей css. Форматирование гиперссылок

ОСНОВЫ HTML

Справочная информация:
Справочник HTML-тегов
Шаблоны для сайтов
Как раскрутить сайт: шаг за шагом
Учебник HTML (хтмл)
Старт
Основные тэги
Заголовки и комментарии
Специальные символы
Форматирование текста ч.1
Форматирование текста ч.2
Форматирование текста ч.3
Создание списков
Работа с графикой ч.1
Работа с графикой ч.2
Работа с графикой ч.3
Работа с графикой ч.4
Таблицы ч.1
Таблицы ч.2
Таблицы ч.3
Гиперссылки
Фреймы
Что такое формы
Что такое JavaScript
Маленькие секреты Вэб-дизайна
Эффект постепенной прорисовки
Карта ссылок
Внутренний лист стилей
Работа с листами стилей
Свойства шрифта - font
Свойства текста
Свойство фона - background
Рамки и размеры
Относительное и абсолютное позиционирование элементов
Основные мета тэги
Таблица дескрипторов HTML и их атрибутов
Таблица свойств css
Заключительное слово
HTML-редакторы
Что такое HTML-редактор
FrontPage 2003
Adobe GoLive CS
Macromedia Dreamweaver MX 2004
HomeSite
CuteSite Builder
Namo WebEditor
CoffeeCup HTML Editor
1stPage 2000
Arachnophilia
HotDog Professional
CSE HTML Validator Pro
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-страница.


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

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



В начало страницы



В начало страницы