В 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 - отступ от
границы снизу