| Текст HTML-страницы
| Комментарий
|
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE> Слои DHTML и стили CSS </TITLE>
| Начало HTML-документа и области заголовка, название HTML-документа.
|
| <STYLE>
| Начало описания стилей документа.
|
| BODY { background-color: #EEEEEE;
color: #000000; font-size:14px;
font-family: Arial, Helvetica, sans-serif; }
| Описания стиля для тэга BODY. Сначала указывается название тэга, для которого описывается стиль, а затем в фигурных скобках указывается название параметра, дво-еточие, значение параметра, точка с запятой, следующие параметры. В анном тэге указан цвет фона #EEEEEE, цвет текста #000000, размер шрифта 14 пикселей, назва-ние шрифта Arial, если его не будет, то используется шрифт Helvetica и, в самом крайнем случае, стандартный шрифт браузера sans-serif. Данный стиль будет приме-няться к содержимому документа, дополняя (если это возможно и стили не переопределены в самих элемен-тах), стили других элементов.
|
| H1, FONT {font-size:110%; font-style:italic;
font-weight:bold; }
| Описание стиля сразу для двух тэгов: для заголовков первого уровня (H1) и тэга FONT. Размер шрифта 110%, наклонный (italic) и жирный (bold) шрифт.
|
| A:HOVER, INPUT {color: #FF009F;
text-decoration: underline; }
| Стиль для гиперссылки (при наведению на нее мышью) и такой же стиль для элементов управления INPUT (кнопки, поля ввода, флажки и т.п.). Цвет #FF009F, текст подчеркнутый (underline).
|
| A:LINK, A:VISITED {color: #000099;
text-decoration: none; }
| Стиль для гиперссылки (LINK) и для посещенной гиперссылки (VISITED). Цвет #000099, текст без подчеркивания (none).
|
| #s1 {position:absolute; left:10px; top:300px;
width:200px; height:100px; visibility:show;
zIndex:1;}
| Стиль для слоя (тэг <DIV>) с названием (id), равным s1. Слой описан ниже в тексте документа. Координаты абсолютные (absolute), слева – 10 пикселей, сверху 300, ширина 200, высота 100, видимость слоя – отображать (может быть hidden - скрытый), порядок наслоения – самый нижний слой (чем больше число – тем выше слой). Описание стиля слоя начинается со знака "#".
|
| . zagolovok {color: #FF009F; font-size:large;}
| Описание "класса" стиля. Класс может многократно применяться в документе, при помощи параметра class, добавляемого внутрь любого тэга. Описание класса начинается с точки.
|
| </STYLE>
| Конец области описания стиля.
|
| </HEAD><BODY>
| Конец области заголовка, начало тела документа.
|
| <H1> Новый заголовок первого уровня </H1>
| Этот заголовок первого уровня выглядит нестандартно, т.к. для него определен стиль.
|
| <H1 class="zagolovok"> К заголовку первого уровня применен класс zagolovok </H1>
| Этот заголовок первого уровня выглядит и не стандарт-но, и не так, как указано в стиле для тэга <H1>, т.к. к нему дополнительно применен стиль класса zagolovok (точка не указывается).
|
| <A href="www.sait.com"> Гиперссылка </A>
| Гиперссылка выглядит не стандартно, в соответствии с описанием в стиле.
|
| <form method="post" action="www.sait.by/cgi-bin/ zakaz.cgi">
| Начало формы.
|
| <input type="text" size="20" name="FIO"> <BR><BR>
| Поле ввода. Вводимый текст будет красным и подчерк-нутым, т.к. стиль для гиперссылки (при наведении на нее мышью) совпадает со стилем элемента <INPUT>.
|
| <input type="reset" value="Cancel" style="color:blue; font-weight:bold;">
| Здесь стиль определен прямо в самом тэге. Причем это описание суммируется с описанием стиля для тэга <INPUT>, находящемся в заголовке документа. В ре-зультате, текст на кнопке будет синий (blue), жирный (bold) и подчеркнутый (унаследовано от общего описания для всех тэгов <INPUT>).
|
|    
| 2 пробела.
|
| <input type="submit" value="OK"
class="zagolovok"> <BR>
| Здесь, к описанию стиля, унаследованному от всех тэгов <INPUT>, добавляются описания стиля из класса zagolovok.
|
| </form>
| Конец формы.
|
| <DIV ID="s1">
| Начало слоя s1. Стиль слоя (его координаты и размеры) описан выше, в заголовке документа, в тэге <STYLE>.
|
| <FONT color="blue">К тексту слоя 1 применен тэг FONT</FONT>
| Данный текст будет выглядеть в соответствии со стилем тэга <FONT>, плюс в самом тэге <FONT> указан цвет шрифта – синий.
|
| </DIV>
| Конец слоя.
|
| <DIV ID="s2" STYLE="position:absolute; left:350; top:200; width:300; height:100; visibility:show; zIndex:10">
| Начало слоя s2. Координаты и размеры слоя, порядок наслоения, указан прямо в самом тэге <DIV>. Коорди-наты не обязательно абсолютные. Допустимо, например, указание position:relative; top:10px; left:30px; – смещение на 10px вниз и на 30px вправо относительно нормальной позиции в документе. Можно вообще не указывать координаты – слой будет на своем обычном месте в документе. Помимо координат, для слоя можно указывать все те же свойства, что и для обычных стилей: шрифт, цвет, фоновая картинка слоя (background-image) и т.д.
|
| <FONT color="blue"><SPAN class="zagolovok"> К тексту слоя 2 применен тэг FONT, однако он не действует из-за тэга SPAN </SPAN>
</FONT>
| Данный текст не будет выглядеть в соответствии со стилем тэга <FONT>, т.к. он находится внутри "контейнера" <SPAN> и его внешний вид однозначно определяется классом zagolovok. Никакие другие стили, кроме класса zagolovok, на текст внутри "контейнера" <SPAN> не влияют.
|
| </DIV>
| Конец слоя.
|
| </BODY></HTML>
| Конец документа.
|
