Группирование
Существуют несколько полезных приемов, облегчающих написание стилей. Один из них группирование.
Можно назначить набор правил для каждого селектора отдельно:
h1 {font-family: Arial, Helvetica, "Times New Roman"; font-size: 160%; color: #800000}h2 {font-family: Arial, Helvetica, "Times New Roman"; font-size: 135%; color: #0000ff}
h3 {font-family: Arial, Helvetica, "Times New Roman"; font-size: 120%; color: #008000}.
Чтобы не повторять одинаковые стилевые параметры для разных селекторов, их целесообразнее cгруппировать, установив один параметр сразу для нескольких:
h1, h2, h3 {font-family: Arial, Helvetica, "Times New Roman"
}
h1 {
font-size: 160%;
color: #800000
}
h2 {
font-size: 135%;
color: #0000ff
}
h3 {
font-size: 120%;
color: #008000
}
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы.
Группировать можно не только отдельные элементы, но и свойства этих элементов. Вот пример группирования стилей для заголовков первого и второго уровня. Описания стилей заданы в заголовке страницы и непосредственно в элементе. Локальный стиль, назначенный в элементе, имеет приоритет.
<html><head>
<style type="text/css">
body {
background:#faf0e6
}
p {
text-align: justify;
color: #ff0000;
font-size:120%
}
h1,h2 {
text-align: center;
text-decoration: underline
}
</style>
</head>
<body>
<h2>Это заголовок второго уровня<h2>
<p>Стиль этого абзаца соответствует стилю, заданному в таблице глобальных стилей.</p>
<h1>Это заголовк первого уровня</h1>
<p style="color:blue">Стиль этого абзаца задан локально в элементе. Текст синего цвета. Однако, размер шрифта и выравнивание текста останется общим для обоих абзацев.</p>
</body>
</html>
Смотрим, что получилось, жмем на ссылку.
