htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > CSS по шагам > Классы

Этот материал устарел, рекомендую Самоучитель CSS

Шаг 6. Классы

Влад Мержевич

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Внутри стилевой таблицы вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Чтобы указать в коде HTML, что тег используется с определенным стилем, к тегу добавляется параметр class="Имя класса" (пример 6.1).

Пример 6.1. Использование классов c тегами

<!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>

Результат данного примера показан на рис. 6.1.

Рис. 6.1

Рис. 6.1. Вид текста, оформленного с помощью стилей

Первый абзац выровнен по ширине с текстом черного цвета, а следующий, к которому применен класс cite — написан курсивом синего цвета.

Имена классов выбираются по желанию, главное, чтобы они были понятны и соответствовали их использованию, при этом имя должно всегда начинаться с символа. Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.

.Имя класса { свойство1: значение; свойство2: значение; ... }

При такой записи, класс можно применять к любому тегу (пример 6.2).

Пример 6.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>

Результат применения селектора с именем cite к тегу <B> показан на рис. 6.2.

Рис. 6.2

Рис. 6.2. Вид тега <B>, оформленного с помощью стилей

Классы удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др. Для изменения отдельных слов или даже букв, а также блоков, содержащих в себе разные элементы, употребляются теги <SPAN> и <DIV>. В примере 6.3 показано изменение стиля первой буквы предложения путем использования класса совместно с тегом <SPAN>.

Пример 6.3. Использование классов

<!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>

Результат данного примера показан на рис. 6.3.

Рис. 6.3

Рис. 6.3. Результат использования классов

Статья опубликована: 15.10.2005 Последнее обновление: 05.11.2007
CSS по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru