Do not fear friends. At worst, they may betray you. Fear those who do
Not care; they neither kill nor betray, but betrayal and murder exists
because of their silent consent." - Bruno Jasienski.
<h1 class=sans>More Wisdom</h1>
"Young love is a flame; very pretty, often very hot and fierce,
But still only light and flickering. The love of the older and
disciplined heart is as coals, deep burning, unquenchable." -
Henry Ward Beecher.
Группировка (grouping) состоит в объединении нескольких свойств и значений стилей. При этом возникают более жесткие правила для форматирования. Ниже приведен пример обычного класса:
Р.g{font: Arial;font-size: 22pt;line-height: 14pt }
Это означает, что все абзацы класса g будут отображаться шрифтом Arial, 22 пункта, с интерлиньяжем 14 пунктов. Если применить к этому классу группировку, то получится следующее определение:
P.g{font:22pt/14pt Arial}
Страница будет отображаться одинаково в обоих случаях. Обратите внимание на то, что сначала указываются значение для размера шрифта, высота строки после наклонной черты, а затем идет название шрифта. При группировке всегда требуется правильный синтаксис выражения. Попробуем воспользоваться пределением абзаца класса g.
ПРИМЕР абзаца класса g, к которому применена группировка.
Краткий обзор способов размещения элементов страницы
Таблицы стилей могут помогать в создании макета страницы, предоставляя широкие возможности выравнивания элементов страницы и управления полями. Выравнивание текста выполняется с помощью свойства text-align. Возможные значения left, right, center и justify.
Посмотрим, как это выглядит.
Конечно, для примера можно было не приводить все стихотворение, но я мне так нравятся стихи Окуджавы...
Итак, в данном примере используется встроенный стиль для выравнивания текста и его воздействия на отдельные абзацы.
Для управления полями Web-страницы используются четыре свойства: margin-top, margin-bottom, margin-left и margin-right.
Как и все свойства CSS, они могут применяться к любому логическому объекту. Обычно для управления полями используются объекты BODY и Р (paragraph - абзац). Для указания значений полей можно использовать разные единицы измерения: пиксели, пункты, сантиметры, дюймы и проценты.
Для справки - стандартные макеты страниц HTML обычно измеряются в пикселях.
CSS разрешают использовать отрицательные значения для полей. Это дает возмоожность дизайнеру создавать перекрывающиеся области страницы, добиваясь интересного эффекта.
На странице Пример создания 3-D эффекта приводится пример, в котором использовалось отрицательное значение полей margin-topдля создания графического эффекта без употребления графических средств.
Возврат в начало страницы Возврат на главную страницу сайта
Пример создания 3-D эффекта
Рассмотрим пример, создающий эффект, который без задания стиля можно было бы достичь только с помощью графики. В процессе создания Web-страницы наложим один текст на другой.
Эта возможность частичного перекрытия текста часто используется в дизайне реальных страниц.
HTML-код этой страницы выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type"content="text/html; charset=windows-1251">
<META http-equiv="Content-Language" content="ru">
<title>Пример создания 3-D эффект с помощью CSS</title>
<STYLE type=text/css>BODY {color: #000080; font-size : 16px;
font-family : Arial, Helvetica, sans-serif; }
.тень{
color: #DBDBDB;
text-align : right;
font : lighter "Times New Roman", Times, serif;
margin-top : 30px;
font-size : 270px;
line-height : 270px;
}
.основа{
color: red;
font : 900 220px "Times New Roman", Times, serif;
margin-top : -230px;
line-height : 250px;
}
.слой1{
color: black;
margin-top : -130px;
font-weight : normal;
font-size : 65px;
line-height : 65px;
font-family : Arial, Helvetica, sans-serif;
}
.слой2{
color: green;
margin-top : 30px;
font-weight : normal;
font-size : 35px;
line-height : 45px;
font-family : Arial, Helvetica, sans-serif;
}
</STYLE>
</head>
<body>
<p>Пример наложения текстов друг на друга, реализованный с помощью тега
<div> и CSS. В результате получаем 3-D эффект.
</p>
<center>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<div class="тень">Мы</div>
<div class="основа">Мы</div>
<div class="слой1">сделали это без всякой графики</div>
<div class="слой2">используя только каскадные таблицы стилей</div>
</td>
</tr>
</table>
</center>
<br>
<a href="css.htm#метка_91"><font size="2">Возврат к рассмотрению
вопроса о каскадных таблицах стилей</font></a>
</body>
</html>
В данном примере тег <div> применяется для выделения фрагмента HTML-документа. Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект.
Атрибут class этого тега позволяет сослаться на таблицу стилей, и таким образом задать стиль представления текста, расположенного между тегами <div class> и </div>.