Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Unix.docx
Скачиваний:
2
Добавлен:
01.03.2025
Размер:
1.91 Mб
Скачать

Слои dhtml, каскадные таблицы стилей css.

Традиционный HTML позволяет описать структуру документа, но не указывает "как" должен выглядеть до­кумент. Тот или иной браузер сам решает каким шрифтом отобразить, например, заголовок первого уровня (тэг <H1>). Гораздо большего контроля над внешним видом документа можно добиться, используя каскад­ные таблицы стилей (CSS). Они позволяют явно задать цвет, размер, название и начертание шрифта, фон, тип рамки и т. п., для какого-либо фрагмента документа. Стили описываются при помощи тэга <STYLE>. Стили также могут быть описаны в отдельном файле (обычно, с расширением CSS), подключаемом к HTML-документам при помощи ссылки вида <link rel="stylesheet" type="text/css" href="файл_стилей.css"> В подключаемом файле тэги <STYLE> </STYLE> указывать не надо.

Помимо стилей, в DHTML таже предусмотрено существование слоев в документе. Слои чем-то напоминают листы кальки, наложенные друг на друга, или слои в Photoshop и др. графических редакторах. Слои могут быть наложены друг на друга в определенном порядке и перекрываться. С помощью JavaScript их также можно перемещать по экрану, скрывать и отображать. К каждому слою может быть применен уникальный стиль CSS. Слои описываются при помощи тэга <DIV>. Рассмотрим работу со стилями и слоями подробнее.

Стили описываются при помощи тэга <STYLE>, который может находиться в заголовке документа, теле документа, или входить как параметр в состав другого тэга. Стиль может описываться для какого-либо тэга, для слоя в документе, или описываться как "класс", который может быть применен к любому тэгу в документе или части текста, при помощи вспомогательного тэга <SPAN>. В нормальном состоянии стили каскадно "спускаются" по странице, т.е. если один тэг вложен в другой, то он наследует стили, определен­ные в " вышестоящем" по уровню вложенности тэге, если только эти стили не были переопределены в самом вложенном тэге. Тэг <SPAN> "отсекает" каскадное наследование стилей и создает в документе "вложенный контейнер", внешний вид содержимого которого полностью определяются стилями, примененными в тэге <SPAN>. Пример:

Таблица 8.7.

Пример использования

Текст HTML-страницы

стилей CSS и слоев DHTML.

Комментарий

<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML 4.0 Transitional//EN">

<HTML> <HEAD> <TITLE> Слои DHTML и стили CSS </TITLE>

<STYLE>

BODY { background-color : #EEEEEE;

color : #000000; font-size:14px; font-family : Arial, Helvetica, sans-serif; }

Начало HTML-документа и области заголовка, название

HTML-документа.

Начало описания стилей документа.

Описания стиля для тэга BODY. Сначала указывается название тэга, для которого описывается стиль, а затем в фигурных скобках указывается название параметра, дво­еточие, значение параметра, точка с запятой, следующие параметры. В анном тэге указан цвет фона #EEEEEE, цвет текста #000000, размер шрифта 14 пикселей, назва­ние шрифта Arial, если его не будет, то используется шрифт Helvetica и, в самом крайнем случае, стандартный шрифт браузера sans-serif. Данный стиль будет приме­няться к содержимому документа, дополняя (если это возможно и стили не переопределены в самих элемен­тах), стили других элементов.

H1, FONT {font-size:110%; font-style:italic; font-weight:bold; }

A:HOVER, INPUT {color : #FF009F;

text-decoration : underline; }

Описание стиля сразу для двух тэгов: для заголовков первого уровня (H1) и тэга FONT. Размер шрифта 110%,

наклонный (italic) и жирный (bold) шрифт.

Стиль для гиперссылки (при наведению на нее мышью) и такой же стиль для элементов управления INPUT (кнопки, поля ввода, флажки и т.п.). Цвет #FF009F, текст подчеркнутый (underline).

A:LINK, A:VISITED {color : #000099;

text-decoration : none; }

#s1 {position:absolute; left:10px; top:300px; width:200px; height:100px; visibility:show; zIndex:1;}

Стиль для гиперссылки (LINK) и для посещенной гиперссылки (VISITED). Цвет #000099, текст без

подчеркивания (none).

Стиль для слоя (тэг <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>

<A href="www.sait.com"> Гиперссылка </A>

Конец области описания стиля.

Конец области заголовка, начало тела документа.

Этот заголовок первого уровня выглядит нестандартно, т.к. для него определен стиль.

Этот заголовок первого уровня выглядит и не стандарт­но, и не так, как указано в стиле для тэга <H1>, т. к. к нему дополнительно применен стиль класса zagolovok

(точка не указывается).

Гиперссылка выглядит не стандартно, в соответствии с описанием в стиле.

Текст HTML-страницы

Комментарий

<form method="post" action="www.sait.by/cgi-bin/ zakaz.cgi">

<input type="text" size="20" name="FIO"> <BR><BR>

<input type="reset" value="Cancel" style="color:blue; font-weight:bold;">

Начало формы.

Поле ввода. Вводимый текст будет красным и подчерк­нутым, т.к. стиль для гиперссылки (при наведении на нее мышью) совпадает со стилем элемента <INPUT>.

Здесь стиль определен прямо в самом тэге. Причем это описание суммируется с описанием стиля для тэга <INPUT>, находящемся в заголовке документа. В ре­зультате, текст на кнопке будет синий (blue), жирный (bold) и подчеркнутый (унаследовано от общего описания для всех тэгов <INPUT>).

&nbsp &nbsp

<input type="submit" value="OK" class="zagolovok"> <BR>

</form> <DIV ID="s1">

<FONT color="blue">К тексту слоя 1 применен тэг FONT</FONT>

</DIV>

<DIV ID="s2" STYLE="position:absolute; left:350; top:200; width:300; height:100; visibility:show; zIndex:10">

<FONT color="blue"><SPAN class="zagolovok"> К тексту слоя 2 применен тэг FONT, однако он не действует из-за тэга SPAN </SPAN> </FONT>

</DIV>

</BODY></HTML>

Здесь, к описанию стиля, унаследованному от всех тэгов <INPUT>, добавляются описания стиля из класса zagolovok.

Конец формы.

Начало слоя s1. Стиль слоя (его координаты и размеры) описан выше, в заголовке документа, в тэге <STYLE>. Данный текст будет выглядеть в соответствии со стилем тэга <FONT>, плюс в самом тэге <FONT> указан цвет

шрифта - синий.

Конец слоя.

Начало слоя s2. Координаты и размеры слоя, порядок наслоения, указан прямо в самом тэге <DIV>. Коорди­наты не обязательно абсолютные. Допустимо, например, указание position:relative; top:10px; left:30px; - смещение на 10px вниз и на 30px вправо относительно нормальной позиции в документе. Можно вообще не указывать координаты - слой будет на своем обычном месте в документе. Помимо координат, для слоя можно указывать все те же свойства, что и для обычных стилей: шрифт, цвет, фоновая картинка слоя (background-image)

и т.д.

Данный текст не будет выглядеть в соответствии со стилем тэга <FONT>, т.к. он находится внутри " контейнера" <SPAN> и его внешний вид однозначно определяется классом zagolovok. Никакие другие стили, кроме класса zagolovok, на текст внутри "контейнера"

<SPAN> не влияют.

Конец слоя.

Конец документа.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]