Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

POPULAR.RU

la_serg

Стильные таблицы

продолжение: начало #52, #53

В прошлой статье мы остановились на anchor pseudo class - что же это такое?

Все Вы видели ссылки, которые подчеркиваются (или меняют цвет, а иногда и размер) при наведении на них указателя - этот эффект достигается использованием anchor pseudo classes. Всего есть четыре псевдо класса ссылок, вот они: link, visited, active, hover.

Класс link отвечает за ссылку в ее нормальном состояние (читайте внимательнее и станет понятней;))) Этот класс аналогичен параметру link="" тега body. Как всегда небольшой примерчик:
A:link {color:navy}
A.redlink:link {color:red}

Здесь мы задаем цвет по умолчанию для ссылок. Первая строчка определяет цвет для всех ссылок в документе, вторая - переопределяет цвет для класса ссылок redlink. Таким образом ссылка вида <a href=http://lightnet.obninsk.ru>lightnet.obninsk.ru</a> будет синего цвета, а если мы добавим параметр class="redlink" - она станет красной.

Класс visited отвечает за посещенные ссылки. Мы можем задать цвет, отличный от цвета link'а, по умолчанию в MS IE посещенные ссылки выделяются фиолетовым цветом. Этот псевдокласс аналогичен параметру vlink="" тега body. Пример:
A:visited {color:navy}
P A:visited {color:cayan}

Первая строчка присваивает всем посещенным ссылкам цвет navy (т.е. сохраняет таким, как он был после прошлого примера). Вторая строчка переопределяет цвет ссылок, которые находятся внутри параграфов (внутри тега <p></p>).

Класс active отвечает за активные ссылки. Активная ссылка та, на которую нажал пользователь. Ссылка активна до тех пор, пока пользователь не нажмет другую, или документ не выгрузится из браузера. Данный псевдо класс аналогичен параметру alink="" тега body. Пример:
A:visited {color:black}
P A.redlink:visited {color:#aa0000}

Сразу со второй строчки ;))). Она переопределяет цвет всех посещенных ссылок класса redlink, находящихся внутри тега <p></p> (параграф).

Класс hover. С помощью этого псевдо класса достигается интерактивность. Псевдо класс hover отвечает за ссылку, над которой находится указатель. Таким образом, стиль любой ссылки меняется на стиль, указанный в a:hover при наведении курсора. Данный класс не имеет аналогов из параметров тега body. Пример:
A:hover {color:silver}

При наведении указателя мыши на любую ссылку ее цвет меняется на silver. При отведении указателя восстанавливается стиль, соответствующий данной ссылке.

При рассмотрении этих четырех псевдо классов для наглядности использовалось сравнение с параметрами тега body (link, alink и vlink). Подобное сравнение не совсем корректно. Дело в том, что данные параметры позволяют определить только цвет. В отличие от параметров, стиль может определять что угодно - начиная от размера, заканчивая фоновыми изображениями. Вот мы и подошли к самому интересному. Как в стиле задавать размер, цвет Вы, наверное, сами догадались, а вот о том, как задавать фоновые рисунки, как задавать различные отступы и о многом другом я и поведаю Вам сейчас. Рассмотрим свойства шрифта.

• font-family. Значения: имя шрифта. Применение: любой элемент. Описание: это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя. Пример:font-family: Arial Black URL('arialblack.ttf')
• font-style. Значения: normal - без изменений, italic - курсив. Применение: любой элемент. Описание: стиль элемента. Курсивный или обычный. Пример: font-style:italic
• font-variant Значения: normal - без изменений, small-caps - заменяет все буквы на большие. Применение: любой элемент. Описание: Netscape вообще не поддерживает это свойство. Пример: font-variant:small-caps
• font-weight. Значения: normal - без изменений, bold - жирный, bolder - очень жирный (в MSIE не отличается от bold, в Нетскейпе от нормал), lighter - тонкий (не отличается от normal), любое значение от 100 до 900. Применение: любой элемент. Описание: выделение (жирность) элемента. Пример: font-weight:bold
• font-size. Значения: размер, xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений; smaller, larger - любое из этих значений. Применение: дюбой элемент. Описание: Размер шрифта. Пример:font-size:30pt
• font Применение: любой элемент. Описание: обобщает все вышеперечисленные свойства. Пример:font: italic bolder Arial 12pt.

На сегодня хватит. Дальше - больше ;))))

#13(54)/01.05.2001