Курс "SYS Admin" модуль SYS-2 - занятие 7

Выбор занятия

Выберите текущее занятие

Все материалы предоставлены в образовательных целях. Для пополнения базы материалов или цитат присылайте свои тексты на эл. почту (внизу страницы).

JavaScript

CSS и DHTML

Dynamic HTML или DHTML — это способ создания интерактивного веб-сайта, использующий сочетание статичного языка разметки HTML, встраиваемого (и выполняемого на стороне клиента) скриптового языка JavaScript, CSS (каскадных таблиц стилей) и DOM (объектной модели документа).

Он может быть использован для создания приложения в веб-браузере: например для более простой навигации или для придания интерактивности форм. DHTML может быть использован для динамического перетаскивания элементов по экрану. Также он может служить как инструмент для создания основанных на браузере видеоигр.

DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS).


Соответствие стилей CSS и JavaScript

Из таблицы видно, что существует четкое соответствие между свойствами стиля CSS и свойствами объекта STYLE JavaScript.

JavaScript CSS Описание
background background Цвет фона элемента
backgroundAttachment background-attachment Указывает, будет ли фоновое изображение стационарным или прокручиваемым
backgroundColor background-color Цвет фона элемента
backgroundImage background-image Фоновое изображение
backgroundPosition background-position Исходное положение фонового изображения
backgroundPositionX   Абсцисса фонового изображения
backgroundPositionY   Ордината фонового изображения
backgroundRepeat background-repeat Тип заполнения элемента фоновым изображением
border border Стенографические свойства для одновременного задания ширины, стиля и цвета всех границ
borderTop border-top Стенографические свойства для одновременного задания ширины, стиля и цвета границ (сверху, справа, снизу, слева )
borderRight border-right
borderBottom border-bottom
borderLeft border-left
borderColor border-color Стенографическое свойство для одновременного задания цвета всех границ
borderStyle border-style Стенографическое свойство для одновременного задания стиля линий всех границ
borderWidth border-width Стенографическое свойство для одновременного задания размеров зоны границы блока
borderTopColor border-top-color Цвет границы (сверху, справа, снизу, слева )
borderRightColor border-right-color
borderBottomColor border-bottom-color
borderLeftColor border-left-color
borderTopStyle border-top-style Стиль линии границы (сверху, справа, снизу, слева )
borderRightStyle border-right-style
borderBottomStyle border-bottom-style
borderLeftStyle border-left-style
borderTopWidth border-top-width Размер зоны границы блока (сверху, справа, снизу, слева )
borderRightWidth border-right-width
borderBottomWidth border-bottom-width
borderLeftWidth border-left-width
clear clear Задает управление потоком после смещенного блока
clip clip Область усечения, определяющая видимую часть содержимого блока
color color Цвет текста
cursor cursor Тип курсора
display display Тип структурного блока, порождаемого элементом
filter filter Фильтр
styleFloat float Задает смещение блока, вследствие чего блок будет обтекаться текстом контейнера
font font Стенографическое свойство для одновременного задания нескольких свойств шрифта
fontFamily font-family Гарнитура шрифта
fontSize font-size Размер шрифта
fontStyle font-style Начертание шрифта
fontVariant font-variant Может задать вывод капителью
fontWeight font-weight Насыщенность шрифта
height height Высота содержимого блока
left left Горизонтальное смещение блока относительно левой границы контейнера
letterSpacing letter-spacing Межсимвольное расстояние
lineHeight line-height Межстрочный интервал
margin margin Стенографическое свойство для одновременного задания полей
marginBottom margin-bottom Размер зоны полей вокруг блока (сверху, справа, снизу, слева )
marginLeft margin-left
marginRight margin-right
marginTop margin-top
overflow overflow Тип усечения содержимого, выходящего за пределы блока
padding padding Стенографическое свойство для одновременного задания отступов
paddingBottom padding-bottom Размер зоны отступов внутри блока (сверху, справа, снизу, слева )
paddingLeft padding-left
paddingRight padding-right
paddingTop padding-top
pixelHeight   Высота содержимого блока в пикселах
pixelLeft   Горизонтальное смещение блока относительно левой границы контейнера в пикселах
pixelTop   Вертикальное смещение блока относительно левой границы контейнера в пикселах
pixelWidth   Ширина содержимого блока в пикселах
posHeight   Высота содержимого блока
posLeft   Горизонтальное смещение блока относительно левой границы контейнера
posTop   Вертикальное смещение блока относительно левой границы контейнера
posWidth   Ширина содержимого блока
position position Алгоритм позиционирования
textAlign text-align Выравнивание текста
textDecoration text-decoration Декорирование текста
textDecorationBlink   Мерцающий текст
textDecorationLineTrough   Перечеркнутый текст
textDecorationNone   Текст без эффектов
textDecorationOverLine   Надчеркнутый текст
textDecorationUnderLine   Подчеркнутый текст
textIndent text-indent Отступ первой строки текста в блоке
textTransform text-transform Преобразование текста
top top Вертикальное смещение блока относительно верха контейнера
verticalAlign   Вертикальное выравнивание HTML элемента относительно контейнера
visibility visibility Видимость блока
width width Ширина содержимого блока
zIndex z-index Позиционный уровень блока

HTML текст может быть любого размера и цвета, по вашему усмотрению. Вы также можете определить вид шрифта и его объемность.