Стили
Можно определить стиль для тэга BODY. Тогда весь текст, находящийся между тэгами <BODY> и </BODY>, будет автоматически отформатирован в соответствии с перечисленными свойствами.
Если мы хотим задать один и тот же стиль сразу для нескольких тэгов, то перед определением стиля (всего того, что заключено в фигурные скобки) можно указать перечень тэгов (без угловых скобок), разделенных запятыми. В следующем примере задается одинаковый стиль для заголовков первого и второго уровней.
<HTML> <HEAD> <STYLE> H1, H2 { font-size: 48pt; color: RED } </STYLE></HEAD> <BODY> <H1>Это стиль H1. Цвет - красный</H1> <H2>Это стиль H2, такой же, как и H1. Цвет - красный</H2> Это - обычный стиль по умолчанию</BODY> </HTML>Мы можем создать таблицу стилей, закрепив за ней имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Тогда в тэгах мы можем обращаться к этой таблице по ее имени, используя атрибут СLASS=имя_стиля, где имя стиля употребляется уже без точки.
Например, можно задать стиль так:
<STYLE> mystyle { color: black; font-family: Arial } </STYLE>А стиль заголовка второго уровня можно задать где-нибудь в тексте программы так:
<H2 CLASS=mystyle>Рассмотрим пример, создающий эффект, который без задания стиля был бы достижим только с помощью графики. Мы накладываем тексты друг на друга. Эта возможность далее будет использована для создания эффекта объемного текста (так называемого 3D-эффекта). Кроме того, возможность наложения (частичного перекрытия) фрагментов страницы часто используется в дизайне реальных страниц. В данном примере применяется тэг <DIV> для выделения фрагмента HTML-документа. Обратите внимание, как внутри определения стиля тэга BODY определяются другие стили с именами тень, основа, слой 1 и слой2. Это и есть то, что понимается под каскадной таблицей стилей.
<HTML> <HEAD> <TITLE>Пример CSS</TITLE> <STYLE> BODY { color: black; font-size: 16px; font-family: Arial } .тень { color: #DBDBDB; text-align: right; weight: medium; margin-top: 30px; font-size: 270px; line-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: 30px; weight: medium; font-size: 35px; line-height: 45px; font-family: Arial } </STYLE></HEAD> <BODY>Пример каскадного стиля <CENTER> <TABLE WIDTH=500 CELLPADING=0 CELLSPACING=0 BORDER=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></BODY> </HTML>