CSS по шагам



Пример 10.2. Изменение стиля абзаца


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

H2.sic {

font-size: 140%; /* Размер шрифта */

 color: maroon; /* Цвет текста */

 font-weight: normal; /* Нормальное начертание текста */

 margin-left: 30px; /* Отступ слева */

 margin-bottom: 0px /* Отступ сверху */

}

H2.sic + P {

 background: #ddd; /* Цвет фона */

 margin-left: 30px; /* Отступ слева */

 margin-top: 0.5em; /* Отступ сверху */

 padding: 7px /* Поля вокруг текста */

}

</style>

</head>

<body>

<h1>Методы ловли льва в пустыне</h1>

<h2>Метод последовательного перебора</h2>

<p>Пусть лев имеет габаритные размеры L x W x H, где L — длина льва от кончика носа до кисточки хвоста, W — ширина льва, а H — его высота. После чего пустыню разбиваем на ряд элементарных прямоугольников, размер которых совпадает с шириной и длиной льва. Учитывая, что лев может находиться не строго на заданном участке, а одновременно на двух из них, клетку для ловли следует делать удвоенной площади, а именно 2L x 2W. Благодаря этому мы избежим ошибки, когда в клетке окажется пойманным лишь половина льва или, что хуже, только его хвост.</p>

<h2 class="sic">Важное замечание</h2>

<p>Для упрощения расчетов хвост в качестве погрешности измерения можно отбросить и не принимать во внимание.</p>

<p>Далее последовательно накрываем каждый из размеченных прямоугольников пустыни клеткой и проверяем, пойман лев или нет. Как только лев окажется в клетке, процедура поимки считается завершенной.</p>

</body>

</html>

В данном примере текст отформатирован с применением абзацев (тег <P>), но запись H2.sic + P устанавливает стиль только для первого абзаца идущего после тега <H2>, у которого добавлен класс с именем sic.

Соседние селекторы удобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов. Аналогично дело обстоит и для идущих подряд тегов <H2> и <P>, а также в других подобных случаях. В примере 10.3 таким манером изменяется величина отступов между указанными тегами.




Содержание  Назад  Вперед