На главную # Логотип Веб-дизайн студии Step by StepПереходная полоска
Навигация по сайту:
 Новости сайта
 HTML учебник
 HTML статьи
 Архив рассылки
 CSS учебник
 Wallpappers
 Портфолио
 Гостевая книга

Поиск по сайту:

Подпишитесь на рассылку
HTML для начинающих


Content.Mail.Ru
Архив рассылки

Реклама:





 
 CSS учебник 
Псевдоклассы

   В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространенный, и его можно наблюдать в том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта:

a { text-decoration: none; }
a:hover { text-decoration: underline; }

   Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.

А вот и другой пример псевдокласса - определение буквицы вначале абзаца:

p:first-letter { font-size: 200%; font-weight: bold; }

   Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.

Комментарии

Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями. Их формат аналогичен классическому C:

/* Этот текст является комментарием */

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

Основные параметры CSS

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

   Все параметры, используемые для определении стиля, условно можно разделить на несколько больших групп:

  • управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность,..)
  • управляющие форматированием абзаца (выравнивание, интерлиньяж, расстояние между словами, отступ красной строки,..)
  • управляющие свойствами блока (отступы слева-сверху-справа-снизу, местоположение блока на страничке, видимость блока,..)
  • другие, которые не вписываются ни в одну из перечисленных выше групп (цвет ссылок странички, изменение внешнего вида курсора,..)

   Рассмотрим подробнее параметры, используемые для управления внешним видом текста и форматирования абзацев - как наиболее часто употребляемые.

Основные параметры шрифта

    font-weight: [bold|normal|number] - жирность шрифта
    font-style: [normal|italic|oblique] - наклон шрифта
    font-size: number - размер шрифта
    font-family: name - гарнитура шрифта
    color: number - цвет шрифта
    background-color: number - цвет подложки
    background: url - текстурная подложка

Основные параметры абзаца

    text-align: [left|right|center|justify] - выравнивание
    text-indent: number - отступ красной строки
    line-height: number - интерлиньяж
    letter-spacing: number - трекинг

    padding-left: number - отступ от текста слева
    padding-right: number - отступ от текста справа
    padding-top: number - отступ от текста сверху
    padding-bottom: number - отступ от текста снизу

    margin-left: number - отступ от границы слева
    margin-right: number - отступ от границы справа
    margin-top: number - отступ от границы сверху
    margin-bottom: number - отступ от границы снизу

:: CSS учебник :: Единицы измерения в CSS : Псевдоклассы : Синтаксис CSS : Каскадность стилей : Подключение таблиц стилей ::
   
Copyright Vlad Demenchuk © 2000-2005
Яндекс цитирования Cтатистика LookUp.ru CATALOG.METKA.RU