Классы применяют,
когда необходимо определить стиль для индивидуального элемента
веб-страницы или задать разные стили для одного тега. При
использовании совместно с тегами синтаксис для классов будет
следующий.
Тег.Имя класса { свойство1: значение; свойство2: значение;
... }
Внутри стилевой таблицы вначале
пишется желаемый тег, а затем, через точку пользовательское
имя класса. Чтобы указать в коде HTML, что тег используется
с определенным стилем, к тегу добавляется параметр class="Имя
класса" (смотри ниже).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Классы</title>
<style type="text/css">
P { /* Обычный параграф */
text-align: justify; /* Выравнивание текста по ширине */
}
P.cite { /* Параграф с классом 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>
Первый абзац выровнен по ширине
с текстом черного цвета, а следующий, к которому применен
класс cite — написан курсивом синего цвета.
Имена классов выбираются по желанию,
главное, чтобы они были понятны и соответствовали их использованию,
при этом имя должно всегда начинаться с символа. Можно, также,
использовать классы и без указания тега. Синтаксис в этом
случае будет следующий.
.Имя класса { свойство1: значение; свойство2: значение; ...
}
При такой записи, класс можно применять
к любому тегу (см. ниже).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Классы</title>
<style type="text/css">
.cite {
color: navy; /* Синий цвет текста */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<p>Следует тщательно позаботиться о своем рабочем месте.
Освещение в помещении отрегулировать таким образом, чтобы
источник света находился сбоку или сзади оператора. Во избежании
медицинских осложнений
<b class="cite">стул рекомендуется выбирать
с мягким сидением</b>.</p>
</body>
</html>
Классы удобно использовать, когда
нужно применить стиль к разным тегам веб-страницы: ячейкам
таблицы, ссылкам, параграфам и др. Для изменения отдельных
слов или даже букв, а также блоков, содержащих в себе разные
элементы, употребляются теги <SPAN> и <DIV>. Далее
в примере показано изменение стиля первой буквы предложения
путем использования класса совместно с тегом <SPAN>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Классы</title>
<style type="text/css">
.inicial {
color: red; /* Красный цвет текста */
font-size: 200%; /* Размер текста */
}
</style>
</head>
<body>
<p><span class="inicial">Н</span>абирать
на клавиатуре следует подушечками пальцев короткими отрывистыми
ударами.</p>
</body>
</html>
|
