Файл: teachs/css_teach/psv2.php
Строк: 67
<? include 'head.php' ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<div class=mid1>Свойства элементов, управляемых с помощью CSS <br/></div><div>
<span><HEAD></span><br>
<span><STYLE type="text/CSS"></span><br>
<span><!--
описания стилей
-- ></span><br>
<span></STYLE></span><br>
<span></HEAD></span><br>
где<br>
<span><!--</span> – тег, открывающий комментарий, а
<span>></span> – закрывающий.<br>
Устаревшие броузеры посчитают все заключенное между тегами комментариев информацией неотображенной,
а новые и сообразительные броузеры определят, что это — описание стилей, и задействуют их.<br>
Еще один из интересных вариантов применения CSS скрывается за, казалось бы, простой возможностью:
вы можете указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать
один слой текста на другой и получать весьма интересные и привлекательные результаты.
Добиться такого эффекта не очень сложно, давайте попробуем создать страничку с заголовком, который будет
выглядеть трехмерным, но не будет использовать графику.<br>
Создадим новый html-файл и составим описание стилей для трех объектов:<br>
<span><HEAD></span><br>
<span><STYLE type="text/CSS"></span><br>
<span>BODY {font-family: Verdana; font-size: 70pt; font-weight: bold;}</span><br>
<span>.z1 { color: silver; margin-top: 100px; margin-left: 70px;}</span><br>
<span>.z2 {color: navy; margin-top: -118px; margin-left: 68px;}</span><br>
<span></STYLE></span><br>
<span></HEAD></span><br>
В этом описании мы присвоили <span><BODY></span> (впрочем, это мог быть практически любой другой тег) размер,
шрифт и начертание – в таком стиле будут отображаться все элементы страницы. Это было сделано лишь ради
стремления уменьшить размер файла странички, вместо этого можно было описать эти параметры дважды: для
каждого из классов <span>z</span>.<br>
Далее мы описываем два стиля, которые отличаются цветом и размером отступов вокруг
них: нижний слой описывается стилем <span>z1</span>, а верхний – <span>z2</span>. Используя отрицательные значения отступов и
подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий...<br>
<span><BODY bgcolor=white></span><br>
<span><DIV class="z1">EC-NET</DIV></span><br>
<span><DIV class="z2">EC-NET</DIV></span><br>
<span></BODY></span><br>
</div><div class="strik">
»<a href="psv3.php">Далее</a><br/>
</div>
<div class="partners">
«<a href="index.php">Назад</a><br/></div>
</div>
</body>
</head>
</html>
<? include 'foot.php' ?>