Псевдоклассы

 

В 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 - текстурная подложка