Домашняя | Статьи | Введение
Ссылки
Счётчики

Rambler's Top100

Последнее изменение

27.11.2008
Статья
DHTML — обозначение технологий для построения гипертекстовых приложений, практически не отличимых по своей динамике и интерактивности от обычных компьютерных программ.

Версия HTML 4.0 кардинально не отличается от версии 3.2 по тегам (хотя есть и новинки). Самое главное в HTML4.0 — все элементы страницы без исключения (графика, заголовки, таблицы, текст, то есть все теги и их атрибуты) доступны для управления.

Изменения больше касаются не языка, а объектной модели браузера. Используя CSS и JavaScript, можно управлять любым элементом на странице, меняя его локально, не перерисовывая страницу целиком.

Технология CSS+JavaScript допускает, например, абсолютное позиционирование, то есть позволяет выводить элементы на экран, используя реальные координаты. Программное изменение координат в объектной модели вызывает изменение положения элемента на экране.

CSS, наряду с двумя координатами x и y, позволяет использовать ещё и третью координату — z-индекс. Третья координата определяет номер слоя, в который помещается элемент. Таким образом, при движении в многослойном пространстве одни элементы могут проходить над или под другими.

CSS позволяет задавать на странице графические фильтры, которые добавляют к графике и тексту эффекты мультимедиа (отражение, прозрачность, тени, движение пятен, проявление в “рентгеновских лучах”).

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства HTML-тегам. Таким образом можно менять вид элемента на экране, то есть менять стиль показа элемента на экране.

В дальнейшем для краткости мы будем говорить “стиль тега”, понимая под этим “стиль элемента, который браузер строит для этого тега на экране”. Мы также будем говорить “стиль файла”, понимая под этим “стиль показа на экране документа, задаваемого HTML-файлом”.

Можно указать, например, как должен выглядеть на экране конкретный абзац, заданный тегом <P>:

К этому абзацу применено стилевое определение.

Вот что написано для этого абзаца в HTML-кодах:

 

<P style="font-size:1.5cm; color:green">
   К этому абзацу применено стилевое определение.

Стиль задается атрибутом style. В приведённом примере браузеру дано указание вывести абзац зелёными буквами размером в 1,5 сантиметра.

Формат записи:

характеристика: величина;

Указания отделяются друг от друга символом “;”.

Атрибут style можно использовать практически в каждом теге, задавая его специфические свойства. Посмотрите ещё один пример внедрения стилей в теги HTML-программы. 

<HTML>
 <HEAD>
  <TITLE>Стиль для отдельного тега</TITLE>
 </HEAD>
 <BODY>
  <H2>Стиль для отдельного тега</H2>
  <HR>
  <UL>
   <LI>Это обычный текст.
   <LI style="color:red;font-size:1cm;font-style:italic">
       Красные наклонные буквы высотой в 1 сантиметр.
   <LI style="margin-left:2cm">Отступ слева в 2 сантиметра.
  </UL>
 </BODY>
</HTML>

Пример

Стиль для отдельного HTML-файла

Можно задавать стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа. Например, можно указать вид всех заголовков. Для этого достаточно написать определение в головной части документа: 

<HTML>
 <HEAD>
  <TITLE>Стиль для отдельного файла</TITLE>
  <STYLE type="text/css">
  <!--
    H1,H2,H3,H4,H5,H6
    {
     text-align:right;
     color:maroon;
     font-family:Arial,Geneva,Helvetica,sans-serif;
    }
  -->
  </STYLE>
 </HEAD>
 <BODY bgcolor=#DFF0D5 text=black>
  <H2>Стиль для отдельного файла</H2>
  <HR>
  <P>Это обычный текст
  <H3>Это заголовок</H3>
  <P>Это снова обычный текст
 </BODY>
</HTML>
 

Пример

Браузер отображает заголовки в этом документе рубленым шрифтом цвета “maroon” и выравнивает их по правому краю экрана. Такое поведение браузера соответствует инструкции: 

<STYLE type="text/css">
<!--
  H1,H2,H3,H4,H5,H6
  {
   text-align:right;
   color:maroon;
   font-family:Arial,Geneva,Helvetica,sans-serif;
  }
-->
</STYLE>

Стилевые определения (селекторы) располагаются внутри блока <STYLE>...</STYLE> и “запаковываются” в HTML-комментарий (для браузеров, не поддерживающих CSS).

Cтилевое определение имеет вид: 

Имя тега (или имена тегов через запятые)
{
 характеристика: величина;
 ...
 характеристика: величина;
}

В приведенном выше примере использованы три характеристики:

 

text-align:right;
задает выравнивание по левому краю
color:maroon;
задает цвет “maroon”
font-family:Arial,Geneva,Helvetica,sans-serif;
задает рубленный шрифт

Заголовки будут выводиться шрифтом Arial Cyr, если, конечно, этот шрифт есть на компьютере пользователя. Если этого шрифта нет, браузер будет последовательно искать шрифт Geneva, Helvetica, в конце концов, просто какой-нибудь рубленый шрифт (указание sans-serif). В случае полной неудачи браузер выведет текст шрифтом по умолчанию, т. е., как правило, шрифтом Times New Roman.

Стиль для нескольких HTML-файлов

Обычной практикой является указание стилей в отдельном файле. Для таких файлов используют расширение css. Например, можно в файле style.css записать: 


BODY { margin-left: 40px; }

H1,H2,H3,H4,H5,H6
{
 text-align:right;
 color:maroon;
 font-family:Arial,Geneva,Helvetica,sans-serif;
}

Для подключения этих указаний в разделе <HEAD>...<HEAD> HTML-файла нужно поместить ссылку: 

<LINK rel=stylesheet type="text/css" href=style.css>

Такой способ расположения стилевых определений очень удобен. На один и тот же стилевой файл могут ссылаться многие HTML-документы. Изменения в этом единственном файле скажутся на внешнем виде десятка (а то и сотни) страниц.

Обратите внимание на стилевое указание BODY {margin-left:40px;}, задающее экранный отступ слева в 40 пикселов для всего документа в целом.

В силу такого определения элементы не будут “наползать” на вертикальную фоновую полосу, моделирующую левое страничное поле. Как видите, можно задать страничный отступ без таблиц и “распорок”, о которых говорилось в книге “HTML- конструирование”.

За что мы любим CSS

Используя CSS-указания можно:

  • Задавать поля, отступы, размер и тип шрифта, цвета текста и фона для отдельных элементов страницы (абзацев, слов, букв), оформлять красные строки, буквицы. В CSS представлен ряд свойств, с помощью которых можно создавать выпадающие меню, накладывать один элемент на другой, заставлять текст отбрасывать тень, проявляться в рентгеновских лучах и использовать другие эффекты. Можно выводить элементы на экран браузера с точностью до одного пиксела, динамически перемещать их по экрану в разных слоях (одни элементы будут проходить над или под другими). Иными словами, CSS вместе с JavaScript позволяет монтировать на экране браузера приложение, практически ничем не отличающееся от компьютерной программы, написанной на профессиональном языке программирования, таком, как Си, например.
     
  • Изменять оформление целого сайта, состоящего из сотен файлов, не прикасаясь к HTML-коду, редактируя всего лишь один CSS-файл.
     
  • Уменьшать количество тегов в HTML-документе, по-возможности отделяя информационное наполнение HTML-файла от его внешнего представления на экране браузера.

>Назад<
Хостинг от uCoz