Стили заголовков первого и второго уровней заданы атрибутами тэга <STYLE1>
Рисунок 664. Стили заголовков первого и второго уровней заданы атрибутами тэга <STYLE1>
Можно определить стиль для тэга BODY. Тогда весь текст, находящийся между тэгами <BODY> и </BODY>, будет автоматически отформатирован в соответствии с перечисленными свойствами.
Если мы хотим задать один и тот же стиль сразу для нескольких тэгов, то перед определением стиля (всего того, что заключено в фигурные скобки) можно указать перечень тэгов (без угловых скобок), разделенных запятыми. В следующем примере задается одинаковый стиль для заголовков первого и второго уровней.
<HTML>
<HEAD>
<STYLE1>
HI, H2 (Font-size:48pt;Color:RED}
</STYLE1>
</HEAD>
<BODY>
<Н1>Это стиль HI. Цвет - красный</Н1>
<Н2>Это стиль Н2, такой же, как и HI. Цвет - красный</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>
Мы можем создать таблицу стилей, закрепив за ней имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Тогда в тэгах мы можем обращаться к этой таблице по ее имени, используя атрибут СLASS=имя_стиля, где имя стиля употребляется уже без точки.
Например, можно задать стиль так:
<STYLE1>
mystyle (color:black;font-family:Aria1}
</STYLE1>
А стиль заголовка второго уровня можно задать где-нибудь в тексте программы так:
<Н2 CLASS=mystyle>
Рассмотрим пример, создающий эффект, который без задания стиля был бы достижим только с помощью графики. Мы накладываем тексты друг на друга. Эта возможность далее будет использована для создания эффекта объемного текста (так называемого ЗD-эффекта). Кроме того, возможность наложения (частичного перекрытия) фрагментов страницы часто используется в дизайне реальных страниц. Вданном примере применяется тэг <DIV> для выделения фрагмента HTML-документа. Обратите внимание, как внутри определения стиля тэга BODY определяются другие стили с именами тень, основа, слой 1 и слой2. Это и есть то, что понимается под каскадной таблицей стилей.
<HTML>
<HEAD>
<TITLE>Пример CSS</TITLE>
<STILE> BODY {color: black; font-size:16px; font-family: Arial}
.тень {color: #DBDBDB; text-align:right; weight: medium; margin-top: ЗОрх;
font-size:27Opx;1ine-height: 270px;
font-family: Times)
.основа (color: red; weight: 900; margin-top: —230px; font-size:220px;
line-height: 250px; font-family: Times)
. слой1(color: black; margin-top: ~130px; weight: medium; ont-size:65px;
line-height: 65px; font-family: Arial}
.слой2 {color: green; margin-top: ЗОрх; weight: medium; font-size: 35px;
line-height: 45px; font-family: Arial}
</STYLE1>
</HEAD>
<BODY>
Пример каскадного стиля <CENTER>
<TABLE WIDTH=500 CELLPADING=0 CELLSPACING=0 BORDER=0> <TR>
<TD ALIGN=CENTER VALIGN=TOP>
<DIV CLASS=Tень>Мы/DIV>
<DIV CLASS=ocHOBa>Мы/DIV>
<DIV CLASS=слой1>сделали это без всякой графики</DIV>
<DIV CLASS=слой2>используя только стили текста</DIV>
</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
