В технических документах часто хочется использовать один стиль абзацев при изложении краткого содержания, другой – для формул и третий – для цитат. Вместо этого стоит определить для каждого из них свой класс стилей:
<style type=»text/css»>
<!–
p.abstract {font-style: italic;
margin left: 0.5cm;
margin right: 0.5cm}
p.equation {font-family: Symbol;
text-align: center}
h1, p.centered {text-align: center;
margin-left: 0.5cm;
margin-right: 0.5cm}
–>
</style>
Приведенный пример показывает: определение стилевого правила для класса состоит в том, что в селекторе к имени тега через точку приписано имя класса. В отличие от «послушного» XHTML селектора, являющегося именем стандартного тега (который необходимо записывать строчными буквами), имя класса может быть любой последова
тельностью букв, цифр и дефисов, но всегда должно начинаться с буквы.1 Будьте, однако, осторожны, регистр в этом случае имеет значение – abstract это не то же самое, что AbsTRact. Классы входят в селекторные списки наряду с обычными селекторами, отделяясь от других классов и селекторов запятыми, как это показано в третьем примере. Единственное ограничение, вводимое для классов, состоит в том, что они не могут вкладываться друг в друга, так что конструкция p.equation.centered, например, не является допустимой.
Первое правило в примере, таким образом, создает класс стилей абзаца под названием «abstract», текст которого должен выводиться курсивом с отступом на полсантиметра от правого и левого краев. Подобным образом второе определение стилевого класса «equation» предписывает броузеру центрировать текст и использовать гарнитуру шриф
та Symbol при его отображении. Последнее правило создает стиль с центрированным текстом и полусантиметровыми полями, который должен применяться ко всем заголовкам уровня 1, как и к абзацам, атрибут class которых имеет значение centered.
Чтобы применить к содержимому тега определенный класс, следует вставить в тег атрибут class, как это делается в нижеследующем примере:
<p>
This is the abstract paragraph. See how the margins are indented?
</p>
<h3>The equation paragraph follows</h3>
<p>
a = b + 1
</p>
<p>
This paragraph’s text should be centered.
</p>
Для каждого абзаца значение атрибута class – это имя того стилевого класса, который должен быть применен к данному тегу.