Файл: ycheb/html_teach/34.php
Строк: 174
<?php
include '../../config.php';
$title='Учебник HTML';
aut();
head();
?>
<html><head>
<table/>
<title> HTML учебник / Основы CSS / Свойства элементов, управляемых с помощью CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML учебникОсновы CSS Свойства элементов, управляемых с помощью CSS">
<meta name="description" content="HTML учебник: Основы CSS Свойства элементов, управляемых с помощью CSS">
</head>
<tr><td valign=top><table width="80%" align="center"><tr><td>
<table width="100%" cellpadding=3 cellspacing=0 border=0 bgcolor=#ffffff><tr><td class=r align=middle><a href="index.php">Содержание</a> / Основы CSS / Свойства элементов, управляемых с помощью CSS </td></tr></table></td></tr></table><!--//-->
<h2>Свойства элементов, управляемых с помощью CSS</h2>
<p>В настоящее время язык CSS насчитывает довольно
большое количество свойств элементов HTML, которыми он может
управлять. Но из-за того, что этот стандарт еще очень молод, в
полном объеме его пока не поддерживают наиболее популярные броузеры
(Netscape Navigator и Microsoft Internet Explorer). Последние версии
этих броузеров могут работать с довольно большим количеством команд
CSS, а вот 3-и версии или совсем не поддерживают его (Netscape
Navigator 3), или поддерживают, но лишь частично (Microsoft IE 3).
Более того, поскольку разработчики из этих компаний никак не могут
договориться между собой, последние версии броузеров поддерживают
неодинаковый набор свойств CSS. Все это делает малоприемлемым
использование CSS в полном объеме, так как, при использовании CSS
для форматирования элементов страницы и просмотре ее с помощью
броузера версии ниже 4­й, есть большая вероятность увидеть нечто
такое, что вам не понравится. Поэтому будет разумнее воздержаться от
использования CSS для форматирования основной структуры страниц до
всеобщего перехода на последние версии броузеров. В то же время,
применяя «безопасные», т. е. совместимые с максимальным количеством
броузеров элементы CSS, вы можете сильно облегчить себе жизнь и
сделать ваши Web-странички более привлекательными в плане шрифтового
оформления, а пользователи, путешествующие по Internet с помощью
устаревших броузеров, просто этого не увидят, но также они не увидят
и тех кошмаров, которые появляются при использовании CSS для верстки
страниц.</p>
<div align=center>
<center>
<table cellspacing=0 cellpadding=0 width="100%" border=0>
<tbody>
<tr>
<td align=middle bgcolor=#000000>
<div align=center>
<center>
<table cellspacing=1 cellpadding=6 width="100%" border=0>
<tbody>
<tr>
<td align=middle bgcolor=#e8e7d2 colspan=2>
<p align=center>СВОЙСТВА ШРИФТА</p></td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>font-family</td>
<td valign=top
bgcolor=#f0f7ef>Используется для указания шрифта или
шрифтового семейства, которым будет отображаться
элемент.<br>P {font-family: Times New Roman,
sans-serif;}</td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>font-weight</td>
<td valign=top bgcolor=#f0f7ef>Определяет степень жирности шрифта с
помощью трех параметров: lighter, bold, bolder<br>B
{font-weight: bolder;}</td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>font-size</td>
<td valign=top bgcolor=#f0f7ef>Устанавливает размер шрифта. Параметр
может указываться как в относительной (проценты), так и
абсолютной величине (пункты, пикселы, сантиметры)<br>H1
{font-size: 200%;}<br>H2 {font-size: 150px;}<br>H3
{font-size: 400pt;}</td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>font-size</td>
<td valign=top bgcolor=#f0f7ef>Устанавливает размер шрифта. Параметр
может указываться как в относительной (проценты), так и
абсолютной величине (пункты, пикселы, сантиметры)<br>H1
{font-size: 200%;}<br>H2 {font-size: 150px;}<br>H3
{font-size: 400pt;}</td></tr>
<tr>
<td align=middle bgcolor=#e8e7d2 colspan=2>
<p align=center>ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА</p></td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>color</td>
<td valign=top bgcolor=#f0f7ef>Определяет цвет элемента<br>I {color:
yellow;} </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>background-color</td>
<td valign=top bgcolor=#f0f7ef>Устанавливает цвет фона для элемента –
именно для элемента, а не для странички. Обратите
внимание, что броузеры отображают это свойство
по-разному: Microsoft IE отводит под фон элемента всю
доступную ширину страницы, а Netscape Navigator – лишь
ширину, занимаемую этим элементом. Посмотрите пример
(рис. 3, 4 ), вот его исходный
код:<br><br><HTML><br><HEAD><br><TITLE>Пример
использования CSS</TITLE><br><br><STYLE
type=”text/css”><br>H1 {font-size:
300%;}<br></STYLE><br></HEAD><br><br><BODY
bgcolor=white><br><center><BR><br><H1
style=”background-color: teal; color:
white;”>Cascading</H1><br><H1
style=”background-color: navy; color:
yellow;”>Style</H1><br><H1
style=”background-color: gold; color:
brown;”>Sheets</H1><br></BODY><br></HTML><br><br>В
этом примере в разделе <STYLE> всем элементам
<Н1> на этой страничке был установлен размер 300 %
от нормы. Затем каждому из элементов <H1> были
присвоены собственные значения цвета фона и цвета
символов. </td></tr>
<tr>
<td align=middle bgcolor=#e8e7d2 colspan=2>
<p align=center>СВОЙСТВА ТЕКСТА</p></td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>text-decoration</td>
<td valign=top bgcolor=#f0f7ef>Устанавливает эффекты оформления шрифта,
такие, как подчеркивание или зачеркнутый текст<br><br>H4
{text-decoration: underline;}<br>A {text-decoration:
none;}<br>.wrong {text-decoration: line-through;} </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>text-align</td>
<td valign=top bgcolor=#f0f7ef>Определяет выравнивание элемента. <br>P
{text-align: justify}<br>H1 {text-align: center} </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>text-indent</td>
<td valign=top bgcolor=#f0f7ef>Устанавливает отступ первой строки
текста. Чаще всего используется для создания параграфов
с табулированной первой строкой.<br>P {text-indent:
50pt;} </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>line-height</td>
<td valign=top bgcolor=#f0f7ef>Управляет
интервалами между строками текста.<br>P {line-height: 50
%} </td></tr>
<tr>
<td align=middle bgcolor=#e8e7d2 colspan=2>
<p align=center>СВОЙСТВА ГРАНИЦ</p></td></tr>
<tr>
<td valign=top
bgcolor=#f0f7ef>margin-left</td>
<td valign=top
bgcolor=#f0f7ef>Устанавливают значения отступов вокруг
элемента.<br>IMG { margin-right: 20pt}<br>P {
margin-left: 2cm} </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>margin-right<br>margin-right<br>margin-top</td>
<td valign=top bgcolor=#f0f7ef>Устанавливают значения отступов вокруг
элемента.<br>IMG { margin-right: 20pt}<br>P {
margin-left: 2cm} </td></tr>
<tr>
<td align=middle bgcolor=#e8e7d2 colspan=2>
<p align=center>ЕДИНИЦЫ ИЗМЕРЕНИЯ</p></td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>px</td>
<td valign=top bgcolor=#f0f7ef>Пикселы </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>cm</td>
<td valign=top bgcolor=#f0f7ef>Сантиметры </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>mm</td>
<td valign=top bgcolor=#f0f7ef>Миллиметры </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>pt</td>
<td valign=top bgcolor=#f0f7ef>Пункты
(типограф.) </td></tr>
<tr>
<td valign=top bgcolor=#f0f7ef>%</td>
<td valign=top bgcolor=#f0f7ef>Проценты</td></tr></tbody></table>
</center></div></td></tr></tbody></table></center></div>
<p>Итак, перейдем к изучению безопасных элементов
CSS. Описание свойств элементов в CSS состоит из названия свойства с
последующим присвоением ему определенного значения. Название
свойства и его значение разделены двоеточием.</p>
<p>Указывая абсолютные, а не относительные размеры
шрифтов, вы лишаете людей, просматривающих ваши странички,
возможности увеличивать или уменьшать размер шрифтов с помощью
специальной кнопочки в броузере в соответствии с разрешением их
дисплея и зрением. Шрифты будут отображаться только такого размера,
который вы указали при написании странички.</p>
<p>Поэтому, если использование абсолютных размеров
шрифтов не обусловлено художественным замыслом или коварным умыслом,
рекомендую вам использовать для этих целей указание размеров в
процентах. В этом случае размер шрифта будет меньше (больше) на
указанное вами количество процентов, чем при оформлении его с
помощью стандартного HTML-тега.</p>
<p>Есть еще одна небольшая, но очень полезная
хитрость – это способ скрыть от устаревших броузеров описания
стилей, располагающихся в теге <STYLE>, внутри
раздела<HEAD>. Поскольку броузер был написан несколько лет
назад, когда никакого CSS еще и в планах не было, он просто не
поймет, что это такое написано внутри <STYLE>…</STYLE>,
и выдаст все описания стилей на страничку, как обычный текст. Для
того чтобы предотвратить это, необходимо заключить описания стилей в
тег комментариев. Делается это очень просто.</p>
<table border=0>
<tbody>
<tr>
<td><pre><HEAD>
<STYLE type="text/css">
<!--
описания стилей
-- >
</STYLE>
</HEAD>
где
<!--– тег, открывающий комментарий, а
­­> – закрывающий.</pre></td></tr></tbody></table></center></div>
<p>Устаревшие броузеры посчитают все заключенное
между тегами комментариев информацией неотображенной, а новые и
сообразительные броузеры определят, что это — описание стилей, и
задействуют их.</p>
<p>Еще один из интересных вариантов применения CSS
скрывается за, казалось бы, простой возможностью: вы можете
указывать значения отступов вокруг объектов, как отрицательные
величины! Это позволяет накладывать один слой текста на другой и
получать весьма интересные и привлекательные результаты.</p>
<p>Добиться такого эффекта не очень сложно, давайте
попробуем создать страничку с заголовком, который будет выглядеть
трехмерным, но не будет использовать графику.</p>
<p>Создадим новый html-файл и составим описание
стилей для трех объектов:</p>
<table border=0>
<tbody>
<tr>
<td><pre><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></pre></td></tr></tbody></div>
<p>В этом описании мы присвоили <BODY>
(впрочем, это мог быть практически любой другой тег) размер, шрифт и
начертание – в таком стиле будут отображаться все элементы страницы.
Это было сделано лишь ради стремления уменьшить размер файла
странички, вместо этого можно было описать эти параметры дважды: для
каждого из классов z. Далее мы описываем два стиля, которые
отличаются цветом и размером отступов вокруг них: нижний слой
описывается стилем z1, а верхний – z2. Используя отрицательные
значения отступов и подбирая нужное значение, мы добиваемся того,
что верхний слой как бы наползает на предыдущий...</p>
<table border=0>
<tbody>
<tr>
<td><pre><BODY bgcolor=white>
<DIV class="z1">EC-NET</DIV>
<DIV class="z2">EC-NET</DIV>
</BODY></pre></td></tr></tbody></div>
<p>Откроем наш любимый Web-редактор Notepad и
создадим файл с будущим названием styles.css (название файла может
быть любым). Опишем в этом файле стиль параграфа <P>, который
будет использоваться на всех страничках нашего сайта:</p>
<table border=0>
<tbody>
<tr>
<td><pre>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;
}</pre></td></tr></tbody></div>
<p>Внутри описания стиля для удобства форматирования
вы можете использовать любое количество пробелов и переносов строк –
при чтении стиля броузер просто отбросит все лишние пробелы.</p>
<p>В этом стиле мы задали, что параграфы <P> на
всех страничках, которые используют это описание, будут отображаться
шрифтом Times New Roman или в случае, если этот шрифт на машине не
установлен, другим шрифтом, но из этого семейства (serif). Цвет
шрифта мы установили черный, выравнивание – полное (по обеим
сторонам). </p>
<p>Также мы установили для параграфа ряд значений
отступов. Это было сделано со следующей целью: по умолчанию параграф
в HTML отображается равным практически 95 % страницы и с интервалами
между параграфами, равными 180 % межстрочного интервала. Читать
такие параграфы не очень удобно, так как интервалы между ними
слишком велики, а ширина параграфа слишком большая. Посмотрите на
журнал, который вы сейчас держите в руках: текст сверстан в колонки
для того, чтобы его было удобнее читать. В стиле параграфа, который
мы создали, установлены боковые отступы в 15 % ширины окна и
вертикальные отступы в 1 пункт – так текст статьи будет гораздо
читабельнее.</p>
<p>Давайте так же создадим стиль для заголовков
статей:</p>
<table border=0>
<tbody>
<tr>
<td><pre>H2 {
font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
color: black;
margin-left: 20%;
margin-top: 1cm;
text-align: left;
}<p>Все заголовки наших страниц, оформленные тегом
<H2>, будут отображаться жирным шрифтом Verdana или, если этот
шрифт не установлен, шрифтом Arial. Размер заголовка мы установим
равным 14 пунктам, цвет черный, отступ слева равен 20 % ширины
страницы, а отступ сверху – 1 см. Заголовок будет выравниваться
относительно левого края страницы.</p>
<p>Благодаря тому, что боковые отступы заголовка и
параграфа установлены нами в процентах от ширины окна броузера, при
просмотре наших страничек на компьютерах с разным разрешением
дисплея пропорции и расположение заголовка, основного текста и
отступов будут сохранены.</p>
<p>Для того чтобы «привязать» созданные нами стили к
нашим страничкам, во все html-файлы в разделе <HEAD> мы должны
поместить строку со ссылкой на файл стилей и с указанием об
использовании CSS:</p>
<table border=0>
<tbody>
<tr>
<td><pre><LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css"></pre></td></tr></tbody></table></center></div>
<p>Поскольку файл со стилями будет находиться в том
же каталоге сервера, что и остальные странички, параметр HREF="URL"
в нашем случае будет просто именем нашего файла стилей
(styles.css).</p>
</table>
</table>
</body></html>
<?php
echo gb.'<a href="../../ycheb">Учебники</a>'.div;
echo gb.'<a href="'.H.'enter">Прихожая</a>'.div;
foot(); ?>