Cascading Style Sheets
Свойства элементов, управляемых с помощью CSS
<HEAD>
<STYLE type="text/css">
<!--
описания стилей
-- >
</STYLE>
</HEAD>
где
<!-- – тег, открывающий комментарий, а
> – закрывающий.
Устаревшие броузеры посчитают все заключенное между тегами комментариев информацией неотображенной,
а новые и сообразительные броузеры определят, что это — описание стилей, и задействуют их.
Еще один из интересных вариантов применения CSS скрывается за, казалось бы, простой возможностью:
вы можете указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать
один слой текста на другой и получать весьма интересные и привлекательные результаты.
Добиться такого эффекта не очень сложно, давайте попробуем создать страничку с заголовком, который будет
выглядеть трехмерным, но не будет использовать графику.
Создадим новый html-файл и составим описание стилей для трех объектов:
<HEAD>
<STYLE type="text/css">
BODY {font-family: Verdana; font-size: 70pt; font-weight: bold;}
.z1 { color: silver; margin-top: 100px; margin-left: 70px;}
.z2 {color: navy; margin-top: -118px; margin-left: 68px;}
</STYLE>
</HEAD>
В этом описании мы присвоили <BODY> (впрочем, это мог быть практически любой другой тег) размер,
шрифт и начертание – в таком стиле будут отображаться все элементы страницы. Это было сделано лишь ради
стремления уменьшить размер файла странички, вместо этого можно было описать эти параметры дважды: для
каждого из классов z.
Далее мы описываем два стиля, которые отличаются цветом и размером отступов вокруг
них: нижний слой описывается стилем z1, а верхний – z2. Используя отрицательные значения отступов и
подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий...
<BODY bgcolor=white>
<DIV class="z1">EC-NET</DIV>
<DIV class="z2">EC-NET</DIV>
</BODY>