Селекторы Class
Классы используются когда необходимо определить стиль для блока
текста или задать разные стили для одного тега. Синтаксис для классов
следующий.
Тег.Имя класса { Параметр: Значение; }
Чтобы указать, что тег используется с определенным стилем, к нему
добавляется параметр class="Имя класса".
Пример 1. Использование классов c тегами
<html>
<head>
<style type="text/css">
P { text-align: justify }
// обычный параграф
P.cite { text-align: justify; color:
navy; font-style: italic; } // параграф с классом
cite
</style>
</head>
<body>
<p>При работе на вычислительной технике необходимо
сесть так, чтобы руки с предплечьями образовывали прямой
угол, глаза поставить на расстояние 30-40 см от рабочей
поверхности монитора. Набирать на клавиатуре следует
подушечками пальцев короткими отрывистыми ударами.</p>
<p class=cite>Предельно
допустимая длина ногтей для женщин составляет 12-15
мм, для мужчин 3-5 мм. При выходе длины ногтей за нормы
регламентируемые ГОСТом, во избежании риска поцарапать
поверхность дорогостоящей техники, оператор допускается
к работе на компьютере только в верхонках.</p>
</body>
</html>
При работе на вычислительной технике необходимо
сесть так, чтобы руки с предплечьями образовывали прямой угол,
глаза поставить на расстояние 30-40 см от рабочей поверхности
монитора. Набирать на клавиатуре следует подушечками пальцев
короткими отрывистыми ударами.
Предельно
допустимая длина ногтей для женщин составляет 12-15 мм, для
мужчин 3-5 мм. При выходе длины ногтей за нормы регламентируемые
ГОСТом, во избежании риска поцарапать поверхность дорогостоящей
техники, оператор допускается к работе на компьютере только
в верхонках.
|
Первый абзац выровнен по ширине с текстом черного цвета, а следущий,
к которому применен класс cite
написан курсивом синего цвета.
Имена классов выбираются по желанию, главное, чтобы они были понятны
и соответствовали их использованию. Можно, также, использовать классы
и без указания тега. Синтаксис в этом случае будет.
.Имя класса { Параметр: Значение; }
При такой записи, класс можно применять к любому тегу.
Пример 2. Использование классов c тегами
<html>
<head>
<style type="text/css">
.cite { color: navy; font-style:
italic; }
</style>
</head>
<body>
<p>Следует тщательно позаботиться о своем рабочем
месте. Освещение в помещении отрегулировать таким образом,
чтобы источник света находился сбоку или сзади оператора.
Во избежании медицинских осложнений <b class=cite>стул
рекомендуется выбирать с мягким сидением</b>.</p>
</body>
</html>
Следует тщательно позаботиться о своем рабочем месте. Освещение
в помещении отрегулировать таким образом, чтобы источник света
находился сбоку или сзади оператора. Во избежании медицинских
осложнений стул
рекомендуется выбирать с мягким сидением. |
Классы удобно использовать, когда нужно применить стиль к разным
тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для
изменения отдельных слов или даже букв, а также блоков, содержащих
в себе разные элементы употребляются теги SPAN
и DIV.
|