В CSS есть такое понятие как псевдокласс. В отличие от обычного класса, действие псевдокласса распространяется не на весь текст, к которому применен данный стиль, а лишь на его часть и возможно лишь в определенном состоянии. Чтобы было понятнее, давайте разберем эффект, при котором ссылки подчеркиваются лишь при наведении на них курсора. Эффект достаточно распространенный, и его можно наблюдать в том числе и на этом сайте. Вот фрагмент таблицы стилей, который позволяет достигать вышеописанного эффекта:
a { text-decoration: none; }
a:hover { text-decoration: underline; }
Верхняя строчка - это переопределение стандартного тега <a>, которое запрещает подчеркивать ссылки, а вот нижняя - это определение стиля для псевдокласса hover, который описывает стиль ссылки в момент, когда курсор находится над ней.
А вот и другой пример псевдокласса - определение буквицы вначале абзаца:
p:first-letter { font-size: 200%; font-weight: bold; }
Заметьте, что и в том, и в другом случае действие стиля распространяется либо на определенное состояние (пользователь собирается щелкнуть по ссылке), либо на фрагмент текста (изменяется только первая буква абзаца). В этом и заключается смысл псевдоклассов.
|
|
Комментарии
Как и в любом достаточно сложном языке, при создании таблицы стилей можно пользоваться комментариями.
Пример:
/* Этот текст является комментарием */
Для небольших сайтов эта возможность вам вряд ли пригодится, а вот при создании сложных, многоуровневых таблиц стилей комментарии могут пригодиться. Кстати, здесь будет уместно привести золотое правило - чем понятнее названа переменная (в данном случае имя класса), тем меньше комментариев необходимо.
Некоторые параметры CSS
Некоторые параметры шрифта
font-weight: [ bold | normal | number] - жирность шрифта
font-style: [normal | italic | oblique] - наклон шрифта
font-size: number - размер шрифта
font-family: name - гарнитура шрифта
color: number - цвет шрифта
background-color: number - цвет подложки
background: url - текстурная подложка