<?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">
Откроем наш любимый Web-редактор Notepad и создадим файл с будущим названием <span>style.css</span>
(название файла может быть любым). Опишем в этом файле стиль параграфа <span><P></span>,
который будет использоваться на всех страничках нашего сайта:<br>
<span>
P {
font-family: Times New Roman, serif;
color: #000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify;
}</span><br>
Внутри описания стиля для удобства форматирования вы можете использовать любое количество
пробелов и переносов строк – при чтении стиля броузер просто отбросит все лишние пробелы.
В этом стиле мы задали, что параграфы P на всех страничках, которые используют это описание,
будут отображаться шрифтом <span>Times New Roman</span> или в случае, если этот шрифт на машине не установлен,
другим шрифтом, но из этого семейства <span>(serif)</span>. Цвет шрифта мы установили черный, выравнивание –
полное (по обеим сторонам).<br>
Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью:
по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между
параграфами, равными <span>180 %</span> межстрочного интервала. Читать такие параграфы не очень удобно,
так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал,
который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать.<br>
В стиле параграфа, который мы создали, установлены боковые отступы в <span>15 %</span> ширины окна и вертикальные
отступы в <span>1 пункт</span> – так текст статьи будет гораздо читабельнее.
Давайте так же создадим стиль для заголовков статей:<br>
<span>H2 {
font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
color: black;
margin-left: 20%;
margin-top: 1cm;
text-align: left;
}</span><br>
Все заголовки наших страниц, оформленные тегом <span>H2</span>, будут отображаться жирным шрифтом <span>Verdana</span> или,
если этот шрифт не установлен, шрифтом <span>Arial</span>. Размер заголовка мы установим равным <span>14 пунктам</span>, цвет черный,
отступ слева равен <span>20 %</span> ширины страницы, а отступ сверху – <span>1 см</span>. Заголовок будет выравниваться относительно
левого края страницы.
Благодаря тому, что боковые отступы заголовка и параграфа установлены нами в процентах от ширины окна
броузера, при просмотре наших страничек на компьютерах с разным разрешением дисплея пропорции и
расположение заголовка, основного текста и отступов будут сохранены.
Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе
<span>HEAD</span> мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:<br/>
<span><link rel="stylesheet" type="text/css" href="style.css"/></span><br>
Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички,
параметр <span>HREF="URL"</span> в нашем случае будет просто именем нашего файла стилей (style.css).<br/>
»<a href="svsh.htm">Свойства шрифта</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>