Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий. Тег.Имя класса { свойство1: значение; свойство2: значение; ... } Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса" (пример 6.1). Пример 6.1. Использование классов c тегами <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
P {
text-align: justify
}
P.cite {
text-align: justify;
color: navy;
font-style: italic
}
</style>
</head>
<body>
<p>При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.</p>
<p class="cite">Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.</p>
</body>
</html> Результат данного примера показан ниже.
При работе на вычислительной технике необходимо сесть так, чтобы руки с предплечьями образовывали прямой угол, глаза поставить на расстояние 30-40 см от рабочей поверхности монитора. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами. Предельно допустимая длина ногтей для женщин составляет 12-15 мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые ГОСТом, во избежании риска поцарапать поверхность дорогостоящей техники, оператор допускается к работе на компьютере только в верхонках.
Первый абзац выровнен по ширине с текстом черного цвета, а следующий, к которому применен класс cite — написан курсивом синего цвета. Имена классов выбираются по желанию, главное, чтобы они были понятны и соответствовали их использованию. Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий. .Имя класса { свойство1: значение; свойство2: значение; ... } При такой записи, класс можно применять к любому тегу (пример 6.2). Пример 6.2. Использование классов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.cite {
color: navy;
font-style: italic
}
</style>
</head>
<body>
<p>Следует тщательно позаботиться о своем рабочем месте. Освещение в помещении отрегулировать таким образом, чтобы источник света находился сбоку или сзади оператора. Во избежании медицинских осложнений
<b class="cite">стул рекомендуется выбирать с мягким сидением</b>.</p>
</body>
</html> Результат применения селектора с именем cite к тегу <B> показан ниже. Следует тщательно позаботиться о своем рабочем месте. Освещение в помещении отрегулировать таким образом, чтобы источник света находился сбоку или сзади оператора. Во избежании медицинских осложнений стул рекомендуется выбирать с мягким сидением. Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>. В примере 6.3 показано изменение стиля первой буквы предложения путем использования класса совместно с тегом <SPAN>. Пример 6.3. Использование классов <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.inicial {
color: red;
font-size: 200%
}
</style>
</head>
<body>
<p><span class="inicial">Н</span>абирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.</p>
</body>
</html> Результат данного примера показан ниже. Набирать на клавиатуре следует подушечками пальцев короткими отрывистыми ударами.
| 
