МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ 1. CSS 2. DHTML

Литература Дунаев, В. Сценарии для Web-сайта. РНР и JavaScript [Текст] / В. Дунаев. - 2-е изд. - БХВ-Петербург, Дунаев, В. Сценарии для Web-сайта. РНР и JavaScript [Текст] / В. Дунаев. - 2-е изд. - БХВ-Петербург, Вильямсон, Х. Универсальный Dynamic HTML [Текст] / Х. Вильямсон. - СПб.: Питер, Вильямсон, Х. Универсальный Dynamic HTML [Текст] / Х. Вильямсон. - СПб.: Питер, 2001.

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

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

Связывание Если предполагается использовать один стиль для нескольких страниц, то можно описать стиль в отдельном файле. Для подключения стилевого файла используется тег, расположенный внутри контейнера. Первые два свойства указывают браузеру, что на страничке используется CSS. Значение последнего свойства - имя файла (с путем, абсолютным или относительным), в котором прописан стиль страницы.

Внедрение Если нужно задать стиль только для одной страницы, то описание стиля можно внедрить в тело документа, в заголовке HEAD, между тегами и.

Встраивание в теги документа Можно задать стиль отдельно выбранного элемента в свойстве STYLE тега этого элемента, например: Красный текст на желтом фоне, маленькими заглавными буквами. Тег служит для выделения фрагмента документа, чтобы задать общие параметры

Импортирование В теге можно импортировать внешнюю таблицу стилей с помощью таблицы url(styles.css); Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением является URL файла таблицы стилей.

Правила каскадных таблиц Правила каскадных таблиц состоят из селектора и определения. Селектор задает элемент (например, таблица), а определение свойства этого элемента (например, цвет фона таблицы).

Синтаксис В CSS в качестве селектора выступают теги HTML. Описание задается в фигурных скобках. Если у заданного свойства несколько значений, то они отделяются друг от друга пробелами. Описания отделяются друг от друга точкой с запятой: Тег {свойство 1: значение 1 значение 2; свойство 2: значение;}

Простой пример CSS, встраиваемого в HTML страницу. (код должен располагаться внутри тега ): <!-- BODY { color: gold; background: blue; font: bold 14px Comic Sans MS; text-align: justify; margin: 10px; } -->

Группирование Можно записывать селекторы через запятую, если им присваивается одинаковое определение; если селектор имеет несколько определений, то они записываются через точку с запятой. H1 {font-family: Arial} H2 {font-family: Arial} H1, H2 {font-family: Arial} H1 {font-weight: bold} H1 {font-size: 14pt} H1 {font-weight: bold; font-size: 14pt;}

H1 {font-family: Arial} H2 {font-family: Arial} H1, H2 {font-family: Arial} H1 {font-weight: bold} H1 {font-size: 14pt} H1 {font-weight: bold; font-size: 14pt;}

Наследование При определении стиля элемента, большинство вложенных элементов наследуют свойства головного элемента. Например, если в параграфе задается красный цвет шрифта, то выделенный с помощью текст также будет красным. Внутри параграфа с красным цветом текста, выделенный текст наследует цвет головного тега.

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

Классы Если нужно определить стиль так, чтобы один и тот же элемент в разных случаях отображался по-разному, то на помощь приходят классы. Класс описывается в виде.имя_класса {свойства} Для присвоения класса выбранному тегу используется свойство CLASS="имя_класса"

Пример: ….font1 {color: yellow; background: red;}.font2 {color: blue; background: yellow;} Желтый текст на красном фоне Синий текст на зеленом фоне А здесь цвет фона и текста заданы по умолчанию. …

Это ячейка таблицы И это тоже

Для определения класса для определенного тега используется конструкция имя_тега.имя_класса {свойства} Например, нужно часть текста выделить красным. Определим класс для тега : FONT.select {color: red;}... Здесь выделили часть текста.

CSS. Шрифт Свойства оформления шрифта: font-family - Определяет шрифт или семейство шрифта. Можно указывать до трех шрифтов, через запятую (если у клиента не будет установлен первый шрифт, то браузер перейдет к следующему в списке). font-style- Определяет способ начертания. Возможные значения: normal (нормальный, установлен по умолчанию), italic (курсив), oblique (наклонный). font-variant- Определяет варианты начертания шрифта. Возможные значения: normal (нормальный, установлен по умолчанию), small-caps (все буквы заглавные).

font-weight Определяет степень жирности шрифта. Возможные значения: normal (нормальный, установлен по умолчанию), bold, bolder, lighter. Значения bolder и lighter являются относительными, например, значение lighter для жирного текста делает его нормальным. font-size Устанавливает размер шрифта. Можно указывать как в относительных единицах (проценты), так и в абсолютных (пикселы, сантиметры и т.д.)

CSS. Текст Свойства текста: text-decoration Определяет оформление текста. Возможные свойства: none (по умолчанию, стандартный текст), underline (подчеркивание), line-through (зачеркивание), overline (надчеркивание).

text-transform Определяет оформление регистра букв текста. Возможные свойства: none (по умолчанию, отменяет изменение регистра букв), capitalize (первая буква каждого слова преобразуется в заглавную), uppercase (все буквы преобразуется в заглавные), lowercase (все буквы преобразуется в строчные).

text-align Определяет выравнивание текста. Возможные свойства: left (по умолчанию, выравнивание по левому краю), right (выравнивание по правому краю), center (центрирование), justify (выравнивание по ширине колонки).

text-indent Устанавливает величину отступа в первой строке параграфа. line-height Устанавливает межстрочный интервал. word-spacing Устанавливает интервал между словами. letter-spacing Устанавливает интервал между буквами. vertical-align Устанавливает вертикальное положение базисной линии элемента. Возможные значения: baseline, middle, sub, super, text-top, text-bottom, top, bottom.

CSS. Фон и цвет Свойства фона и цвета: color Определяет цвет элемента. background-color Определяет цвет фона для элемента. background-image Определяет поведение фонового изображения при скроллинге. Возможные значения: none (по умолчанию, отсутствие фонового рисунка), url("name") (фоновый рисунок загружается из файла name, где name - абсолютный или относительный адрес графического файла).

background-attachment Определяет поведение фонового изображения при скроллинге. Возможные значения: scroll (по умолчанию, фоновый рисунок прокручивается вместе с элементом), fixed (фоновый рисунок не прокручивается вместе с элементом).

CSS. Границы Свойства границ: border-width Определяет ширину границы. Может быть задана в пикселях или с помощью значений: thin (тонкая), medium (средней толщины), thick (толстая).

border-color Определяет цвет границы. Может принимать значение символьных цветов, числовым кодом цвета или определен как transparent для задания прозрачной (но имеющую ширину) границы.

border-style Определяет стиль отображения границы. Может принимать значения: none (по умолчанию, нет границы), hidden (спрятанная граница), dotted (точки), dashed (штрихи), solid (сплошная линия), double (двойная линия), groove (вогнутая трехмерная окантовка), ridge (выпуклая трехмерная окантовка), inset (вогнутая площадь), outset (выпуклая площадь).

border-collapse Определяет стиль разделения ячеек. Может принимать значения: separate (ячейки отделены друг от друга), collapse (ячейки не содержат промежутков между собой).

Каскадный приоритет – это порядок, в котором правила, определяющие конкретные стили будут применяться. 1) На первом месте правила, определенные атрибутом STYLE. 2) Правила, определяемые с помощью стилей. Например, P.1{…}. 3) Правила, определяющие стили для тегов определенного типа. Например, P {text-align:right; color:red}

Подключение стилей с помощью дескриптора является более важным, чем подключение стилей с помощью дескриптора LINE. Чтобы придать акцент (приоритет) определенному правилу используется important. Пример: P {text-align:right !important}- искусственное изменение приоритета.

4) На последнем месте каскадного приоритета (то есть наименьшие по важности) правила определения стилей указываемых пользователем с помощью браузера.

Язык НТМL задает общую структуру НТМL-документа, он предназначен для построения документов, отображающихся одинаково, независимо от платформы и типа программы просмотра.

Динамический HTML (DHTML) является дальнейшим развитием языка НТМL, добавляет к HTML набор свойств, позволяющих определять внешний вид документа и управлять слоями. При создании web-страницы с помощью DHTML у разработчика появляются дополнительные возможности.

Динамический HTML (DHTML)

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

Все элементы страницы доступны для просмотра и управления Возможно детальное форматирование документов HTML с помощью каскадных таблиц стилей Пользователь может управлять отображением элементов на странице Для элементов страницы предусмотрены различные способы позиционирования их на странице; абсолютное позиционирование позволяет создавать, в частности, анимационные эффекты

Использование фильтров дает возможность добавлять на страницу мультимедийные эффекты Использование свойства z-индекс позволяет создавать слои, на которых располагаются элементы страницы и управлять слоями Появилась возможность создавать динамически изменяемые страницы, изменяя только части страницы без необходимости обновления целой страницы

Реализация DHTML покоится на трех "китах": непосредственно HTML, каскадных таблицах стилей (Cascade Style Sheets CSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object Model DOM), являющейся, по сути, интерфейсом прикладного программирования (API). DOM связывает воедино три перечисленных компонента, придавая простому документу HTML новое качество, возможность динамического изменения своего содержимого без перезагрузки страницы.

В объектной модели DHTML с каждым элементом страницы можно связать определенное действие пользователя: щелчок кнопкой мыши, нажатие клавиши клавиатуры, перемещение в области элемента курсора мыши и т. д. Эта технология основана на фундаментальном понятии события в операционных системах с графическим интерфейсом пользователя. Каждое действие пользователя является причиной возникновения сообщения в операционной системе, которые представляются объектами в объектной модели DHTML. Свойства объектов-событий можно использовать во встраиваемых сценариях для получения информации о событии. При возникновении любого события динамически создается свойство event объекта window, входящего в объектную модель и представляющего окно браузера. Это свойство и является объектом, соответствующим сгенерированному событию

Параметр id задаёт уникальное имя элемента, которое можно использовать для ссылок на элементы в сценариях. Параметр id можно задать в любом теге. Все объекты, расположенные на странице, содержатся в наборе document.all.

Доступ к свойствам элемента с уникальным именем el1 осуществляется с помощью конструкции document.all['el1'].style. Если бы требовалось изменить цвет шрифта элемента el1, то сделать это можно было бы с помощью оператора присваивания document.all['el1'].style.color = 'blue'

Изменение свойств элемента при действиях пользователя Часто при организации текстовых меню используется следующий эффект: при попадании курсора мыши на некоторое слово цвет шрифта изменяется. Свойства элемента можно изменять в результате реакции на события, связанные с элементом. Создадим документ, в котором при попадании курсора мыши на текст заголовка изменяется цвет шрифта. При перемещении курсора мыши с области заголовка, восстанавливается первоначальный цвет шрифта.

Изменение цвета заголовка: Изменение цвета заголовка Изменение цвета заголовка

Ключевое слово this языка JavaScript используется для ссылки на текущий объект (в данном случае тег), применяется при вызове функции обработки события.

Многих анимационных эффектов можно достичь, скрывая или отображая некоторые элементы на странице. В DHTML предусмотрены средства, которые позволяют управлять отображением и скрытием элементов на странице HTML. Свойство visibility управляет отображением элемента. Если его значение равно visible, то элемент отображается, если значение равно hidden, то элемент на странице не отображается. По умолчанию элемент отображается на странице.