The Dynamic Duo
The Dynamic Duo - это учебное пособие созданнае Дэном Штейнманом (Dan Steinman) и служащее одним из источников данной рассылки. Отличительная особенность этого пособия - ориентированность на кросс-браузерность (то есть применимость и для Netscape и для IE). Кроме того, пособие может быть стартовой точкой для новичков в JavaScript и CSS, поскольку, хоть и рассамтривает с самого начала достаточно продвинутые темы, делает это медленно и внимательно по отношению к базовым понятиям, необходимых для понимания функционирования DHTML. Концепции программирования представлены не сильно "заумно". Однако это же является и ограничением, поскольку превращает это пособие только в схему изучения. Поэтому я очень надеюсь на Вашу помощь, дорогие подписчики, в том смысле, что я жду от вас предложений и заявок на интересующие вас темы в веб-строительстве вообще и в клинтской интерактивности сайтов в частности.
Позиционирование CSS
CSS являются базисом для DHTML как в браузере от Netscape, так и в IE от Microsoft. CSS позволяет создавать набор "стилей", которые определяют расположение и параметры элементов на вашей странице. Позиционирование каскадных таблиц стилей (CSS Positioning, CSS-P) это расширение CSS, которое даёт разработчику доступ к расположению чего бы то ни было на экране с точностью до пикселя. Я не буду пересказывать документацию CSS и CSS-P. Я вам даю линк: W3C CSS Positioning.
Итак, приступим к DHTML!
DIV таги
CSS-P активно использует DIV (division-разделение), пустой не форматирующий таг. Если вы поместите фрагмент HTML документа или просто текст между <DIV> и </DIV>, то вы получите "DIV блок", "DIV елемент", "CSS-слой" или просто "слой". Таким образом, использование DIV тага ничем не отличается от большинства других HTML тагов:
<DIV>
Это DIV таг
</DIV>
Эффект от использования DIV тага такой же, как и в случае применения <P> и </P>. Но использование DIV вместе с CSS определяет, как содержимое между <DIV> и </DIV> будет размещёно на странице, какого будет цвета, размера и т.д. Для этого нужно присвоить DIV тагу аттрибут ID с "персональным" именем DIV'а:
<DIV ID="truck">
Это DIV таг c ID truck
</DIV>
Значение аттрибута ID может состоять из букв (a-z, A-Z), цифр (0-9) и
символа подчёркивания (_) , но начинаться с буквы.
Подключение CSS
Подключение CSS в HTML может происходить двумя способами. Первый способ - объявление стиля тага непосредственно в самом таге:
<DIV ID="truck" style="здесь идёт определение стиля (см. ниже)">
Это стилизованый DIV таг
</DIV>
Второй способ - это использование внешнего тага STYLE:
<STYLE TYPE="text/css">
<!--
#truck {здесь идёт определение стиля (см. ниже)}
-->
</STYLE>
<DIV ID="truck">
Это стилизованный DIV таг
</DIV>
Заметьте, как ID может использоваться для применения стилей
Кросс-браузерные свойcтва СSS
Поскольку цель данной рассылки - создание сайтов при помощи DHTML так, что эти сайты отображаются правильно и функционируют в обоих браузерах, мы слегка ограничены в выборе средств предлагаемых CSS. Ниже я привожу (неполный) список свойств, которые имплементированы очень похоже на то, как это стандартизировано в W3C.
| Название свойства | Значение свойства |
|---|---|
| position | Определяет как DIV так позиционируется: relative-относительно других HTML элементов, absolute - согласно определённо заданным координатам. |
| left (right) | Расстояние в пикселах от левого (правого) края окна браузера(абсолютное позиционирование) или относительного HTML элемента (относительное позиционирование) |
| top (bottom) | Расстояние в пикселах от верхнего (нижнего) края окна браузера(абсолютное позиционирование) или относительного HTML элемента(относительное позиционирование) |
| width | Ширина DIV тага. Любой HTML элемент или текст, вставленный в этот DIV, должен автоматически настраиваться по длине согласно этому значению. Важно! Если вы используете слои для создания анимации, обязательно установите ширину явно. Потому что в IE ширина автоматически равна 100%. Тогда во время движения анимации внизу окна возникает элемент прокрутки, который снижает скорость анимации. |
| height | Высота DIV тага. Это свойство используется очень редко, в основном для ограничивания размеров слоя. |
| clip | Определяет прямоугольник, ограничивающий уровень. Прямоугольник определяется через 4 координаты: clip:rect(top,right,bottom,left); |
| visibility | Определяет видимость DIV тага: visible - видимый, hidden - невидимый, inherited - наследует видимость элемента, внутри которого расположен (значение по умолчанию) |
| z-index | Порядок наложения слоёв друг на друга |
| background-color | Фоновый цвет DIV тага. В Netscape это свойство применимо только к тексту, но если вы хотите рисовать прямоугольники, вы должны также прописать layer-background-color с тем же значением |
| layer-background-color | Фоновый цвет DIV тага в Netscape |
| background-image | Фоновая картинка DIV тага для IE |
| layer-background-image | Фоновая картинка DIV тага для Netscape |
| color | Цвет текста внутри DIV тага |
Синтаксис CSS отличается от синтаксиса HTML: свойство, двоеточие, значение свойства, точка с запятой. Не нужно устанавливать значения для всех свойств. Кроме того, единица меры по умолчанию - пихел (точка на экране), так что необязательно ставить "px" после left, top, width, хотя и рекомендуется. Наконец, пробелы между объявлениями свойств игнорируются: вы можете разместить их в одной строке, или в разных строках, и даже с
табуляцией между ними.
Если вставить эти строки
position:relative; clip:rect(0px 200px 100px 0px);
left:50px; top:10px; width:200px; height:100px; color:yellow;
background-color:#FF0000; layer-background-color:#FF0000;
вместо "здесь идёт определение стиля (см. ниже)" в примерах приведенных
выше, то получится вот такой красный прямоугольник с надписью:
Фраза "Абсолютное позиционирование" была создана вот таким стилем:
position:absolute; left:500px; top:2900px; width:80px; color:teal;
По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/stylesheets.html
0 коммент.:
Отправить комментарий