CSS по шагам


         

Пример 7.2. Применение идентификатора совместно с тегом


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

<html>

<head>

<style type="text/css">

P {

color: green; /* Зеленый цвет текста */

 font-style: italic /* Курсивное начертание текста */

}

P#opa {

 color: red; /* Красный цвет текста */

 border: 1px solid #666; /* Параметры рамки */

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

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

}

</style>

</head>

<body>

<p>Обычный параграф</p>

<p id="opa">Параграф необычный</p>

<div id="opa">Содержимое слоя</div>

</body>

</html>

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

P.new { color: green; font-style: italic } P#opa { color: red; border: 1px solid #666; background: #eee; font-style: italic; padding: 5px }

Обычный параграф

Параграф необычный

Содержимое слоя

В примере вначале вводится стиль для тега <P> и для такого же тега, но с указанием идентификатора opa. Обратите внимание, что применение идентификатора opa к другим тегам не дает никакого эффекта, поскольку он жестко закреплен за тегом P. Так, добавление id="opa" к тегу <DIV> никак не отображается на его стиле.

Использование идентификатора дает возможность изменять некоторые параметры элемента, например, делать его невидимым или видимым по желанию с помощью скриптов (пример 7.3).




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