<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="../style.css"/>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=UTF-8"/>
<title>Xmoder.wen.ru</title>
</head>
<body>
<div class="b">
<div class="r">
<div align="center">
<img src="../logo.gif" class="top" alt="Xmoder.wen.ru"/>
<div align="center">
<div class="menu">Свойства элементов, управляемых с помощью CSS </div>
<div class="cont">
<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.html">Далее</a><br/>
<div class="cont"><a href="index.html">Назад</a><BR>
<a href="../index.html">На главную</a>
</div>
</div>
</div><div align="center">
<div class="foot">Xmoder.wen.ru
</div>
<div class="counts">
Счётчики/Баннеры<br>
<a href='http://bann.su/click.php?sub=7631'><img src='http://bann.su/ban.php?sub=7631&c=FFFFFF&b=FF0000' alt='Жми'/></a><BR>
<a href='http://wen.ru/'><img src='http://c.wen.ru/1117594.wbmp?' alt='Создай сайт! Create site!'/></a>
<script language="JavaScript" src="http://free-one.ru/xml_gzip_status.php"></script>
</div>
</body>
</html>